Elevation not working for BottomSheet inside Coordinator layout

Question

I am trying to use a BottomSheet in my layout. The root view is an CoordinatorLayout and I want to set Elevation on top for the Bottom Sheet so i am setting it with a high value (50dp), however it is not showing when the app runs but it appears on android studio design tool.

I have tried to set background for the sheet with a solid color instead of gradient but it still did work. I also tried to use Shadow shapes but it does not give the same elevation appearance.

here is my XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.atefhares.StartActivity"
    android:clipToPadding="false">

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

        <LinearLayout
            android:id="@+id/DetailsView"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Details Should be shown here"
                android:id="@+id/textView"
                android:textSize="25sp"
                android:padding="20dp" />
        </LinearLayout>

        <fragment xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="com.atefhares.Start_Activity" />


    </LinearLayout>
    <android.support.v4.widget.SlidingPaneLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:behavior_peekHeight="70dp"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
        android:background="@drawable/gradiant"
        android:fillViewport="true"
        android:elevation="50dp">


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

    </android.support.v4.widget.SlidingPaneLayout>

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

Edit: bottom_sheet_layout.xml

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


    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:id="@+id/inviteLL">

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:id="@+id/imageView"
            android:background="@drawable/invite_icon"
            android:layout_margin="5dp"
            android:layout_gravity="center_vertical" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Invite Friends"
            android:textSize="22sp"
            android:textColor="#ffffff"
            android:padding="10dp"
            android:fontFamily="sans-serif-condensed"
            android:gravity="center_vertical"
            android:id="@+id/inviteTV"

            android:layout_gravity="center_vertical"
            android:layout_weight="1" />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:id="@+id/arrowIV"
            android:layout_gravity="center_vertical"
            android:background="@drawable/arrow_up" />
    </LinearLayout>


    <ListView
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:id="@+id/usersLV"
        android:dividerHeight="1dp"
        android:divider="#ffffff"
        android:background="#ffffff" />

</LinearLayout>

So how can I make the elevation shows on top of the Bottom Sheet

Any one can help, please ?

Answer 1

Try this,

<android.support.v4.widget.SlidingPaneLayout
        android:id="@+id/bottom_sheet"
xmlns:slide_panel="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:behavior_peekHeight="70dp"
      app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
        android:background="@drawable/gradiant"
        android:fillViewport="true"
        slide_panel:elevation="50dp">

Answer 2

According to the google guidelines with the android:elevation is not possible (Also you can read more about the keyligth).

Anyway on the most common cases when you scroll up the "BottomSheet" a semitransparent layer appears behind the "BottomSheet", this helps to keep the user focus on the "BottomSheet" actions, like these examples.

If anyway you want a top shadow you can set a drawable background with gradient like this (shadow_top.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
    android:angle="90"
    android:centerColor="#000000"
    android:endColor="@android:color/transparent"
    android:startColor="#000000"
    android:type="linear" />

And your SlidingPanelLayout will be:

<android.support.v4.widget.SlidingPaneLayout
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:behavior_peekHeight="95dp"
    android:paddingTop="25dp"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    android:background="@drawable/shadow_top"
    android:fillViewport="true"
    >

Best regards.