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.

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

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

nero

Leave a Comment Cancel reply