How to create layout with 6 buttons like windows tiles

Question

I\'m trying to create a layout with 6 buttons that automatically adapt to the screen size as the tiles of windows phone. In the code I create dynamically the 6 button, 2 for

Answer 1

I am using the Android .v7 libraries. This xml worked for me to create the 2 columns, 3 rows layout that fills the entire screen:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/lib/android.support.v7.widget.GridLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:grid="http://schemas.android.com/apk/res-auto"
    android:layout_margin="0.5dp"
    app:columnCount="2"
    app:rowCount="3"
    app:useDefaultMargins="true">

    <Button
        android:id="@+id/b_1"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="0"
        grid:layout_column="0"
        android:text="Hellooo"/>

    <Button
        android:id="@+id/b_2"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="0"
        grid:layout_column="1"
        android:text="Hellooo"/>

    <Button
        android:id="@+id/b_3"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="1"
        grid:layout_column="0"
        android:text="Hellooo"/>

    <Button
        android:id="@+id/b_4"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="1"
        grid:layout_column="1"
        android:text="Hellooo"/>

    <Button
        android:id="@+id/b_5"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="2"
        grid:layout_column="0"
        android:text="Hellooo"/>

    <Button
        android:id="@+id/b_6"
        grid:layout_columnWeight="1"
        grid:layout_rowWeight="1"
        grid:layout_row="2"
        grid:layout_column="1"
        android:text="Hellooo"/>

</android.support.v7.widget.GridLayout>

Answer 2

Use GridLayout! This is perfect for this situation

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="350dp"
    android:layout_margin="0.5dp"
    android:columnCount="2"
    android:rowCount="3" >

    <Button
        android:id="@+id/b_1"
         />

    <Button
        android:id="@+id/b_2"
         />

    <Button
        android:id="@+id/b_3"
         />

    <Button
        android:id="@+id/b_4"
         />

    <Button
        android:id="@+id/b_5"
         />

    <Button
        android:id="@+id/b_6"
        />
</GridLayout>

Answer 3

I think you should take a look at GridView

Answer 4

I'd use a vertical LinearLayout with three rows of same weight as children, each row being a horizontal LinearLayout having two children of same weights, which will make sure the full area is filled. For six buttons performance shouldn't be an issue.

If performance is a concern, you can make the rows as RelativeLayouts and use a strut to split in half and position the two children based on that.

When I say a strut, I mean this:

<View android:id="@+id/strut"
    android:layout_width="0dp"
    android:layout_height="0dp" 
    android:layout_centerHorizontal="true"/>

Update: Since you're trying the LinearLayouts, here's how you can deal with the heights and widths:

The parent LinearLayout can have:

android:layout_width="match_parent"
android:layout_height="match_parent"

The three LinearLayout children will have:

android:layout_width="match_parent"
android:layout_height="0dip"

The Buttons will have:

android:layout_width="0dip"
android:layout_height="match_parent"

As you can notice, we have 0dip for the property that weight is applied on (either on height if parent is vertical oriented, or width if parent is horizontal oriented), which will need to grow to fill in the space.

Here's the full XML (buttons don't include drawables, so feel free to add yours):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:orientation="horizontal"
        android:layout_weight="1" >

        <Button
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <Button
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:orientation="horizontal"
        android:layout_weight="1" >

        <Button
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <Button
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:orientation="horizontal"
        android:layout_weight="1" >

        <Button
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <Button
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>
</LinearLayout>

And the result: