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.

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]
<?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>
[/xml]

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

Leave a Comment

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