Android development primer: Working with Sliding Drawers in Android – Part I

You have to agree that the Sliding Drawer feature of Android is a pretty neat and handy tool to add some text – usually directions for use, help or other important details. Here’s what a Sliding Drawer looks like. The bold black lines are where some text will appear.

Remember that a Sliding Drawer option is provided in the Palette in the Graphical Layout tab of any xml under the Composite section. However, I like to use a custom Sliding Drawer. It gives me absolute control over what my Sliding Drawer handle looks like, what orientation is it drawn into, what view I want it to have ( a custom one if needed) etc.

So below I provide a sample source code of how to code a Sliding Drawer into you layout. However, I would strongly recommend trying out the Sliding Drawer element from the Palette first, making a few changes to see how it reflects in the layout and then coming back here to look at the source code. This will help you get familiar with the xml.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="bottom"
    android:background="#D0D0D0"
    android:paddingBottom="0dp">

    <SlidingDrawer
        android:id="@+id/slidingDrawer"
        android:handle="@+id/drawerHandle"
        android:content="@+id/contentLayout"
        android:layout_width="wrap_content"
        android:layout_height="200dip"
        android:orientation="horizontal"
        android:layout_gravity="center_vertical">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/handlerl"
            android:paddingBottom="0dp">

	        <ImageView
	            android:id="@+id/drawerHandle"
	            android:src="@drawable/help_handle_customizer"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:layout_alignParentRight="true" >
        	</ImageView>

        </RelativeLayout>

        <ScrollView
            android:id="@+id/contentLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

        <RelativeLayout
            android:id="@+id/inner"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#B0B0B0">

            <TextView
		        android:id="@+id/helptv1"
		        android:layout_height="wrap_content"
		        android:layout_width="wrap_content"
		        android:text="Your first text goes here."
		        android:paddingTop="5dp"
		        android:paddingBottom="5dp"
		        android:paddingLeft="5dp"
		        android:paddingRight="5dp"
		        android:textColor="#000000">
		    </TextView>

            <TextView
		        android:id="@+id/helptv2"
		        android:layout_height="wrap_content"
		        android:layout_width="wrap_content"
		        android:layout_below="@+id/helptv1"
		        android:text="Your second text goes here."
		        android:paddingTop="5dp"
		        android:paddingBottom="5dp"
		        android:paddingLeft="5dp"
		        android:paddingRight="5dp"
		        android:textColor="#000000">
		    </TextView>

            <TextView
		        android:id="@+id/helptv3"
		        android:layout_height="wrap_content"
		        android:layout_width="wrap_content"
		        android:layout_below="@+id/helptv2"
		        android:text="Your third text goes here."
		        android:paddingTop="5dp"
		        android:paddingBottom="5dp"
		        android:paddingLeft="5dp"
		        android:paddingRight="5dp"
		        android:textColor="#000000">
		    </TextView>

            <TextView
		        android:id="@+id/helptv4"
		        android:layout_height="wrap_content"
		        android:layout_width="wrap_content"
		        android:layout_below="@+id/helptv3"
		        android:text="Your fourth text goes here."
		        android:paddingTop="5dp"
		        android:paddingBottom="5dp"
		        android:paddingLeft="5dp"
		        android:paddingRight="5dp"
		        android:textColor="#000000">
		    </TextView>

        </RelativeLayout>
        </ScrollView>

    </SlidingDrawer>
</FrameLayout>

There are a few things worth noting here :-

I have used a frame layout rather than Linear/Relative Layout. I particularly am much more comfortable with it while working with Sliding Drawers. You can read about Frame Layouts here.
The Sliding Drawer has attributes namely – android:handle and android:content. Notice that an ImageView is present that has the same id as the value for android:handle and a ScrollView with the same id as the value of android:content.
The android:handle attribute defines the handle of your sliding drawer.
The android:content attribute defines what your Sliding Drawer holds.
Notice that the ImageView which is the handle of the Sliding Drawer has an src attribute of @drawable/help_handle. Recollect from my earlier posts, to use an icon you must paste it in the drawable-ldpi/mdpi/hdpi/xhdpi/xxhdpi folder. I have an image by the name help_handle.png in my drawable folder.
Remember that this sort of reference is done in the xml. If you choose to refer to it from your Java code you must use R.drawable.<youriconname>.
Notice that the Sliding Drawer has a different handle (Image that works as a handle) when it is closed than from what it has when it is open. If you use the code I provided you with, you will not see this happening. I will discuss how to do it in detail in a later post. For now you can use the image here. Paste it in <eclipseworkspace>/<yourprojectname>/res/drawable-ldpi/mdpi/hdpi/xhdpi/xxhdpi.

Code it. Execute it on the emulator. Once it runs properly, start experimenting!! 🙂

nero

Leave a Comment Cancel reply