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

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

ただいまの
回答率

87.36%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 599

score 9

前提・実現したいこと

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

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

イメージ説明

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

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

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" />

試したこと

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/09 23:59

    ご指摘ありがとうございます。

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

    キャンセル

  • 2019/08/10 00:08

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

    キャンセル

  • 2019/08/11 21:36

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

    キャンセル

checkベストアンサー

0

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

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

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

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

そこで、ScrollView の出番です。

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

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

<ScrollView>
  <ConstraintLayout>
    <Button>
    <Button>
    <Button>
    <Button>
    <Button>
    <Button>
  </ConstraintLayout>
</ScrollView>

また、参考程度にですが、スクリーンショットによると、似たようなビューが複数あるので、ListView や RecyclerView を利用するともっとシンプルに UI を組み立てることができます。

例えば、発見した鳥の数、鳥の種類、ボタンを一つのレイアウトファイルにまとめることで、そのレイアウトを使いまわすことができます。

参考になれば幸いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/10 00:01

    ビューについて改めて習得していきたいと思います。ありがとうございました。

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/10 00:12

    そのような場合は、ConstraintLayout や RelativeLayout を使うことでレスポンシブにできると思います。

    また、Android のデザインでは、LinearLayout や RelativeLayout よりも、ConstraintLayout の方がぱパフォーマンスが高いと言われています。

    前者の場合で複数ネストがある場合でも、ConstraintLayout で組み立てることで、ネストが 1 つで十分ということもあるので、ConstraintLayout を使いこなすことが Android の UI の鍵かなと考えております。
    (もちろん、時と場合によっては、LinearLayout や RelativeLayout の方が最適、むしろ必須ということもありますが)

    いずれにせよ、いろいろなビューを作ってみることで Andorid のデザインを学ぶことができるので、まずは気になったアプリの UI を作ってみることをおすすめします。

    キャンセル

  • 2019/08/22 23:17

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

    キャンセル

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

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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