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!! 🙂
Sreekumar (KJ) has been a hobby programmer from school days. Codemarvels is his personal blog from the year 2010, where he writes about technology, philosophy, society and a bit about physics.
He now runs a conversational AI company – DheeYantra – focusing his efforts to help businesses improve operational efficiency using digital employees powered by AI.