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 line but the button should fit the size of the screen filling the latter. how can I proceed?

<?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:weightSum="2" >

    <Button
        android:layout_width="0dip"
                android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/conv_up" />

    <Button
        android:layout_width="0dip"
                android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/conv_up"
         />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
        android:layout_height="0dip"
    android:orientation="horizontal"
    android:weightSum="2" >

    <Button
        android:layout_width="0dip"
                android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/conv_up"
        />

    <Button
        android:layout_width="0dip"
                android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/conv_up"
         />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
        android:layout_height="0dip"
    android:orientation="horizontal"
    android:weightSum="2" >

    <Button
        android:layout_width="0dip"
                android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/conv_up"
         />

    <Button
        android:layout_width="0dip"
                android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/conv_up"
        />

</LinearLayout>

Ossify

Put what you see now, and what you expect. Else it will be difficult to answer. – Stepp

I can not see anything because this code gives me this error: "Suspicious size: this will make the view invisible, should be used with layout_weight" on LinearLayout android:layout_height="0dip" – Ossify

The issue was due to the missing android:layout_weight="1" property from the three LinearLayout children. I've posted a full XML in my answer. – Ruysdael

Is GridLayout a solution? – Analysand

Answer 1

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:

Ruysdael

I edited my question with the xml code. But with this code I have problems with the display of buttons that are not displayed correctly on the screen – Ossify

android:layout_width="0dip" is what you need for all widths of those Buttons. – Ruysdael

You didn't change the Buttons though, but the LinearLayouts. – Ruysdael

Update answer with the heights and widths you need. – Ruysdael

I have this error "Suspicious size: this will make the view invisible, should be used with layout_weight" on LinearLayout android:layout_height="0dip" – Ossify

You were missing android:layout_weight="1" from the three LinearLayout children. I've posted full XML and result. Good luck! – Ruysdael

Answer 2

I think you should take a look at GridView

Japan

Windows tiles have split cells too, how will GridView help ? – Stepp

Answer 3

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>

Burstone

Answer 4

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>

Corsage