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>

Intisar

Have you checked the documentation? It's pretty clear imho. – Lagerkvist

Good question. I was confused about this a few months ago when I first started. Give it a few days, and you will get the hang of it. – Leto

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.

Dichroite

I have provided the complete main.xml, please see my question. – Intisar

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>

Leto

I know this, but look at my provided xml, why it is showing just "Handle 1", if the above rule is applied it should show both the "Handle 1" & "Handle 2". – Intisar

You are filling the parent twice. Try using weights instead of setting the layout width to fill_parent. Also keep in mind that fill_parent is deprecated; use match_parent instead. I have edited my answer so I can show you an example of this. – Leto

Answer 3

I think you trying to add 2 Sliding Drawer.

The size of the SlidingDrawer defines how much space the content will occupy once slid out so SlidingDrawer should usually use match_parent for both its dimensionsin this case one overlap other one so you can't see the handler 2 .

If you set visibility "gone" of first SlidingDrawer you can see the Other one .

Update

Hi ,

Please try this code may it help you

<?xml version="1.0" encoding="utf-8"?>

<SlidingDrawer
    android:id="@+id/slidingDrawer1"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:content="@+id/content1"
    android:handle="@+id/handle1" >

    <Button
        android:id="@+id/handle1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Handle 1" >
    </Button>

    <LinearLayout
        android:id="@+id/content1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FF444444"
        android:gravity="center"
        android:orientation="vertical" >

        <Button
            android:id="@+id/item1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Handle 1 Item 1" >
        </Button>
    </LinearLayout>
</SlidingDrawer>

Gina

yes i want to add more than one sliding drawer, as its clear from my question. If i set the visibility to gone then the first sliding drawer will become invisible. – Intisar