Android Studio how to make a 2 column LinearLayout

Question

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

[

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 :-)

Answer 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.

Answer 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>