How to make a Sliding Up Panel in Android?

Question

I want to add a Sliding up Panel in my project. But I am not sure how to do that. I want to add the sliding panel in my following layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainFragment"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F7FEFF"
    tools:context="app.meetgreet.meetgreet.MainActivity">

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="app.meetgreet.meetgreet.MapsActivity" />

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:textColor="@color/colorAccent"
        android:textSize="30sp"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="@+id/scrollView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/scrollView2"
        app:layout_constraintVertical_bias="0.36" />

    <ScrollView
        android:id="@+id/scrollView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <LinearLayout
            android:id="@+id/linearLayoutMain"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical" />
    </ScrollView>

    <ImageButton
        android:id="@+id/imageButton"
        style="@style/Widget.AppCompat.ImageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@android:color/transparent"
        android:contentDescription="@string/settings"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_icons8_benutzereinstellungen_64" />

</androidx.constraintlayout.widget.ConstraintLayout>

I already implemented the library to do that:

 implementation 'com.sothree.slidinguppanel:library:3.4.0'

The following part should be the mainLayout. So it is not part of the sliding panel. It provides a google map.

<fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="app.meetgreet.meetgreet.MapsActivity" />

All other views but the ImageButton should be part of the sliding panel. The ImageButton should be on the top of the Screen and disappear if the Panel reaches the top. I hope someone can help me to implement that! I already tried to do that as described on GitHub: https://github.com/umano/AndroidSlidingUpPanel Anyway, it doesn't work.

Thanks!

score 1 · Answer 1 · answered Jan 03 '20 at 06:55

Here is a simple example activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<com.sothree.slidinguppanel.SlidingUpPanelLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/slide_up"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    tools:context=".MainActivity"
    app:umanoPanelHeight="70dp"
    app:umanoShadowHeight="5dp">

<!-- main content -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="app.meetgreet.meetgreet.MapsActivity" />

    </RelativeLayout>

<!-- sliding part -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include layout="@layout/example" />

    </RelativeLayout>

</com.sothree.slidinguppanel.SlidingUpPanelLayout>

example.xml

<RelativeLayout

   xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >


    <!-- this is the header-->
    <LinearLayout
        android:id="@+id/header_layout"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:orientation="horizontal"
        android:clickable="true"
        android:background="@color/backgroundColor"
        android:gravity="center">

<!-- some views here -->

</LinearLayout>


    <!-- this is the content -->
<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true">

<!-- some views -->

</RelativeLayout>

</RelativeLayout>

How to make a Sliding Up Panel in Android?

1 Answers1