レイアウトが特定のdpiで崩れる

こんにちは。androidアプリ制作で
レイアウトについて困った事があり質問させていただきます。

エミュレータでPixel 3a(1080×2220xxhdpi)でレイアウトをデザインし、
そちらではレイアウト崩れもなく正常表示していたのですが
Galaxy Nexus(720×1280xhdpi)で動かすとレイアウト崩れが起きて困っています。

具体的に申し上げると、アプリ上に配置したImageViewが表示されなくなっています。
Galaxy Nexus(720×1280xhdpi)でも正常表示されるためには、どの部分を修正すればよいでしょうか？よろしくお願いいたします。

ViewPagerを用いて表示しています。

[Pixel 3a(1080×2220xxhdpi)]

[Galaxy Nexus(720×1280xhdpi)。上メニューが表示されていない]

[Galaxy Nexus(720×1280xhdpi)。Android Studio上でImageView２つがはみ出ている]

activity_main.xml

activity_main.xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:id="@+id/main_activity"
6    android:layout_width="match_parent"
7    android:layout_height="match_parent"
8    tools:context=".activity.MainActivity">
9
10    <androidx.viewpager.widget.ViewPager
11        android:id="@+id/viewPager"
12        android:layout_width="match_parent"
13        android:layout_height="match_parent" />
14
15</androidx.constraintlayout.widget.ConstraintLayout>

fragment_top.xml

