How can I add a shadow to bottom sheet view?

Question

As of now, with the official bottom sheet component from the Android design library implemented the top edge doesn't show a shadow. But for what I've seen in various mockups and in the Material Design specs, the bottom sheet include a discrete shadow of some sort.

I think the shadow would help distant the bottom sheet from the main layout, especially if there's a peek value set and/or the bottom sheet is always visible. Otherwise it just will blend together with the main layout and its items.

I've tried both ViewCompat.setElevation(bottomSheet, 5); and setting android:elevation="5dp" to the view in the XML, without success.

But we're talking about a bottom sheet here. I use a LinearLayout as the root view for the sheet. — Chris, May 17 '16 at 15:42
Couldn't any of the answers solve your problem or why didn't you accept one of them? — mbo, Jul 29 '17 at 09:04

mbo · Accepted Answer · 2018-01-16T19:40:37.907

I know that a shadow shape doesn't have the same appearance as an elevation - but at least give it a try. The trick is to use app:layout_anchor to clip the shadow to the bottom sheet.

activity_main.xml

<android.support.design.widget.CoordinatorLayout 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">

<MapView
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<View
    android:id="@+id/shadow"
    android:layout_width="match_parent"
    android:layout_height="16dp"
    android:background="@drawable/shape_gradient_top_shadow"
    app:layout_anchor="@id/bottom_sheet" />

<FrameLayout
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:clipToPadding="false"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior" />

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

shape_gradient_top_shadow.xml

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

Looks like this:

EDIT

Get an even better result with a custom ShadowView:

Post from Roman Nurik on this topic: https://plus.google.com/+RomanNurik/posts/2QvHVFWrHZf
Gist of the ShadowView based on Roman Nurik's solution: https://gist.github.com/MariusBoepple/bf869e02541cd4750550e88fa07b5ddd

Then you can do the following:

<ShadowView
    android:id="@+id/shadow"
    android:layout_width="match_parent"
    android:layout_height="16dp"
    android:gravity="bottom"
    app:layout_anchor="@id/bottom_sheet" />

I couldn't get `android:elevation` to work. This is acceptable. Thanks. — ono, Jan 25 '17 at 02:16
Thanks but the shadow is still visible when the bottom sheet is hidden. I guess it'd have to programmatically be hidden as well. — SagunKho, Sep 11 '17 at 15:51
You could include the shadow at the top of the bottom sheet, so that when it hides, it's offscreen. — Sofi Software LLC, Oct 31 '17 at 19:25
I think what's important to note is elevation mostly gives shadow below views and not above, so for something like a bottom sheet this works well — caitcoo0odes, May 28 '21 at 21:26

score 16 · Answer 2 · answered Jun 29 '16 at 14:44

For API Level 21 and higher, set the following in the parent view. You can also try in the rootview of the bottomsheet (I have not tried it in the root view)

android:background="@android:color/white"
android:elevation="16dp"

If no background then can use

android:outlineProvider="bounds"

For example, I have my sheet inside a nested scroll view

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
  app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
        android:elevation="16dp"
        android:outlineProvider="bounds"
        >

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

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

It does not work for top shadows - only for the bottom, as "light" goes from the upper corner (see fab shadow) — Evgenii Vorobei, Jul 25 '19 at 08:42

Badr · Answer 3 · 2018-05-31T13:04:54.620

The trick is to use a CardView as parent and set the elevation in the CardView

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:background="#fff"
    android:clickable="true"
    android:focusable="true"
    app:behavior_hideable="true"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    android:layout_height="140dp"
    app:cardElevation="8sp"
    card_view:cardCornerRadius="0dp">

      <!--The content of your Bottom sheet-->
        <android.support.constraint.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent">
          .
          .
      </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

EDIT

This technique is not the best solution if you are supporting Kitkat and below. It's due to the extra margin added by the Cardview.

I needed a shadow on my `BottomSheet`. Since the sheet peeks from the bottom, the default `CardView`s shadow was not sufficient. What worked for me was using a `CardView` like suggested in this post + changing the shadow direction (https://blog.usejournal.com/playing-with-elevation-in-android-91af4f3be596). — Michal Vician, Apr 08 '20 at 11:03

score 0 · Answer 4 · answered Jun 06 '20 at 11:05

I think this will help you

first create bottom sheet like bellow then include in your main activity

<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/bottom_sheet"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 app:behavior_hideable="true"
 app:behavior_peekHeight="56dp"
 android:layout_marginTop="0.5dp" // this margin depend on shadow area
 android:background="set you color"
 android:elevation="20dp" // chose your custom elevation 
 app:layout_behavior="@string/bottom_sheet_behavior">

    <LinearLayout
     android:layout_marginTop="1dp" // this margin depend on max elevation
     android:layout_width="match_parent"
     android:layout_height="200dp">

   </LinearLayout>

</LinearLayout>

How can I add a shadow to bottom sheet view?

4 Answers4

Linked