Android Bottom Navigation Bar with drop shadow

问题

I'm implementing Bottom Navigation Bar in Android app using Google's support design library v25.1.0. Is there any way to add drop shadow effect, same as current Android native Google Photos app?

回答1:

You can draw your own shadow just above the bottom bar using simple View and its background:

<View
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:layout_above="@id/bottom_bar"
    android:background="@drawable/shadow"/>

drawable/shadow.xml:

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

Also, there are no compatibility issues if use this approach.

回答2:

You can use elevation to add shadows to any view

<TextView
android:id="@+id/myview"
...
android:elevation="2dp"

android:background="@drawable/myrect" />

Refer this for more information

回答3:

For those using a CoordinatorLayout with the Bottom Navigation Bar (or BottomAppBar), you can use the following to attach a shadow above the bar:

<View
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:background="@drawable/shadow"
    app:layout_anchor="@+id/toolbar"
    app:layout_anchorGravity="top"/>

Obviously, replace the @+id/toolbar with the id of the Bottom Navigation Bar

回答4:

For those using Material Component - this has been fixed by com.google.android.material:material:1.1.0-alpha09.

Available since 1.1.0-alpha05 : https://github.com/material-components/material-components-android/releases/tag/1.1.0-alpha05

Use android:elevation="4dp" to set elevation shadow.

Also, do not forget to set clipChildren="false" on your main layout, otherwise, the shadow will be overwritten.

来源：https://stackoverflow.com/questions/41650778/android-bottom-navigation-bar-with-drop-shadow