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

Android



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>