Android layout_width & layout_height, how it works?

Question

I am trying to create an interface, where two or more buttons will be displayed to the user, if a button is clicked, some Layouts will be displayed to him. I am using the SlidingDrawer for this purpose.

Well, i am confused by layout_width & layout_height properties.

If i set the properties like below only the "Handle 1" is shown on the screen.

android:layout_width="fill_parent" android:layout_height="wrap_content"

Honestly saying, i don't have enough knowledge about both of these properties. Can someone please share his knowledge about them?

main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <SlidingDrawer android:id="@+id/slidingDrawer1"
            android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:handle="@+id/handle1"
            android:content="@+id/content1">
                <Button android:text="Handle 1" android:layout_height="wrap_content"
                        android:layout_width="fill_parent" android:id="@+id/handle1"></Button>
                <LinearLayout android:id="@+id/content1"
                        android:layout_width="fill_parent" android:layout_height="wrap_content"
                        android:orientation="vertical" android:gravity="center"
                        android:background="#FF444444">
                        <Button android:text="Handle 1 Item 1" android:layout_height="wrap_content"
                                android:layout_width="wrap_content" android:id="@+id/item1"></Button>
                </LinearLayout>
    </SlidingDrawer>

    <SlidingDrawer android:id="@+id/slidingDrawer2"
            android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:handle="@+id/handle2"
            android:content="@+id/content2">
                <Button android:text="Handle 2" android:layout_height="wrap_content"
                        android:layout_width="fill_parent" android:id="@+id/handle2"></Button>
                <LinearLayout android:id="@+id/content2"
                        android:layout_width="fill_parent" android:layout_height="wrap_content"
                        android:orientation="vertical" android:gravity="center"
                        android:background="#FF444444">
                        <Button android:text="Handle 2 Item 1" android:layout_height="wrap_content"
                                android:layout_width="wrap_content" android:id="@+id/item2"></Button>
                </LinearLayout>
    </SlidingDrawer>     
</LinearLayout>

Answer 1

The layout_width and layout_height properties of a view are intended to be used by its parent container. Some containers ignore one or both of these; most honor them. You need to consult the documentation of the container (in your case, SlidingDrawer) to understand how the values will be used.

You don't show the complete main.xml, so it's hard to say exactly what's going wrong. It would also help if you posted an image of what's wrong.

EDIT

After seeing your complete layout, I think that the basic problem here is that you are using a LinearLayout to contain the SlidingDrawers. As the docs for SlidingDrawer note, they need to be in either a FrameLayout or a RelativeLayout (actually, any container that allows multiple views to sit on top of one another).

Another possibility is that the second SlidingDrawer is being placed directly under the first one. Try changing the size of the second button (e.g., make the text longer) and see if it pokes out on either side of button 1.

Answer 2

fill_parent = match_parent, and it means that it takes the width or height (which ever property it is being specified as) of the "parent" container

wrap_content means that the height or width takes on the height or width of the "child"

You want to use weights instead of using match_parent or wrap_content typically.

When you do use weights you want to set the width to 0dp.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >

    <LinearLayout
    android:id="@+id/lowerLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="1.0" >
            <LinearLayout
            android:id="@+id/headerLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_weight=".7" >
                <Button
                    android:id="@+id/previousMonthButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Previous" />

                <TextView
                    android:id="@+id/monthName"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:text="Large Text"
                    android:layout_weight="1"
                    android:textAppearance="?android:attr/textAppearanceLarge" android:gravity="center_horizontal" />

                <Button
                    android:id="@+id/nextMonthButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Next" />

            </LinearLayout>

            <LinearLayout
            android:id="@+id/lowerLayout3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_weight=".3" >

                <Button
                    android:id="@+id/addEvent"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

            </LinearLayout>

    </LinearLayout>
    <LinearLayout
    android:id="@+id/lowerLayout2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="1.0" >

        <LinearLayout
            android:id="@+id/monthView"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_weight=".7" >

        </LinearLayout>

        <ListView
            android:id="@+id/listView1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".3" >
        </ListView>
    </LinearLayout>

</LinearLayout>