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"/>

check [this](https://code.google.com/p/android/issues/detail?id=226182&sort=-id%20-stars%20-status&colspec=ID%20Status%20Priority%20Owner%20Summary%20Stars%20Reporter%20Opened) and [this](http://stackoverflow.com/questions/40316411/bottomnavigationview-shadow-and-ripple-effect) — Gopal, Jan 24 '17 at 10:10
Try this approach: http://stackoverflow.com/questions/41650778/android-bottom-navigation-bar-with-drop-shadow/41651284#41651284 — Alexander Bilchuk, Jan 24 '17 at 10:42
@AlexanderBilchuk, it won't cast the shadow on top of other view — Banana droid, Jan 25 '17 at 04:44
@gopal_patil, updated to 25.1.0, replace app:itemBackground with android:background, still can't cast shadow — Banana droid, Jan 25 '17 at 04:45

score 39 · Accepted Answer · answered Jan 25 '17 at 05:17

39

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)

answered Jan 25 '17 at 05:17

Banana droid

690
1
9
27

2

confirming solution. important (and weird) part is that **must** be `white` color (from `android` res or "custom" - but not so custom if it has to be white...). not working with black and any other... – snachmsm Apr 13 '17 at 07:02
3

In this situation, if `app:elevation` is going to be used, it adds some shadow on bottom of navigation view. If I want to add the shadow on top of navigation, what should I do? @NamNguyễn – inverted_index Jun 21 '17 at 10:03
tried today - any color works, but to drop shadow you will still need android:background to be set – Penzzz Jul 21 '18 at 04:22

score 4 · Answer 2 · answered Jul 05 '17 at 21:55

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.

J-me · Answer 3 · 2019-01-23T13:50:41.700

2

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!

edited Jan 23 '19 at 13:50

answered Nov 26 '18 at 14:38

J-me

424
4
13

How would I go about using it? – Jacob Sánchez Jan 23 '19 at 05:35
Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91 is also present at [androidx.core:core:1.0.0] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory). – Jacob Sánchez Jan 24 '19 at 01:12
I get this error. I honestly don't like to mess with Gradle because it is a pain in the head. – Jacob Sánchez Jan 24 '19 at 01:13
5

The commit is related to `BottomAppBar` which is a totally different component. The OP is asking about `BottomNavigationView`. Please read the question carefully before answering. – Javad Apr 11 '19 at 00:11

How to set elevation to Bottom navigation

3 Answers3

Linked