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!