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!

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