Show View as slide

Question

Hi, I would like to know how to make a View appear as slide on an android layout changing the size of your siblings, for example the information of a point in the Google Maps app that appears and changing the size of the map.

• The information is hidden and the map occupies the whole screen

• The information is displayed and the map size decreases

Answer 1

I will assume that the content behind the slider is not part of the question. Only the slider implementation will be addressed.

In my solution, I made use of Android Sliding Up Panel, as an example application in the app Umano.

If using the Maven or the Gradle to resolve its dependencies, just include this library as a dependencies:

Example using the Gradle:

dependencies {
    repositories {
        mavenCentral()
    }
    compile 'com.sothree.slidinguppanel:library:+'
}

For the perfect operation, the library forces a structure into its layout.

1. Include the com.sothree.slidinguppanel.SlidingUpPanelLayout as the root element of your layout (be Fragment or his Activity).
2. The gravity (com.sothree.slidinguppanel.SlidingUpPanelLayout) root accurate be or top or bottom. This attribute indicates which direction your slider will appear.
3. Make sure that the root has two children. The first child needs to be the main layout. The according to child is the layout for the sliding panel.
4. The child that is the main layout needs to have the attributes of width and height as being match_parent. The sliding panel, the second child, needs to have the attribute width as match_parent and the attribute height or being match_parent or the height you want.
5. By default, the entire panel acts as a "draggable" region, and will intercept by clicking and drag events. You can restrict the "draggable" area. Enough in your onCreate or onCreateView specify a View passing the method setDragView or the attribute dragView in your xml.

This is an example of layout using the library, taken from github repository:

<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>

A suggestion to have a smoother transition, that is, for the slider to be on top of the ActionBar, you will need to use an attribute in your theme:

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

The result will be something like this, of course there are other settings, which are available in the documentation on github¹:

References:

1. https://github.com/umano/AndroidSlidingUpPanel