Laying out 2 rows of 3 buttons in SlidingDrawer

Question

this is my fifth day of Android development so be gentle!

I am trying to place two rows of three buttons into my SlidingDrawer, this is what I have so far but I can't understand why the second row of buttons are not visible?

<SlidingDrawer
    android:id="@+id/SlidingDrawer"
    android:layout_width="fill_parent"
    android:layout_height="200dip"
    android:content="@+id/drawerButtons"
    android:handle="@+id/slideHandleButton" >

    <Button
        android:id="@+id/slideHandleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/closearrow" />

    <RelativeLayout
        android:id="@+id/drawerButtons"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#80000000" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/Button01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Test1" >
            </Button>

            <Button
                android:id="@+id/Button02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Test2" >
            </Button>

            <Button
                android:id="@+id/Button03"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Test3" >
            </Button>
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/Button04"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Test4" >
            </Button>

            <Button
                android:id="@+id/Button05"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Test5" >
            </Button>

            <Button
                android:id="@+id/Button06"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Test6" >
            </Button>
        </LinearLayout>
    </RelativeLayout>

</SlidingDrawer>

The first row of buttons displays as expected but I don't see the second row? Just empty space.

Any help appreciated

score 2 · Accepted Answer · answered Sep 14 '12 at 13:32

2

You have dropped both LinearLayouts inside a RelativeLayout without giving the layout any hints how it should place its elements. Therefore by default both LinearLayouts will be rendered on top of each other at (0,0) inside the RelativeLayout.

One solution would be to give the top LinearLayout an id

android:id="@+id/topRow"

And then give the LinearLayout a hint where to place itself inside the RelativeLayout

android:layout_below="@id/topRow"

In addition to that you have to set layout_height of both LinearLayouts to wrap_content. Otherwise the first LinearLayout still fills the whole RelativeLayout and the other one is placed below outside of the screen.

Other solutions: Wrap the LinearLayouts inside a LinearLayout with orientation vertical or use a GridLayout (>= API level 14). You could also try to reduce the view tree and use just one RelativeLayout and use layout_below, layout_leftOf, ... to place the elements inside the layout.

answered Sep 14 '12 at 13:32

pocmo

660
6
24

Thanks for this pocmo! I just assumed that when you placed two LinearLayouts in a another layout component they would be stacked one after the other. I will play around with using just the RelativeLayout as you suggested. – Adrian Sep 14 '12 at 13:55
One other quick question regarding this layout, I now see both rows of buttons but there is a blank area at the bottom of my SlidingDrawer. Why isn't the RelativeLayout filling the container? – Adrian Sep 14 '12 at 13:59
The RelativeLayout is filling the container but there's nothing more in it to show? Try to give the different layouts different background colors (e.g. android:background="#ff0000" for red) and it's easier to see what happens. What is the behavior you expect? The buttons' height filling the whole space? – pocmo Sep 14 '12 at 14:05
Yes, I wanted the two LinearLayouts to fill the RelativeLayout equally so that all six buttons take up the entire SlidingDrawer area, am I going to have to nest the LinearLayouts again to achieve this? – Adrian Sep 14 '12 at 14:13

score 0 · Answer 2 · answered Sep 14 '12 at 13:36

try this below code : 

<LinearLayout
     android:layout_width="fill_parent"
     android:id="@+id/drawerButtons"
     android:orientation="vertical"
     <LinearLayout>
        // your buttons
     </LinearLayout>
     <LinearLayout>
        // your buttons
     </LinearLayout>
</LinearLayout>

Laying out 2 rows of 3 buttons in SlidingDrawer

2 Answers2