2x2 Button Grid Layout

Im trying to create a layout containing a 2x2 grid of buttons (4 total). Ive got the following however it only creates the button grid in the top left. I want the button grid to fi

Solution 1:

Try this code.

<?xml version="1.0" encoding="utf-8"?><TableLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/tableLayout1"android:layout_width="match_parent"android:layout_height="match_parent" ><TableRowandroid:id="@+id/tableRow1"android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1" ><Buttonandroid:id="@+id/button1"android:layout_width="0dp"android:layout_height="fill_parent"android:layout_weight="1" /><Buttonandroid:id="@+id/button1"android:layout_width="0dp"android:layout_height="fill_parent"android:layout_weight="1" /></TableRow><TableRowandroid:id="@+id/tableRow1"android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1" ><Buttonandroid:id="@+id/button1"android:layout_width="0dp"android:layout_height="fill_parent"android:layout_weight="1" /><Buttonandroid:id="@+id/button1"android:layout_width="0dp"android:layout_height="fill_parent"android:layout_weight="1" /></TableRow></TableLayout>

you should use weight for buttons

Solution 2:

I suggest you use a simple RelativeLayout without getting into the hassle of using weights (either with LinearLayout, TableLayout or a combination of both). Here is a sample layout showing how you can achieve a 2 X 2 grid that covers the entire screen using just a RelativeLayout, thereby making it more efficient and faster.

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent" ><Viewandroid:id="@+id/centerVerticalShim"android:layout_width="match_parent"android:layout_height="0dp"android:layout_centerVertical="true"android:visibility="invisible" /><Viewandroid:id="@+id/centerHorizontalShim"android:layout_width="0dp"android:layout_height="match_parent"android:layout_centerHorizontal="true"android:visibility="invisible" /><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@+id/centerVerticalShim"android:layout_alignParentLeft="true"android:layout_alignParentTop="true"android:layout_toLeftOf="@+id/centerHorizontalShim"android:background="#42A5F5"android:gravity="center"android:text="@string/one"android:textColor="#FFFFFF" ></TextView><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@+id/centerVerticalShim"android:layout_alignParentRight="true"android:layout_alignParentTop="true"android:layout_toRightOf="@+id/centerHorizontalShim"android:background="#EF5350"android:gravity="center"android:text="@string/two"android:textColor="#FFFFFF" ></TextView><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_alignParentBottom="true"android:layout_alignParentLeft="true"android:layout_below="@+id/centerVerticalShim"android:layout_toLeftOf="@+id/centerHorizontalShim"android:background="#66BB6A"android:gravity="center"android:text="@string/three"android:textColor="#FFFFFF" ></TextView><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"android:layout_below="@+id/centerVerticalShim"android:layout_toRightOf="@+id/centerHorizontalShim"android:background="#5C6BC0"android:gravity="center"android:text="@string/four"android:textColor="#FFFFFF" ></TextView></RelativeLayout>

The above layout results in this:

Solution 3:

I hope that this is what u are looking for:

<TableLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/tableLayout1"android:layout_width="fill_parent"android:layout_height="fill_parent"android:stretchColumns="*" ><TableRowandroid:id="@+id/tableRow1"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1" ><Buttonandroid:id="@+id/button1"android:layout_width="fill_parent"android:layout_height="fill_parent" /><Buttonandroid:id="@+id/button2"android:layout_width="fill_parent"android:layout_height="fill_parent" /></TableRow><TableRowandroid:id="@+id/tableRow2"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1" ><Buttonandroid:id="@+id/button3"android:layout_width="fill_parent"android:layout_height="fill_parent" /><Buttonandroid:id="@+id/button4"android:layout_width="fill_parent"android:layout_height="fill_parent" /></TableRow></TableLayout>

Solution 4:

There is one more way. Try this!!

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"><GridLayoutandroid:id="@+id/gridLayout"android:layout_width="match_parent"android:layout_height="match_parent"android:columnCount="2"android:rowCount="2"><Buttonandroid:id="@+id/button1"android:layout_gravity="fill"android:layout_rowWeight="1"android:layout_columnWeight="1"android:text="Button 1" /><Buttonandroid:id="@+id/button2"android:layout_gravity="fill"android:layout_rowWeight="1"android:layout_columnWeight="1"android:text="Button 2" /><Buttonandroid:id="@+id/button3"android:layout_gravity="fill"android:layout_rowWeight="1"android:layout_columnWeight="1"android:text="Button 3" /><Buttonandroid:id="@+id/button4"android:layout_gravity="fill"android:layout_rowWeight="1"android:layout_columnWeight="1"android:text="Button 4" /></GridLayout></android.support.constraint.ConstraintLayout>