fragment_top.xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:app="http://schemas.android.com/apk/res-auto"
5    xmlns:tools="http://schemas.android.com/tools"
6    android:layout_width="match_parent"
7    android:layout_height="match_parent"
8    tools:context=".fragment.TopFragment">
9
10    <ImageView
11        android:id="@+id/app_title_imageview"
12        android:layout_width="412dp"
13        android:layout_height="68dp"
14        android:background="#3768ff"
15        android:contentDescription="Application Title"
16        app:layout_constraintBottom_toTopOf="@+id/app_menu_title_imageview"
17        app:layout_constraintHorizontal_bias="1.0"
18        app:layout_constraintLeft_toLeftOf="parent"
19        app:layout_constraintRight_toRightOf="parent"
20        app:layout_constraintTop_toTopOf="parent"
21        app:layout_constraintVertical_bias="1.0"
22        />
23
24    <TextView
25        android:id="@+id/textView2"
26        android:layout_width="wrap_content"
27        android:layout_height="wrap_content"
28        android:layout_marginStart="120dp"
29        android:layout_marginTop="16dp"
30        android:text="液化ガス換算機"
31        android:textColor="#FFFFFF"
32        android:textSize="24sp"
33        app:layout_constraintStart_toStartOf="parent"
34        app:layout_constraintTop_toTopOf="@+id/app_title_imageview" />
35
36    <ImageView
37        android:id="@+id/app_menu_title_imageview"
38        android:layout_width="412dp"
39        android:layout_height="53dp"
40        android:background="#a5a5a5"
41        app:layout_constraintBottom_toTopOf="@+id/scroll_view"
42        app:layout_constraintLeft_toLeftOf="parent"
43        app:layout_constraintRight_toRightOf="parent"
44        android:contentDescription="App menu title" />
45
46    <TextView
47        android:id="@+id/textView3"
48        android:layout_width="wrap_content"
49        android:layout_height="wrap_content"
50        android:layout_marginStart="145dp"
51        android:layout_marginTop="13dp"
52        android:text="換算メニュー"
53        android:textColor="#FFFFFF"
54        android:textSize="20sp"
55        app:layout_constraintStart_toStartOf="@+id/app_menu_title_imageview"
56        app:layout_constraintTop_toTopOf="@+id/app_menu_title_imageview" />
57
58    <ScrollView
59        android:id="@+id/scroll_view"
60        android:layout_width="415dp"
61        android:layout_height="611dp"
62        tools:layout_editor_absoluteX="-4dp"
63        tools:layout_editor_absoluteY="120dp"
64        app:layout_constraintBottom_toBottomOf="parent"
65        app:layout_constraintLeft_toLeftOf="parent"
66        app:layout_constraintRight_toRightOf="parent"
67        android:background="#fff5bd"
68        >
69
70        <LinearLayout
71            android:layout_width="match_parent"
72            android:layout_height="wrap_content"
73            android:orientation="vertical" >
74
75            <Button
76                android:id="@+id/button1_scroll"
77                android:layout_width="339dp"
78                android:layout_height="wrap_content"
79                android:layout_marginTop="30dp"
80                android:layout_gravity="center_horizontal"
81                android:background="@drawable/circle_button"
82                android:text="炭酸ガス"
83                android:textColor="#3F51B5" />
84
85            <Button
86                android:id="@+id/button2_scroll"
87                android:layout_width="339dp"
88                android:layout_height="wrap_content"
89                android:layout_marginTop="30dp"
90                android:layout_gravity="center_horizontal"
91                android:background="@drawable/circle_button"
92                android:text="ハロン1301"
93                android:textColor="#3F51B5" />
94
95            <Button
96                android:id="@+id/button3_scroll"
97                android:layout_width="339dp"
98                android:layout_height="wrap_content"
99                android:layout_marginTop="30dp"
100                android:layout_gravity="center_horizontal"
101                android:background="@drawable/circle_button"
102                android:text="NAF S-Ⅲ"
103                android:textColor="#3F51B5" />
104
105            <Button
106                android:id="@+id/button4_scroll"
107                android:layout_width="339dp"
108                android:layout_height="wrap_content"
109                android:layout_marginTop="30dp"
110                android:layout_gravity="center_horizontal"
111                android:background="@drawable/circle_button"
112                android:text="HFC-125"
113                android:textColor="#3F51B5" />
114
115            <Button
116                android:id="@+id/button5_scroll"
117                android:layout_width="339dp"
118                android:layout_height="wrap_content"
119                android:layout_marginTop="30dp"
120                android:layout_gravity="center_horizontal"
121                android:background="@drawable/circle_button"
122                android:text="HFC-23(R-23)"
123                android:textColor="#3F51B5" />
124
125            <Button
126                android:id="@+id/button6_scroll"
127                android:layout_width="339dp"
128                android:layout_height="wrap_content"
129                android:layout_marginTop="30dp"
130                android:layout_gravity="center_horizontal"
131                android:background="@drawable/circle_button"
132                android:text="FM-200(R-227)"
133                android:textColor="#3F51B5" />
134
135        </LinearLayout>
136    </ScrollView>
137
138</androidx.constraintlayout.widget.ConstraintLayout>

行動規範の内容に同意します

回答1件

こんな感じでいかがでしょう？

一番の問題は ScrollView に layout_height="611dp" が設定され、かつ左右と下だけ制約があり、上にはなかったので、小さな画面では上にはみ出してしまいます。そして、app_menu_title_imageview には layout_constraintBottom_toTopOf="@+id/scroll_view" という制約があったので ScrollView の上 (つまり画面外) に配置されてしまいます。

また、ImageView や ScrollView には横幅が指定されていたので、小さな画面では横にはみ出し、大きな画面では隙間ができてしまいます。

画面の横幅に合わせる方法ですが、これは ConstraintLayout の中だけの特別ルールですが、layout_width や layout_height に 0dp を指定することで「制約に従う」という意味になります。ので、ImageView や ScrollView は左右を parent に合わせた上で layout_width="0dp" とすれば画面の横幅いっぱいになります。

縦の位置と高さについては、ImageView は左右と上だけ制約を設定し、layout_height にお望みの高さをしてすれば位置と大きさが決まります。ImageView の下の制約も指定してしまうと、下の View (ScrollView など) の位置によって動いてしまいますので、画面上部に固定したいのであれば下の制約を設定する必要はありません。

TextView は ImageView の中央に配置したいと解釈して、上下左右を ImageView に合わせ、layout_width, layout_height を wrap_content にしました。

