Three buttons in line -> resize to fit parent widt

Question

I have this layout

• Linear Layout
  • Scroll View
    • Relative Layout
      • 9x Button

In View like this (3x3 Grid)

+---------+  
| o  o  o |  
| o  o  o |  
| o  o  o |
+---------+

Every button has it's background and no text, background like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_btn1_hover" android:state_pressed="true"/>
    <item android:drawable="@drawable/menu_btn1"/>
</selector>

How should I state the layout, so the buttons will be always 3 per line, and will resize so that they will fit the view ?

Answer 1

This should do the trick if you replace it with your mentioned RelativeLayout. All you need to do is ids and style:

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_weight="1" />
    </LinearLayout>
</LinearLayout>

Answer 2

Try this!

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <LinearLayout android:id="@+id/LinearLayout02" android:layout_height="wrap_content" android:layout_width="match_parent">
        <Button android:id="@+id/Button04" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
        <Button android:id="@+id/Button05" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
        <Button android:id="@+id/Button06" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
    </LinearLayout>
    <LinearLayout android:id="@+id/LinearLayout01" android:layout_height="wrap_content" android:layout_width="match_parent">
        <Button android:id="@+id/Button01" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
        <Button android:id="@+id/Button02" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
        <Button android:id="@+id/Button03" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content"></Button>
    </LinearLayout>
    <LinearLayout android:id="@+id/linearLayout1" android:layout_height="wrap_content" android:layout_width="match_parent">
        <Button android:id="@+id/button1" android:text="Button" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="0dp"></Button>
        <Button android:id="@+id/button2" android:text="Button" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="0dp"></Button>
        <Button android:id="@+id/button3" android:text="Button" android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="0dp"></Button>
    </LinearLayout>

</LinearLayout>

SCREENSHOT:

UPDATE:

If you make LinearLayout (android:id="@+id/wrapper" (LOOK CODE BELOW)) with same layout_height and layout_width you will get what you want

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/wrapper"
        android:layout_width="300dp" android:weightSum="1"
        android:orientation="vertical" android:layout_height="300dp">
        <LinearLayout android:id="@+id/LinearLayout02" android:layout_width="match_parent" android:layout_weight="0.33" android:layout_height="0dp">
            <Button android:id="@+id/Button04" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
            <Button android:id="@+id/Button05" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
            <Button android:id="@+id/Button06" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
        </LinearLayout>
        <LinearLayout android:id="@+id/LinearLayout01" android:layout_width="match_parent" android:layout_weight="0.33" android:layout_height="0dp">
            <Button android:id="@+id/Button01" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
            <Button android:id="@+id/Button02" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
            <Button android:id="@+id/Button03" android:text="Button" android:layout_width="0dp" android:layout_weight="1" android:layout_height="fill_parent"></Button>
        </LinearLayout>
        <LinearLayout android:id="@+id/linearLayout1" android:layout_width="match_parent" android:layout_weight="0.33" android:layout_height="0dp">
            <Button android:id="@+id/button1" android:text="Button" android:layout_weight="1" android:layout_width="0dp" android:layout_height="fill_parent"></Button>
            <Button android:id="@+id/button2" android:text="Button" android:layout_weight="1" android:layout_width="0dp" android:layout_height="fill_parent"></Button>
            <Button android:id="@+id/button3" android:text="Button" android:layout_weight="1" android:layout_width="0dp" android:layout_height="fill_parent"></Button>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Please look at screenshots. In second screenshot the LinearLayout with android:id="@+id/wrapper" have same width and height and equals 300dp

Try it please! Hope it help you!!

Answer 3

You can use a TableLayout that fills the screen and nest it in a ScrollView. Then you can inflate programmatically 3 views in a TableRow and add that to TableLayout, like this you will get 3 views per row. Repeat this 3 times and you got what you asked for.

Note that if you do that programmatically you can change the order of the buttons pretty easy

Good luck, Arkde