LinearLayoutとRelativeLayoutの使い方をまとめてみた

Androidアプリで画面を作成する際、LinearLayoutとRelativeLayoutの使い方をしっかり把握しておかないと、後々苦労することが多いと思いますので、レイアウト構成を自分の知る範囲でまとめてみました。

LinearLayoutの場合

1 均等に配置

XML

2 余った幅全体に配置

XML

3 真ん中で２等分

XML

4 上記の縦バージョン

XML

RelativiLayoutの場合

5 両端固定幅、真ん中は幅いっぱい

XML

6 上記のレイアウトに追従する形で配置

XML

7 上下に両端、真ん中配置のボタンを配置

XML

8 上記レイアウトの空白を埋める配置(ListView等)

XML

9 上記レイアウト中央の両端に、ボタンを配置

XML

10 相互に作用する配置

XML

LinearLayoutとRelativiLayoutを複合

11 ボタンの高さを任意のレイアウトの高さに合わせる

XML

12 上記レイアウトを真ん中で２等分した配置

XML

XML

1

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_weight="1">
    </Button>
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_weight="1">
    </Button>
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_weight="1">
    </Button>
</LinearLayout>

2

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_weight="1">
    </Button>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button">
    </Button>
</LinearLayout>

3

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:layout_weight="1">
        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/button"
            android:layout_weight="1">
        </Button>
    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:layout_weight="1">
        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/button"
            android:layout_weight="1">
        </Button>
        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/button"
            android:layout_weight="1">
        </Button>
    </LinearLayout>
</LinearLayout>

4

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:layout_weight="1">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="@string/button"
            android:layout_weight="1">
        </Button>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:layout_weight="1">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="@string/button"
            android:layout_weight="1">
        </Button>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="@string/button"
            android:layout_weight="1">
        </Button>
    </LinearLayout>
</LinearLayout>

5

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true">
    </Button>
    <Button
        android:id="@+id/btn2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/btn3"
        android:layout_toRightOf="@+id/btn1">
    </Button>
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true">
    </Button>
</RelativeLayout>

6

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true">
    </Button>
    <Button
        android:id="@+id/btn2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/btn3"
        android:layout_toRightOf="@+id/btn1">
    </Button>
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true">
    </Button>
    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/btn2"
        android:layout_toLeftOf="@+id/btn2">
    </Button>
    <Button
        android:id="@+id/btn5"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_below="@+id/btn2"
        android:layout_toLeftOf="@+id/btn6"
        android:layout_toRightOf="@+id/btn4">
    </Button>
    <Button
        android:id="@+id/btn6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/btn2"
        android:layout_toRightOf="@+id/btn2">
    </Button>
</RelativeLayout>

7

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true">
    </Button>
    <Button
        android:id="@+id/btn2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/btn3"
        android:layout_toRightOf="@+id/btn1">
    </Button>
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true">
    </Button>


    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true">
    </Button>
    <Button
        android:id="@+id/btn5"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/btn6"
        android:layout_toRightOf="@+id/btn4">
    </Button>
    <Button
        android:id="@+id/btn6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true">
    </Button>
</RelativeLayout>

8

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true">
    </Button>
    <Button
        android:id="@+id/btn2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/btn3"
        android:layout_toRightOf="@+id/btn1">
    </Button>
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true">
    </Button>
    
    <Button
        android:id="@+id/btn7"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="@string/button"
        android:layout_below="@+id/btn2"
        android:layout_above="@+id/btn5">
    </Button>
    
    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true">
    </Button>
    <Button
        android:id="@+id/btn5"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/btn6"
        android:layout_toRightOf="@+id/btn4">
    </Button>
    <Button
        android:id="@+id/btn6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true">
    </Button>
</RelativeLayout>

9

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true">
    </Button>
    <Button
        android:id="@+id/btn2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/btn3"
        android:layout_toRightOf="@+id/btn1">
    </Button>
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true">
    </Button>
    
    <Button
        android:id="@+id/btn7"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="@string/button"
        android:layout_below="@+id/btn2"
        android:layout_above="@+id/btn5"
        android:layout_toLeftOf="@+id/btn2">
    </Button>
    <Button
        android:id="@+id/btn8"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="@string/button"
        android:layout_below="@+id/btn2"
        android:layout_above="@+id/btn5"
        android:layout_toLeftOf="@+id/btn9"
        android:layout_toRightOf="@+id/btn7">
    </Button>
    <Button
        android:id="@+id/btn9"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="@string/button"
        android:layout_below="@+id/btn2"
        android:layout_above="@+id/btn5"
        android:layout_toRightOf="@+id/btn2">
    </Button>
    
    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true">
    </Button>
    <Button
        android:id="@+id/btn5"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/btn6"
        android:layout_toRightOf="@+id/btn4">
    </Button>
    <Button
        android:id="@+id/btn6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true">
    </Button>
</RelativeLayout>

10

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:id="@+id/btn1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/btn2">
    </Button>
    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:text="@string/button"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_above="@+id/btn3">
    </Button>
    <Button
        android:id="@+id/btn3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@+id/btn4">
    </Button>
    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:text="@string/button"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/btn1">
    </Button>
    <Button
        android:id="@+id/btn5"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="@string/button"
        android:layout_below="@+id/btn1"
        android:layout_above="@+id/btn3"
        android:layout_toRightOf="@+id/btn4"
        android:layout_toLeftOf="@+id/btn2">
    </Button>
</RelativeLayout>

11

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:id="@+id/LayoutLeft"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/LayoutRight"
        android:orientation="vertical">
        <Button
            android:id="@+id/btn1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/button">
        </Button>
        <Button
            android:id="@+id/btn2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/button">
        </Button>
    </LinearLayout>
    
    <LinearLayout
        android:id="@+id/LayoutRight"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:layout_above="@+id/LayoutDumy">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="@string/button">
        </Button>
    </LinearLayout>
    
    <LinearLayout
        android:id="@+id/LayoutDumy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/LayoutLeft">
    </LinearLayout>
</RelativeLayout>

12

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:id="@+id/LayoutLeft"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/LayoutDumy2"
        android:orientation="vertical">
        <Button
            android:id="@+id/btn1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/button">
        </Button>
        <Button
            android:id="@+id/btn2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/button">
        </Button>
    </LinearLayout>
    
    <LinearLayout
        android:id="@+id/LayoutRight"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:orientation="horizontal"
        android:layout_toRightOf="@+id/LayoutDumy2"
        android:layout_above="@+id/LayoutDumy1">
        <Button
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="@string/button"
            android:layout_weight="1">
        </Button>
        <Button
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="@string/button"
            android:layout_weight="1">
        </Button>
        <Button
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:text="@string/button"
            android:layout_weight="1">
        </Button>
    </LinearLayout>
    
    <LinearLayout
        android:id="@+id/LayoutDumy1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/LayoutLeft">
    </LinearLayout>
    <LinearLayout
        android:id="@+id/LayoutDumy2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true">
    </LinearLayout>
</RelativeLayout>