最後に、ScrollView の上下の制約を設定し、layout_height を 0dp にすることで、ScrollView は残りの領域を占めることになります。

diff
1 <androidx.constraintlayout.widget.ConstraintLayout
2     xmlns:android="http://schemas.android.com/apk/res/android"
3     xmlns:app="http://schemas.android.com/apk/res-auto"
4     xmlns:tools="http://schemas.android.com/tools"
5     android:layout_width="match_parent"
6     android:layout_height="match_parent"
7     tools:context=".fragment.TopFragment">
8 
9     <ImageView
10         android:id="@+id/app_title_imageview"
11-        android:layout_width="412dp"
12+        android:layout_width="0dp"
13         android:layout_height="68dp"
14         android:background="#3768ff"
15         android:contentDescription="Application Title"
16-        app:layout_constraintBottom_toTopOf="@+id/app_menu_title_imageview"
17-        app:layout_constraintHorizontal_bias="1.0"
18         app:layout_constraintLeft_toLeftOf="parent"
19         app:layout_constraintRight_toRightOf="parent"
20         app:layout_constraintTop_toTopOf="parent"
21-        app:layout_constraintVertical_bias="1.0"
22         />
23 
24     <TextView
25         android:id="@+id/textView2"
26         android:layout_width="wrap_content"
27         android:layout_height="wrap_content"
28-        android:layout_marginStart="120dp"
29-        android:layout_marginTop="16dp"
30         android:text="液化ガス換算機"
31         android:textColor="#FFFFFF"
32         android:textSize="24sp"
33-        app:layout_constraintStart_toStartOf="parent"
34+        app:layout_constraintBottom_toBottomOf="@+id/app_title_imageview"
35+        app:layout_constraintEnd_toEndOf="@+id/app_title_imageview"
36+        app:layout_constraintStart_toStartOf="@+id/app_title_imageview"
37         app:layout_constraintTop_toTopOf="@+id/app_title_imageview" />
38 
39     <ImageView
40         android:id="@+id/app_menu_title_imageview"
41-        android:layout_width="412dp"
42+        android:layout_width="0dp"
43         android:layout_height="53dp"
44         android:background="#a5a5a5"
45-        app:layout_constraintBottom_toTopOf="@+id/scroll_view"
46         app:layout_constraintLeft_toLeftOf="parent"
47         app:layout_constraintRight_toRightOf="parent"
48+        app:layout_constraintTop_toBottomOf="@+id/app_title_imageview"
49         android:contentDescription="App menu title" />
50 
51     <TextView
52         android:id="@+id/textView3"
53         android:layout_width="wrap_content"
54         android:layout_height="wrap_content"
55-        android:layout_marginStart="145dp"
56-        android:layout_marginTop="13dp"
57         android:text="換算メニュー"
58         android:textColor="#FFFFFF"
59         android:textSize="20sp"
60+        app:layout_constraintBottom_toBottomOf="@+id/app_menu_title_imageview"
61+        app:layout_constraintEnd_toEndOf="@+id/app_menu_title_imageview"
62         app:layout_constraintStart_toStartOf="@+id/app_menu_title_imageview"
63         app:layout_constraintTop_toTopOf="@+id/app_menu_title_imageview" />
64 
65     <ScrollView
66         android:id="@+id/scroll_view"
67-        android:layout_width="415dp"
68-        android:layout_height="611dp"
69-        tools:layout_editor_absoluteX="-4dp"
70-        tools:layout_editor_absoluteY="120dp"
71+        android:layout_width="0dp"
72+        android:layout_height="0dp"
73         app:layout_constraintBottom_toBottomOf="parent"
74         app:layout_constraintLeft_toLeftOf="parent"
75         app:layout_constraintRight_toRightOf="parent"
76+        app:layout_constraintTop_toBottomOf="@+id/app_menu_title_imageview"
77         android:background="#fff5bd"
78         >
79 
80 (以下変更なし)