AndroidでButtonを並べる時の注意点

知恵袋でボタンを並べる時に4つ以上並べるとAndroidStudioでは表示されないという何とも信じがたい質問を頂きましたのでそのことをメモします。

嘘を言っているわけではなく、本当にこうなってしまいます。

button.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:gravity="bottom">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button2" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button3" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button4" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button5" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button6" />
    </LinearLayout>

</LinearLayout>

６個Buttonを書いているのに表示されません。
実行しても機種によっては表示されたりされなかったりするはずです。
※画面サイズの問題です。

そういう問題を解決するには
layout_weight というオプションをButtonに追加します。

layout_weightの説明
https://developer.android.com/guide/topics/ui/layout/linear.html

layout_weightはButtonの幅の比率を表します。
今回のようにButtonが6個あり、なおかつButtonの比率を同じにしたい場合は
1 : 1 : 1 : 1 : 1 : 1になればいいわけですので、layout_weight = "1"と全てのボタンに書きます。

そして、android:layout_width="0dp"というような設定も6個全てのボタンに書きます。
これはlayout_weightでボタンの比率を設定しているのでlayout_widthがwrap_contentだと余計な処理をしてしまったり、予期せぬ表示になってしまうことがあるそうです。

button2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--横に配置するための入れ物(LinearLayout orientation:horizontal）!-->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom">
        <!--各ボタンにandroid:layout_weight="0dp"を指定する!-->
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button"
            android:layout_weight="1" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button2"
            android:layout_weight="1" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button3"
            android:layout_weight="1" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button4"
            android:layout_weight="1" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button5"
            android:layout_weight="1" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button6"
            android:layout_weight="1" />
    </LinearLayout>

</LinearLayout>

このように綺麗に表示されました。