Android Sliding Up Panel with ScrollView support

This is a fork of AndroidSlidingUpPanel, also inpired by this fork by dlukashev. This is some kind of merge dlukashev's idea into AndroidSlidingUpPanel v.2 with some improvements. For total understanding of how it's done with ScrollView - see this dlukashev's blog post.

You need to understand, that this is a little hacky way, but it's "good enough", as I think.

Android Sliding Up Panel

This library provides a simple way to add a draggable sliding up panel (popularized by Google Music, Google Maps and Rdio) to your Android application. Umano Team <3 Open Source.

As seen in Umano Android app:

SlidingUpPanelLayout

Importing the library

You can import it as a Library Project

Usage

Include com.sothree.slidinguppanel.SlidingUpPanelLayout as the root element in your activity layout.
The layout must have gravity set to bottom.
Make sure that it has two children. The first child is your main layout. The second child is your layout for the sliding up panel.
The main layout should have the width and the height set to match_parent.
The sliding layout should have the width set to match_parent and the height set to either match_parent or the max desireable height.
By default, the whole panel will act as a drag region and will intercept clicks and drag events. You can restrict the drag area to a specific view by using the setDragView method or dragView attribute.
If you use LockableScrollView inside this Panel, you need to invoke setScrollableView(), setPanelHeight() with right attributes, and setEnableDragViewTouchEvents(true) (see example).
Also you need to add some transparent views into your layout and change their visibility in PanelSlideListener methods, as it shown in the example.

For more information, please refer to the sample code.

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    sothree:panelHeight="68dp"
    sothree:shadowHeight="4dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Main Content"
        android:textSize="16sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center|top"
        android:text="The Awesome Sliding Up Panel"
        android:textSize="16sp" />
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

For smooth interaction with the ActionBar, make sure that windowActionBarOverlay is set to true in your styles:

<style name="AppTheme">
    <item name="android:windowActionBarOverlay">true</item>
</style>

However, in this case you would likely want to add a top margin to your main layout of ?android:attr/actionBarSize.

Caveats, Additional Features and Customization

If you are using a custom dragView, the panel will pass through the click events to the main layout. Make your second layout clickable to provent this.
You can change the panel height by using the setPanelHeight method or panelHeight attribute.
If you would like to hide the shadow above the sliding panel, set shadowHeight attribute to 0.
You can disable sliding by using setSlidingEnabled method. This can be useful if you want to show\hide panel only from the code. By default sliding is enabled.
You can add paralax to the main view by setting paralaxOffset attribute (see demo for the example).
You can set a anchor point in the middle of the screen using setAnchorPoint to allow an intermediate expanded state for the panel (similar to Google Maps).
You can set a PanelSlideListener to monitor events about sliding panes.
You can also make the panel slide from the top by changing the layout_gravity attribute of the layout to top.
By default, the panel pushes up the main content. You can make it overlay the main content by using setOverlayed method or overlay attribute. This is useful if you would like to make the sliding layout semi-transparent.
By default, the main content is dimmed as the panel slides up. You can change the dim color by changing fadeColor. Set it to "@android:color/transparent" to remove dimming completely.

Implementation

This library was initially based on the opened-sourced SlidingPaneLayout component from the r13 of the Android Support Library. Thanks Android team!

Requirements

Tested on Android 2.2+

Other Contributors

Jan 21, 14 - ChaYoung You (@yous) - Slide from the top support
Aug 20, 13 - (@gipi) - Android Studio Support
Jul 24, 13 - Philip Schiffer (@hameno) - Maven Support
Oct 20, 13 - Irina Preșa (@iriina) - Anchor Support
Dec 1, 13 - (@youchy) - XML Attributes Support
Dec 22, 13 - Vladimir Mironov (@mironov-nsk) - Custom Expanded Panel Height

If you have an awesome pull request, send it over!

Changelog

2.0.1 - Bug fixes.
2.0.0 - Cleaned up various public method calls. Added animated showPanel/hidePanel methods.
1.0.1 - Initial Release

Licence

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.