Android - Slide Up Panel (library) rounded corners

Question

I'm developing the app that should use Navigation drawer as a menu bur for better User Experience i decided to replace navigation drawer with slide up panel.

---

My view is in this image

---

---

Now i want to make this menu with rounded corners i used CardView with cornerRadius attribute but didn't work properly.

---

This is my xml code for the sliding up panel

   <com.sothree.slidinguppanel.SlidingUpPanelLayout
        xmlns:sothree="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        sothree:umanoPanelHeight="0dp"
        sothree:umanoShadowHeight="0dp"
        android:id="@+id/SlidingUpPanel">

   
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

The same design can be seen in Facebook messenger app:

---

---

Any idea will be welcome,Thanks in advance...

PS: The link of library that i use: Github library

Those who want all layout:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar" />


<com.sothree.slidinguppanel.SlidingUpPanelLayout xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:id="@+id/SlidingUpPanel"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    sothree:umanoPanelHeight="0dp"
    sothree:umanoShadowHeight="0dp">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#345D7D" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:orientation="vertical">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5"
            android:orientation="horizontal">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_centerInParent="true"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:scaleType="fitXY"
                    android:src="@drawable/quran_icon" />

            </RelativeLayout>


            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:layout_width="125dp"
                    android:layout_height="125dp"
                    android:layout_centerInParent="true"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:scaleType="fitXY"
                    android:src="@drawable/qibla_compass_icon" />

            </RelativeLayout>


            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:id="@+id/findMyLocation"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_centerInParent="true"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:scaleType="fitXY"
                    android:src="@drawable/location_icon" />


            </RelativeLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5"
            android:orientation="horizontal">


            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_centerInParent="true" />

            </RelativeLayout>


            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_centerInParent="true" />

            </RelativeLayout>


            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_centerInParent="true" />

            </RelativeLayout>
        </LinearLayout>


    </LinearLayout>


</com.sothree.slidinguppanel.SlidingUpPanelLayout>


</LinearLayout>

Leija

Answer 1

Sliding up panel requires the attribute :

sothree:umanoOverlay="true"

In order to overlay layouts.

---

By means of this attribute we not only can make panel rounded (With CardView ) but also set transparent background to slideuppanel.

Reference: Github transparent background (Issues)

Leija

Answer 2

Create a new drawable resource like

drawable_round_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:topLeftRadius="16dp"
        android:topRightRadius="16dp"/>
    <solid android:color="#FFFFFF" />
</shape>

And Set the drawable_round_background.xml as background to your sliding layout like:

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    sothree:umanoPanelHeight="0dp"
    sothree:umanoShadowHeight="0dp"
    android:id="@+id/SlidingUpPanel">

   <!-- SLIDING LAYOUT -->
   <LinearLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/drawable_round_background">
   </LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

hope this will help.

Strangles

@TarlanAhadli can I see your whole layout.xml? because mine is working well. – Strangles

did you also try to set a background to your recyclerview item layout? Since your recyclerview is the header of SlidingLayoutPanel. – Strangles

No,i just want to make only menu of my app with rounded corners – Toffic

yes my recyclerview own has its background color with the hex code of #345D7D,does it matter to my sliding up panel layout? – Toffic

You must also use app:umanoShadowHeight="0dp" and sothree:umanoOverlay="true" in your SlidingUpPanelLayout view. – Leucocratic

@dotGitignore, Thanks a lot. You self my time! – Pless