質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

Q&A

受付中

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

rick
rick

総合スコア18

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

1回答

0グッド

0クリップ

1338閲覧

投稿2020/12/29 13:27

編集2020/12/30 06:22

こんにちは。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上でImageView2つがはみ出ている]

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>

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

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

一番の問題は 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 (以下変更なし)

投稿2021/01/04 14:23

hoshi-takanori

総合スコア7751

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。