Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Customize the SlidingDrawer component to animate/transition from the top down.

Published? true
FormatLanguage: WikiFormat

Problem:

You want to customize the SlidingDrawer component to animate/transition from the top down.

Solution:

Android's SlidingDrawer component's default behavior is to transition from the bottom and then move upwards on a user clicking the panel handle. To accomodate the transition from the top moving downwards, an animation is required. Use is made of the open-source org.panel package to accomplish this task.

Discussion:

Steps:

  • Include the org.panel easing interpolator package (source included in the given download link)
  • Include as a new namespace such as panel in your Android view XML, e.g., xmlns:panel="http://schemas.android.com/apk/res/org.panel"
  • Use the tag set instead of the Android SlidingDrawer component!

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

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