Android Studio how to make a 2 column LinearLayout

android xml android-studio android-linearlayout

20,913

Solution 1

LinearLayout is fine for what you are trying to achieve. Please look at the weight and orientation attributes of a LinearLayout object. Linear Layout

And what you want, you can do for example like this:

<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:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center">

        <TextView
            android:text="Whatever You Want Here"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textSize="36sp"/>
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center">

            <Button
                android:text="Button 1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"/>

            <Button
                android:text="Button 2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"/>
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center">

            <Button
                android:text="Button 3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"/>

            <Button
                android:text="Button 4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"/>
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center">

            <Button
                android:text="Button 5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"/>

            <Button
                android:text="Button 6"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"/>
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center">

            <Button
                android:text="Button 7"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"/>

            <Button
                android:text="Button 8"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Output:

And watch out, because nesting too many weight attributes may have some negative performance issues.

Solution 2

Alright guys, I managed to find a fix thanks to Vishwa's comment. However, I didn't actually find a way to make a LinearLayout have 2 columns.

Instead, I changed to a TableLayout and streched the colums 0 & 1 to take the whole screen. Heres how my XML ended up looking. (It has extra stuff in it to get my design)

<TableLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:stretchColumns="0,1">

    <TableRow
        android:layout_width="match_parent"
        android:paddingBottom="8dp"
        android:layout_height="match_parent">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Events"
            android:id="@+id/eventButton"
            android:layout_column="0"
            android:background="#016eff"
            android:layout_marginRight="8dp"
            android:textColor="#ffffff"
            android:textStyle="normal"
            android:textSize="40px" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Absentee"
            android:id="@+id/absenteeButton"
            android:layout_column="1"
            android:background="#016eff"
            android:textColor="#ffffff"
            android:textStyle="normal"
            android:textSize="40px" />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:paddingBottom="8dp"
        android:layout_height="match_parent" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Contacts"
            android:id="@+id/contactsButton"
            android:layout_column="0"
            android:background="#016eff"
            android:layout_marginRight="8dp"
            android:textColor="#ffffff"
            android:textStyle="normal"
            android:textSize="40px" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Alerts"
            android:id="@+id/alertButton"
            android:layout_column="1"
            android:background="#016eff"
            android:textColor="#ffffff"
            android:textStyle="normal"
            android:textSize="40px" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:paddingBottom="8dp"
        android:layout_height="match_parent" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Links"
            android:id="@+id/linksButton"
            android:layout_column="0"
            android:background="#016eff"
            android:layout_marginRight="8dp"
            android:textColor="#ffffff"
            android:textStyle="normal"
            android:textSize="40px" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Newsletter"
            android:id="@+id/newsletterButton"
            android:layout_column="1"
            android:background="#016eff"
            android:textColor="#ffffff"
            android:textSize="40px"
            android:textStyle="normal" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:paddingBottom="8dp"
        android:layout_height="match_parent" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Kamar"
            android:id="@+id/kamarButton"
            android:layout_column="0"
            android:background="#016eff"
            android:layout_marginRight="8dp"
            android:textColor="#ffffff"
            android:textStyle="normal"
            android:textSize="40px" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="News"
            android:id="@+id/newsButton"
            android:layout_column="1"
            android:background="#016eff"
            android:textColor="#ffffff"
            android:textSize="40px"
            android:textStyle="normal" />
    </TableRow>

</TableLayout>

Solution 3

You just put a separate LinearLayout with android:orientation="horizontal" around each pair of buttons. Then the parent LinearLayaout should have android:orientation="vertical" and the weightsum should be in each horizontal LinearLayout.

20,913

Author by

Jonty Morris

Updated on July 25, 2022

Comments

Jonty Morris almost 2 years

I'm very new to Android App Development, and am trying to achieve the following button layout in Android Studio.

[ App design[1]

Ive been trying to use a Linear Layout, but I couldn't get it right.

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:weightSum="1">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:background="#016eff"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_margin="10dp"
        android:textColor="#ffffff"
        android:layout_weight="0.48" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button2"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:background="#016eff"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_margin="10dp"
        android:textColor="#ffffff"
        android:layout_weight="0.48" />
</LinearLayout>

The problem with this is, if I added another button to the Linear Layout, then they just get squished together, instead of adding the button to the next row.

Can someone please show me to make my LinearLayout only have 2 widgets on each row, or provide another fix.

Any help will be much appreciated thanks :-)

Jonty Morris about 8 years

Thanks for the help, its good to have multi solutions to a problem.
Christine about 8 years

I find using nested LinearLayouts gives you more flexibility than a TableLayout, like when you need one row of buttons to line out differently, or to have one line with a different number of layouts.