Android SlidingDrawer – Top Down Style


Customizing components can be fun! ….and sometimes annoying when a component’s default behavior is not what you expect or even not equiped to do what you want. Recently had a project, where the SlidingDrawer component was supposed to animate/transition from the Top -> Down. Yah, realized its a sought after feature…(I’m so lame!..ahahah).

SlidingDrawer: Closed Stated

SlidingDrawer: Open State

Steps:

  1. Include the easing interpolator package (source included in the given download link below)
  2. Use the new namespace (panel) in your Android view XML eg. xmlns:panel=”http://schemas.android.com/apk/res/org.panel”
  3. Use the tag set instead of the Android SlidingDrawer component!

Download: AndroidTopDownSlidingDrawer.zip

File: main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:panel="http://schemas.android.com/apk/res/org.panel"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">

	<LinearLayout
		android:orientation="vertical"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent">
		<org.panel.Panel
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:id="@+id/topPanel"
			android:paddingBottom="20dip"
			panel:position="top"
			panel:animationDuration="1000"
			panel:linearFlying="true"
			panel:openedHandle="@drawable/top_switcher_expanded_background"
			panel:closedHandle="@drawable/top_switcher_collapsed_background">
			<Button
				android:id="@id/panelHandle"
				android:layout_width="fill_parent"
				android:layout_height="33dip" />
			<LinearLayout
				android:id="@id/panelContent"
				android:orientation="vertical"
				android:layout_width="fill_parent"
				android:layout_height="wrap_content">
				<TextView
					android:layout_width="fill_parent"
					android:layout_height="wrap_content"
					android:gravity="center"
					android:text="From the Top -> Down"
					android:textSize="16dip"
					android:padding="4dip"
					android:textStyle="bold" />

				<ImageView
					android:src="@drawable/android_skateboard"
					android:layout_gravity="center"
					android:layout_width="wrap_content"
					android:layout_height="wrap_content" />

			</LinearLayout>
		</org.panel.Panel>

	</LinearLayout>
</FrameLayout>

 

File: Test.java

package org.panel;

import android.app.Activity;
import android.os.Bundle;

public class Test extends Activity
	{
		/** Called when the activity is first created. */
		@Override
		public void onCreate(Bundle savedInstanceState)
			{
				super.onCreate(savedInstanceState);
				setContentView(R.layout.main);
			}
	}

27 thoughts on “Android SlidingDrawer – Top Down Style

  1. Thanks for this useful tuto.
    I have a problem when I changed the panel:position to right the handler button stay on the left side of the screen.
    Somebody can help me?

    Down”
    android:textSize=”16dip”
    android:padding=”4dip”
    android:textStyle=”bold” />

  2. Your download link doesn’t seem to be letting me download the file. Any way you can post a new link or just edit the post to include the necessary code? Thanks for all of your help with this!

  3. WTF? Your link sends me to FileFactory where they are trying to FORCE me to pay them money for the privilege of downloading this file. There is no indication or guarantee that the file is even there and that I will be able to access it. Do they think I am that gullable? For that matter do you? Thanks for nothing!

  4. Any idea how to have a handle outside the panel and gets its events. For Ex: The handle button will be on top header bar, on click of this button the panel should slide down show its content. The handle should be separate from panel not attached.

  5. thank you very much for the tutorial. When I run the program and slid down the tab, the tab disappears. I can do so that the tab does not disappear. thank you very much

    Sorry, my English is not very good.

  6. Pingback: how do i create Layout (image / button / emoticons ) for Chat apllication like this? : Android Community - For Application Development

  7. How we can create a slider drawer from left to right flow.
    by default we got bottom to top.
    and when we want to use right to left ,we will use horizontal orientation in slider tag.
    how we can build it from left to right.

    Thanks in advance

  8. Congratulations, this works fine!!
    I want to include this in my project, but i need the animation from bottom to top, and I’m trying to do this and I can’t get to work. Can you help me on this?
    Thanks.

  9. an anybdy help me in including this in my project? what are the steps to follow for using this… Newbie here!

    Thanks for developing this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s