Wednesday, June 13, 2012

Sliding Drawer in Android

C’mon…Android’s SlidingDrawer is a pretty neat & handy component. It does what its supposed to: open/close a drawer revealing with it tucked away icons or additional view components.
Its a pretty smart way of:
  • Intuitive use of a well-known archetype everybody knows: a drawer which open/close..simple!
  • Saves and maximizes use of screen real estate
  • Visually appealing.
The Problem:
BUT…..yes you had it coming, sometimes its default behavior is not what you would expect! The default behaviour of the SlidingDrawer component is to maximize to a height of the position of the last component on the screen. But if the last component is at the very bottom, then the SlidingDrawer will not be apparently visible!
In the screenshot immediately below,  I want the Help SlidingDrawer to overlap the ListView when maximized, except the ListView is blocking its visibility!..I know annoying Droid!

The Solution:
Manipulating Android’s View layer to hide/reveal components!
listview – a reference to the ListView component declared in your XML-layout file.
helpDrawer – a reference to the SlidingDrawer component in our XML-layout file.
         // SlidingDrawer
 helpDrawer = (SlidingDrawer) this.findViewById(R.id.helpdrawer);

        // Open Handler
 helpDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener()
 {
  @Override
  public void onDrawerOpened()
  {
    listView.setVisibility(ListView.GONE);
  }
 });

 // Closing Handler
 helpDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener()
 {
  @Override
  public void onDrawerClosed()
   {
     listView.setVisibility(ListView.VISIBLE);
   }
 });
Initially Minimized and Closed state:

Open and Maximized State:

No comments:

Post a Comment