How to set elevation to Bottom navigation

Question

So by the support V25. We have new component called Bottom navigation.

Follow the Design guidelines, the Bottom Navigation's elevation should be 8dp (https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-specs)

But I can't set the elevation to it.

Any suggestion, example would be appreciated. Thank you!

UPDATE XML CODE

<RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:elevation="8dp"
    app:elevation="8dp"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@drawable/bottom_nav_color_state"
    app:itemTextColor="@drawable/bottom_nav_color_state"
    app:menu="@menu/bottom_navigation_main"/>

<FrameLayout
    android:id="@+id/contentFrame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/bottom_navigation"
    android:background="#EDEDED"/>

Answer 1

So, for now (25.1.0) we have to set the android:background of BNV to @android:color/white to have the shadow. It will not display if you set to other color (ie your primary color)

Answer 2

I had the same issue and to have a @android:color/white as OP suggested was not acceptable in my case. So since we "can't" get shadow with elevation and custom background we need to hack it.

My approach is adding a shadow view inside the frame layout to "mimic" elevation.

<RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:elevation="8dp"
    app:elevation="8dp"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@drawable/bottom_nav_color_state"
    app:itemTextColor="@drawable/bottom_nav_color_state"
    app:menu="@menu/bottom_navigation_main"/>

<FrameLayout
    android:id="@+id/contentFrame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/bottom_navigation"
    android:background="#EDEDED"/>

    <some.kind.of.pager.or.other.content.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <View
        android:id="@+id/shadow_view"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_gravity="bottom"
        android:background="@drawable/shadow_gradient" />

</FrameLayout>

where the background of the shadow view is nothing more than a shape gradient that is positioned over all other just above the bottom nav view, something like:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:endColor="@android:color/transparent"
        android:startColor="#8f000000" />
</shape>

Hope this helps someone.

Answer 3

Elevation has been fixed in the Android material components 1.1.0 (alpha) release according to this commit.

Edit

for those wondering, this is how you add the new depdendency:

dependencies {
    // ...
    implementation 'com.google.android.material:material:1.1.0-alpha02'
    // ...
}

More information about getting started can be found here and info about releases can be found here.

Cheers!