How can i create a grid of buttons with a textview below

Question

Hi,

I want to create a screen like I've (tried to) drawn above. A,b,c,d,e,f,g and h are buttons, and p is a EditText.

Now what I want to accomplish is that when deployed on a larger or smaller screen, or rotated, the following will happen:

• element 'p' stays the same height but sizes horizontally (gets wider/smaller)
• elements a-h (the buttons) all size horizontally and vertically. So when the screen gets twice as wide, the buttons are two times wider, and when it's twice as high, the buttons are twice as high.

I've been able to create one row of buttons to size horizontally (with a lineairlayout and a android:layout_weight, but I am not getting any further.

Answer 1

Try it out,hope it works:

<?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="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal" >

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

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

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

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

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

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

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

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

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

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

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

    <EditText
        android:layout_width="match_parent"
        android:layout_height="50dp" />

</LinearLayout>

Answer 2

// try this
<?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:padding="5dp"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="a"
                android:layout_weight="1"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:text="b"
                android:layout_weight="1"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_marginTop="5dp"
            android:layout_weight="1"
            android:layout_height="0dp">

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="c"
                android:layout_weight="1"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:text="d"
                android:layout_weight="1"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_marginTop="5dp"
            android:layout_weight="1"
            android:layout_height="0dp">

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="e"
                android:layout_weight="1"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:text="f"
                android:layout_weight="1"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_marginTop="5dp"
            android:layout_weight="1"
            android:layout_height="0dp">

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="g"
                android:layout_weight="1"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:text="h"
                android:layout_weight="1"/>
        </LinearLayout>
    </LinearLayout>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:hint="p"/>
</LinearLayout>

Answer 3

One quick solution is to make use of nested layouts and nested weights. An example of this could be:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

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

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

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

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

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

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

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

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

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

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

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

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

However, nested weights aren't recommended as they are computationally heavy. An alternative (superior) layout could be based on relative layouts to replace nested LinearLayouts and their weights. A hidden center component is used to split the relative layout in two. An example of this is posted below:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

       <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <!--  Hidden center view used to split relative layout in half -->
        <View
            android:id="@+id/hiddenView1"  
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_centerInParent="true"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@id/hiddenView1" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/hiddenView1" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >
    <!--  Hidden center view used to split relative layout in half -->
        <View
            android:id="@+id/hiddenView2"  
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_centerInParent="true"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@id/hiddenView2" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/hiddenView2" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >
    <!--  Hidden center view used to split relative layout in half -->
        <View
            android:id="@+id/hiddenView3"  
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_centerInParent="true"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@id/hiddenView3" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/hiddenView3" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >
    <!--  Hidden center view used to split relative layout in half -->
        <View
            android:id="@+id/hiddenView4"  
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_centerInParent="true"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@id/hiddenView4" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/hiddenView4" />
    </RelativeLayout>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout> 

The solution using RelativeLayout was inspired by the answer from DeeV in this SO question: Making two LinearLayouts have 50% of the screen each without using layout_weight

If you want to avoid the soft keyboard from showing when the layouts are inflated you can do the following to your parent LinearLayout:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:focusableInTouchMode="true">

Answer 4

Here's a solution that will work:

Set the EditText height as you wish.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

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

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

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

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

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

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

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

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

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

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

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

    <EditText
        android:layout_width="match_parent"
        android:layout_height="40dp" />

</LinearLayout>