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);
			}
	}