Android Studio how to make 2 columns of LinearLayout

Question

I am already very new to Android App Development, and I am trying to achieve the next button layout in Android Studio.

[

I am trying to use Linear Layout, but I could not figure it out.

<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 that if I add another button to the linear layout, then they simply flatten together, rather than adding the button to the next line.

Can someone please show me that my LinearLayout has only 2 widgets on each row or provides another fix.

Any help would be greatly appreciated :-)

Answer 1

LinearLayout is great for what you are trying to achieve. Look at the weight and orientation attributes of the 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 be careful, because nesting too many weight attributes can have some negative performance issues.

Answer 2

Ok guys, I managed to find a fix thanks to Vishwa's comment. However, I really did not find a way to make LinearLayout have 2 columns.

Instead, I switched to TableLayout and split columns 0 and 1 to display the entire screen. This is how my XML ended the search. (He has extra things 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> 

Answer 3

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