Saturday, August 22, 2009

Android : Sliding Drawer Example

If you have lot’s of stuff to put on your screen for a single activity, you should probably go for the SlidingDrawer widget. It is very simple to use, and looks cute. Here are the steps that you need to do for bringing up the sliding drawer on your activity.

Here is a sample application displaying how to code up a sliding drawer. It's pretty simple, and I don't think it needs more explanation.




















<SlidingDrawer android:id="@+id/slidingDrawer1"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:topOffset="50dip" android:handle="@+id/handle"
        android:content="@+id/content">

The sample project sets up a Sliding Drawer at the bottom of the screen. You can change it to appear at place of the screen. You just need to change/adjust some properties of the SlidingDrawer.
  • The orientation property can be set to either "horizontal" and "vertical"
  • There are properties like "topOffset", "bottonOffset", "rightOffset" and "leftOffset" with which you can position your drawer anywhere.
  • With a few more changes, you can attach backgrounds/images to the whole SlidingDrawer. For example, I have added a color background to the content of the Sliding Drawer.
Update: Here is the link to the source code which shows how to cook up a simple sliding drawer.

32 comments:

  1. Macha Please help da

    How can we bring sliderdrawer always on top of other views(canvas)

    ReplyDelete
  2. Doesn't this work?? As far as I can remember, this example shows the drawer on top of all the views. Let me have a look at your code and then I can answer.

    ReplyDelete
  3. i have a canvas which is drawn on the ondraw method ..

    pr = new LayoutParams(320,400);
    setContentView(view);
    getWindow().addContentView(displayPanel,pr);
    view.bringToFront();

    this is how i have set the two in the content view .at first the slide drawer is on the top of canvas.. when i click to make it slide it does well. but when i click on the handler to minimise it its getting hidden beneath the canvas..but its there because as i click on the bottom region, aticipating it would be there, its getting sliding in again.. any help will be appreciated.. thanks in advance..

    ReplyDelete
  4. I pretty much don't know what i'm doing and I'm trying to learn java by trial and error. Where do I place the LayoutInflater code to call the drawer xml file?

    ReplyDelete
  5. In the onCreate of the Activity, you can do this stuff.

    ReplyDelete
  6. Thanks. I can see that it should work, but I'm getting some weird error that says 'params cannot be resolved to a variable'.

    ReplyDelete
  7. Ok, I will improve this tutorial and update it with a simpler one. Will let you know when I do it. I am a bit busy now. Sorry.

    ReplyDelete
  8. I got some other help from someone and I got it working by using: WindowManager.LayoutParams params = getWindow().getAttributes();

    This covers the entire parent area and I'm looking at only having the drawer slide out just far enough to show all of it's contents. Thanks for your help.

    ReplyDelete
  9. i want to get visible my custom keyboard on edittext... but it is not coming with sliding..will u plz help me.

    ReplyDelete
  10. Thanks for your example. I add this lines and it works:

    import android.view.ViewGroup.LayoutParams;

    public class Quiz extends Activity{
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ...
    LayoutParams pr = new LayoutParams(320,400);
    LayoutInflater inflater = getLayoutInflater();
    View view = inflater.inflate(R.layout.drawer, null);
    getWindow().addContentView(view, pr);
    }
    }

    ReplyDelete
  11. I have a Optimus One with Android Froyo but i don`t see the slidedrawer ,i installed slidedrawer apk but is launched as a normal aplication and is empty , i need it on top of my home screen or right of the screen (right to left slide) anny sugestions or download links? if some of you know something PLEASE mail me at sebby.curta at gmail.com

    ReplyDelete
  12. I have Optimus One running Froyo and i would like to have slidedrawer on my top of the home screen or on my right, i downloaded a zip archive wich contains manny files and installed the apk but the drawer acts as a usual aplication and when i slide it is empty ( no aplications in it), i need it to be permanently on my home screen (like dockbar is) does anny of you know how and/or a download link? is YES please mail me at sebby.curta at gmail dot com

    ReplyDelete
  13. Are you using the same sample? Hmm, I think I will write up a detailed post on how to use the sliding drawer and attach the whole source code.

    ReplyDelete
  14. Hi How to use SlidingDrawer for top to bottom.

    ReplyDelete
  15. you can't the SlidingDrawer only works from bottom to top although there are other custom components that do something similar

    ReplyDelete
  16. @Jose: Sliding drawers can be made to slide from each of the four sides.

    ReplyDelete
  17. Hi
    I want to open drawer from top to bottom and slow down the animation speed....how can i achieve it? Please help !!!

    ReplyDelete
  18. Top to bottom, it's not possible with the default sliding drawer. I don't know yet if you can slow down the animation.

    Check out this link
    http://w2davids.wordpress.com/android-slidingdrawer-top-down-style/

    ReplyDelete
  19. Thanks for the reply bibek.
    I'll see to it if I can find an alternate to what I want as desired output.

    ReplyDelete
  20. Thanks Kumar... it helped me to go forward with my project

    ReplyDelete
  21. Is it possible to have drawers sliding out from multiple sides of the screen?

    ReplyDelete
  22. As of now, by default, sliding drawers can only be made to slide out either from the bottom or the right. Multiple sliding drawers from the bottom and right should be possible to achieve.

    ReplyDelete
  23. Who know this code can't view gridview: :(

    ReplyDelete
  24. Hi Kumar, how can i use slider for other handler, means i want to handle slider using any other buttonEvent of screen.

    pls let me know.
    thanks

    ReplyDelete
  25. Arpit Hada , i want that slider should move slowly , how you achieve the animation slowly,
    any one if know then plz tell me

    ReplyDelete
  26. I have problem with sliding drawer!! when i open sliding drawer and click within sliding drawer area it opens image which is not part of sliding drawer but it's a part of background background screen which is gridview of image!
    Do you have any solution to this!
    Reference this Question too(Below Link):
    http://stackoverflow.com/questions/5056941/clicking-inside-a-sliding-drawer

    ReplyDelete
  27. Hi! I'm newbie in android development, and I need help. Your example works great but I need it to slide from top to bottom.
    any suggestions?

    ReplyDelete
  28. hi..
    i'm having one problem..
    i have a checbox beside sliding drawer handle.when i check it im going to lock the drawer,at the same time checkbox also gets locked i'm unable to uncheck it again..please send any answers if u have..
    email-id:girishbht5@gmail.com

    ReplyDelete
  29. hi,

    if I want to keep the drawer open (even if the handle is tapped) but items in the list can be selected, how to do it?
    many thanks.
    email: yqwang_us@yahoo.com

    ReplyDelete
  30. Hi...can any one tell me how to slow down the velocity of Slider

    ReplyDelete