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>

Put what you see now, and what you expect. Else it will be difficult to answer. — Siddharth, May 09 '13 at 18:26
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" — bisemanu, May 10 '13 at 08:05
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. — Voicu, May 10 '13 at 16:51

Voicu · Accepted Answer · 2013-05-10T15:57:41.207

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: enter image description here

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 — bisemanu, May 09 '13 at 17:53
`android:layout_width="0dip"` is what you need for all widths of those `Button`s. — Voicu, May 09 '13 at 17:55
You didn't change the `Button`s though, but the `LinearLayout`s. — Voicu, May 09 '13 at 18:03
I have this error "Suspicious size: this will make the view invisible, should be used with layout_weight" on LinearLayout android:layout_height="0dip" — bisemanu, May 10 '13 at 08:00
You were missing `android:layout_weight="1"` from the three `LinearLayout` children. I've posted full XML and result. Good luck! — Voicu, May 10 '13 at 15:58

score 5 · Answer 2 · edited Jun 20 '20 at 09:12

5

I think you should take a look at GridView

edited Jun 20 '20 at 09:12

Community

1
1

answered May 09 '13 at 16:52

Hein

2,675
22
32

Windows tiles have split cells too, how will GridView help ? – Siddharth May 09 '13 at 18:27

score 2 · Answer 3 · answered Sep 16 '14 at 21:42

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>

score 0 · Answer 4 · answered Oct 06 '17 at 20:08

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>

How to create layout with 6 buttons like windows tiles

4 Answers4

Linked