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

This entry is part 45 of 50 in the series Android Development Primer

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.

sd_close         open

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!! 🙂

Series Navigation<< Time Picker in AndroidAndroid development primer: Working with Sliding Drawers in Android – Part II >>

Leave a Reply

Your email address will not be published. Required fields are marked *

*

* Copy This Password *

* Type Or Paste Password Here *

41,650 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>