28

Is there any way to make the drawer slide from top to bottom?

1

4 Answers 4

32

I've found a simple way to do that. All you have to do is to set the rotation of 180º for the slidingDrawer, the content and the handle. It's easier to understand with an example, so look what I've done:

First, I'll show you my old SlidingDrawer, from bottom to top.

<SlidingDrawer xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/slidingDrawer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:handle="@+id/handle"
    android:content="@+id/content">
    <ImageView android:id="@+id/handle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
    <ImageView android:id="@+id/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF0000"
        android:src="@drawable/ic_launcher" />
</SlidingDrawer>

Now look at the changes I made, setting the rotation of 180º

<SlidingDrawer xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/slidingDrawer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:handle="@+id/handle"
    android:content="@+id/content"
    android:rotation="180">
    <LinearLayout android:id="@+id/handle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"
            android:rotation="180" />
    </LinearLayout>
    <ImageView android:id="@+id/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF0000"
        android:src="@drawable/ic_launcher"
        android:rotation="180" />
</SlidingDrawer>

Note that I also created a LinearLayout to set as handle, and didn't change it's rotation, but I changed the rotation of it's child. This was to prevent a small issue I had, but everything is working fine and it's simple.

4
  • 3
    Note android:rotation is API Level 11 (Android 3.0).
    – dvs
    Jul 25, 2012 at 2:37
  • when I am running the application using the above layout the error is displaying error: No resource identifier found for attribute 'rotation' in package 'android'
    – Janmejoy
    Dec 19, 2012 at 13:11
  • SlidingDrawer was deprecated in API level 17
    – adamdport
    Feb 27, 2015 at 16:40
  • this is best answer for me in stackoverflow :) thanks a lot
    – Adem
    Apr 20, 2017 at 9:23
7

The default SlidingDrawer class doesn't allow this. You can use the Panel class from here to get something very similar though: http://code.google.com/p/android-misc-widgets/

http://www.ohloh.net/p/android-misc-widgets

4
  • 1
    Did you get the Panels there working? I'm having a really hard time integrating that Panel, which seems to be very cool though. My issue is here, if somebody could look over it code.google.com/p/android-misc-widgets/issues/detail?id=9 The error says "Binary XML file line #15: The content attribute is required and must refer to a valid child."
    – OneWorld
    Nov 4, 2010 at 9:06
  • I had to wrap the panel widget into a frame layout to get it working
    – OneWorld
    Nov 25, 2010 at 15:04
  • 1
    The top-dropper had an unwanted behaviour: The content below was moved to the bottom. I fixed it this way: <FrameLayout><RelativeLayout><other stuff below/><panel/></RelativeLayout></FrameLayout>
    – OneWorld
    Dec 2, 2010 at 20:06
  • Panel implementation doesn't work on phones such as HTC One and other 4.4 devices.
    – Graeme
    Mar 5, 2014 at 15:39
7

I was very unsatisfied with the solutions provided here:

  • The Panel class from http://code.google.com/p/android-misc-widgets/ was really unintuitive to use and also had bugs and visual glitches (unusable for productive use) and no docs at all
  • SlidingTray class from http://aniqroid.sileria.com/doc/api/ was nested in a lib needing too much dependency and for me, I did not get it to work at all
  • using android:rotation="180" requires API Level 11, and my target is 10.

(no offense to the respective devs, trying to be objective here)

So my solution was to extract SlidingTray from this lib http://aniqroid.sileria.com/doc/api/ (by Ahmed Shakil) and refactored it a bit since it had some quirks needed to be used within Ahmed's lib. SlidingTray is based on Androids own SlidingDrawer, so I guess it is stable. My modification consists of 1 class which I called MultipleOrientationSlidingDrawer and you have to add declare-styleables in your attrs.xml. Other than that it has pretty much the same usage as SlidingDrawer with the additional "orientation" attribute..

Check it out: MultipleOrientationSlidingDrawer (source & example) @ gist

Here is a usage example (also provided in the gist)

<your.app.MultipleOrientationSlidingDrawer
        xmlns:custom="http://schemas.android.com/apk/res-auto/your.app"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        custom:handle="@+id/handle_c"
        custom:content="@+id/content_c"
        custom:orientation="top">
        <RelativeLayout
            android:id="@id/handle_c"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:background="#333333">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="Handle Text"
                android:gravity="left|center_vertical"/>
        </RelativeLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@id/content_c"
            android:background="#555555">

            <ListView
                android:id="@+id/listview_credits"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </FrameLayout>
    </your.app.MultipleOrientationSlidingDrawer>

Disclaimer: All the credits go to respective dev. I did not test this solution extensively, it works great with TOP and BOTTOM set in XML. I did not try to use it programmatically.

3
  • It is good, but have you seen problem with animation ? Have you found a solution for blinking of view while it moving?
    – Vetalll
    Sep 30, 2013 at 11:55
  • I did have blinking animiations with code.google.com/p/android-misc-widgets , but not with this apporach (so far)
    – Patrick
    Oct 21, 2013 at 14:45
  • Is it possible to make the ` FrameLayout` content_c not to take up all available space because I see it pushed everything down even do I set android:layout_height="wrap_content"
    – Erik
    Aug 15, 2017 at 13:54
6

I had to do the same for one of my projects and I ended up writing my own widget for this. I called it SlidingTray is now part of my open source Aniqroid library.

http://aniqroid.sileria.com/doc/api/ (Look for downloads at the bottom or use google code project to see more download options: http://code.google.com/p/aniqroid/downloads/list)

The class documentation is here: http://aniqroid.sileria.com/doc/api/com/sileria/android/view/SlidingTray.html

6
  • I tried this one, but when I implement it using the xml example, I get a nullpointer exception at com.sileria.android.Resource.getIdentifier. Would love to use this.
    – Peterdk
    Aug 31, 2011 at 11:25
  • 2
    Oops, looks like I forgot Kit.init()... Works great now!
    – Peterdk
    Aug 31, 2011 at 11:34
  • Also if you copy/paste the XML example from the documentation, it's com.sileria.android.view.SlidingTray and not com.sileria.android.SlidingTray
    – Fr4nz
    Jun 17, 2013 at 13:16
  • its also not working and through NullPointerException @Peterdk !!
    – MBH
    Aug 2, 2013 at 6:42
  • Your Kit.destroy() method does not work. onTerminate() wont get called on a real device only in emulator. There is no real way to get a callback when the app is "terminated" since the android paradigm does not work that way.
    – Patrick
    Aug 20, 2013 at 9:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.