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

In the first part, I showed you how to use a basic Sliding Drawer in Android. In this post I’ll show you how to make your Sliding Drawers fancier by changing the handle image when the Sliding Drawers is open and when it is closed. The complete source code is at the bottom.

  • Save the two images from here and here. Name them help_handle_open and help_handle_close respectively.
  • Navigate to <yourprojectname> -> res -> drawable-ldpi/mdpi/hdpi/xhdpi/xxhdpi.
  • Right click and select New -> Android XML file. Choose selector from the Root Element list. Name the xml file help_handle_customizer.
  • Paste the following code in it.
    [xml]
    <selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
    android:state_pressed="true"
    android:drawable="@drawable/help_handle_open" />
    <item
    android:state_focused="true"
    android:drawable="@drawable/help_handle_close" />
    <item
    android:drawable="@drawable/help_handle_open" />
    </selector>
    [/xml]
  • In the ImageView which you have for your SlidingDrawer Handle change the @android:src attribute value to @drawable/help_handle_customizer.

Now, when you run it on the emulator or an actual device, you can see the handle images changing based on whether the Sliding Drawer is open or close.

COMPLETE SOURCE CODE

activity_main.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]

Leave a Comment

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