Androidアプリケーション作成時のデザイン方法について

前提・実現したいこと

AndroidStudioにてアプリ作成中の初心者です。
基本的なデザイン方法について質問です。

発生している問題・エラーメッセージ

上図にて例を作成しました。

ボタンを縦に６つ並べた状態にてエミュレーターを実行したところ、
すべてが表示されずに下部のボタンが押せない状態となります。

AndroidStudioのプレビューサイズはNexus5sで、エミュレーターもNexus5sで指定して表示していますが、
作成時の画面下部がエミュレーターにて表示されずに困っております。

該当のソースコード

 <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="28dp"
        android:layout_marginBottom="8dp"
        android:text="@string/birdC1"
        app:layout_constraintBottom_toTopOf="@+id/guideline4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline3" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="28dp"
        android:layout_marginBottom="8dp"
        android:text="@string/birdC2"
        app:layout_constraintBottom_toTopOf="@+id/guideline8"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline4" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="28dp"
        android:layout_marginBottom="8dp"
        android:text="@string/birdC3"
        app:layout_constraintBottom_toTopOf="@+id/guideline9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline8" />


    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_marginEnd="36dp"
        android:layout_marginBottom="72dp"
        android:text="@string/birdC3"
        app:layout_constraintBottom_toTopOf="@+id/button5"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="36dp"
        android:layout_marginBottom="76dp"
        android:text="@string/birdC3"
        app:layout_constraintBottom_toTopOf="@+id/button6"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="36dp"
        android:layout_marginBottom="8dp"
        android:text="@string/birdC3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

試したこと

ボタンごとの制約を変更してみたりと試していますが、思うような動作がされません。

デザインにあたり作成時の注意点等、ご教示いただけますと幸いでございます。
よろしくお願いいたします。

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

回答3件

Buttonをただ並べているように見えますが、LinearLayoutや、ScrollViewなどで囲っているわけではないのですか？

↓

https://akira-watson.com/android/scrollview.html

投稿2019/08/08 00:12

azuapricot

総合スコア2341

ken-kenny

2019/08/08 12:17

はい、ご指摘のとおり囲っているわけではありません。目的としては、AndroidStudioのプレビュー領域と、エミュレータや実機での表示領域を同一にすることです。最下部のボタンがプレビューでは表示領域内に収まっていますが、エミュレータにて確認すると最下部のボタンが押せない状態にて反映されてしまうことを解決したいです。制約のポイントがあればご教示いただけると幸甚です。

jun74

2019/08/09 14:35

目的が間違っていると考えます。 Androidは様々な画面サイズの端末があるので、LinearLayoutや、ScrollViewなどを利用して画面に収まらない場合はスクロールするように設計すべきです。

ken-kenny

2019/08/09 14:59

ご指摘ありがとうございます。ではスクロールはさせずに設計を考えるにあたり、ヒントとなるキーワードがあればご教示いただけると幸いです。

jun74

2019/08/09 15:08

今のまま、6分類しかないのであれば、LinearLayoutの縦に並べるものの中に、LinearLayoutの横に並べるものを6分類+タイトル行、表題？を入れるだけでも画面内に収まるかと。。「Android layout」などで検索すれば色々出てきますよ。

ken-kenny

2019/08/11 12:36

早速調べて対応してみます！ご回答ありがとうございました！

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

例えば、簡単なものであればアラームアプリケーションなどであればスクロールを含めずに各デバイスの領域ごとでレスポンシブにサイズが変わるかと思います。

そのようなアプリケーションをデザインする上でのヒントやキーワードをご教示いただけると幸いです。

投稿2019/08/09 15:03

ken-kenny

総合スコア9

s.m_1

2019/08/09 15:12

そのような場合は、ConstraintLayout や RelativeLayout を使うことでレスポンシブにできると思います。また、Android のデザインでは、LinearLayout や RelativeLayout よりも、ConstraintLayout の方がぱパフォーマンスが高いと言われています。前者の場合で複数ネストがある場合でも、ConstraintLayout で組み立てることで、ネストが 1 つで十分ということもあるので、ConstraintLayout を使いこなすことが Android の UI の鍵かなと考えております。（もちろん、時と場合によっては、LinearLayout や RelativeLayout の方が最適、むしろ必須ということもありますが）いずれにせよ、いろいろなビューを作ってみることで Andorid のデザインを学ぶことができるので、まずは気になったアプリの UI を作ってみることをおすすめします。

ken-kenny

2019/08/22 14:17

補足説明ありがとうございました！

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

ベストアンサー

回答させていただきます。

ソースコードを拝見させていただいたところ、ViewGroup は ConstraintLayout を使われていますね。
（ViewGroup とは、レイアウトファイルを作成した際に設定する、一番上にあるビューコンポーネントのことです。例えば、FrameLayout, RelativeLayout, LinearLayout, ConstraintLayout など）

そして、Android においては、ScrollView, NestedScrollView, RecyclerView, ListView などのスクロール機能が実装されているビュー以外は、スクロールすることができません。

なので、プレビューではスクリーン内に収まっていたボタンでも、エミュレータで画面からはみ出してしまうと、一番下のボタンはクリックできないという現象が起きてしまいます。

そこで、ScrollView の出番です。

ConstraintLayout の親ビューに ScrollView を追加してあげると、その子ビューはスクロール可能になります。

最終的なビュー構成は以下のようになるかと思います。

xml
1<ScrollView>
2  <ConstraintLayout>
3    <Button>
4    <Button>
5    <Button>
6    <Button>
7    <Button>
8    <Button>
9  </ConstraintLayout>
10</ScrollView>