vertical DrawerLayout or SlidingPaneLayout

Question

The latest Android Support Library introduced the DrawerLayout to implement the common UX pattern where you slide right or left to show a navigation menu.

What I'd love to have is a vertical DrawerLayout with the same API, that can be pulled down/up from the top/bottom of my layout.

Since 4.2 the old SlidingDrawer has been deprecated and I haven't heard about some new Widget that implements the same functionality.

Can the DrawerLayout be extended somehow to implement the vertical swipe UX pattern? Does google provide some different widget to implement it?

Google Music for instance has something very similar to what I'm looking to implement to pull up the player.

enter image description here

score 45 · Accepted Answer · answered May 31 '13 at 21:28

45

We have recently implemented this in the Umano App and open sourced: https://github.com/umano/AndroidSlidingUpPanel

Enjoy.

answered May 31 '13 at 21:28

tokudu

2,250
23
22

thanks, looks like what i was looking for. I ll give it try and then place the boundy. – Mario Lenci Jun 03 '13 at 08:29
2

Great work. That's exactly what i was looking for, you made the life easier for lots of people out there. I wonder why google kept this for itself. PS: you made my day with the memes in the demo :) – Mario Lenci Jun 04 '13 at 16:21
Any chance of adding maven support ? – Marco RS Jun 07 '13 at 01:53
Hey Marco, it's not a library, to use the view, just copy it to your project. – tokudu Jun 20 '13 at 23:36
Hey @tokudu, how can I add it to my IntelliJ project? – juliano.net Feb 28 '14 at 01:58
You couldnt have found a better way to promote your app; I was looking for a tech solution and now Im downloading a new app :D – AlvaroSantisteban Apr 24 '14 at 09:39
How to use it a child of DrawerLayout?? Whenever i am making it child of DrawerLayout it not moving up on dragging remain stick to the bottom. An ideas?? – jeevs Jul 22 '15 at 11:59

score 12 · Answer 2 · answered Jun 24 '16 at 21:46

12

The Android support library now has the bottom sheets behavior to do that.

Check out this link for more info https://material.google.com/components/bottom-sheets.html

answered Jun 24 '16 at 21:46

Distwo

11,569
8
42
65

2

Thank you so much for this hint, I have been searching for a better solution than umanos Sliding Panel. – gtRfnkN Jul 09 '16 at 07:41
Here's a good tutorial for adding the bottom sheet per google specs. https://code.tutsplus.com/articles/how-to-use-bottom-sheets-with-the-design-support-library--cms-26031 – Nick N Apr 21 '17 at 15:31
The link in the answer is obsolete, but this links to the class: https://developer.android.com/reference/android/support/design/widget/BottomSheetBehavior – ThomasW Jul 18 '18 at 03:10

xarlymg89 · Answer 3 · 2018-08-29T15:04:36.407

Nowadays, it makes more sense to use the BottomSheetBehavior that you can find more information on how setting it up on https://code.tutsplus.com/articles/how-to-use-bottom-sheets-with-the-design-support-library--cms-26031

Basically, you need to set your main content, and your sliding content. The BottomSheetBehavior would only work for panels that you slide from the bottom to the top.

It has a quite simple set up and the BottomSheetBehavior could even work out of the box. Only by writing a android.support.design.widget.CoordinatorLayout layout, with another View inside (with even wrap_content as a value in the layout_height parameter), for instance a LinearLayout like this one:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:behavior_hideable="true"
        app:behavior_peekHeight="56dp"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <!-- Your content goes here -->

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

In my case, I inflate this layout in a Fragment and add it to the Activity where you want to enable the SlidingSheetBehavior.

vertical DrawerLayout or SlidingPaneLayout

3 Answers3

Linked