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

Answer 1

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.