BottomNavigationView - Shadow and Ripple Effect

Question

I was really happy when BottomNavigationView was released one week ago but I am facing some problems which makes me unable to solve it, like to see a shadow over the BottomNavigationView, on the same way as Google Photos Android App shows us:

If we tap on an Google Photos menu item, we can see a ripple effect which is tinted blue like the icon and text color (when selected).

Implementing the solution provided by Google only is displayed a gray ripple effect color, and worse, it is not displayed when we change the background color of the bottomnavigationview (design:itemBackground="...").

Someone knows how to solve it?

Answer 1

Here is what I've achieved:

I've created a demo on GitHub to help you.

First of all use latest support library compile "com.android.support:design:$SUPPORT_VERSION"

It only works if you set white background color android:background="@android:color/white"

Note that ripple effect will disappear if you use app:itemBackground property or in your case it's design:itemBackground="...", so just remove it.

<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:background="@android:color/white"     app:elevation="16dp"     app:itemIconTint="@drawable/nav_item_color_state"     app:itemTextColor="@drawable/nav_item_color_state"     app:menu="@menu/bottom_navigation_main" /> 

Handling enabled/disabled state:

You need to create selector file:

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:state_checked="true" android:color="@color/colorPrimary" />     <item android:color="@android:color/darker_gray"  /> </selector> 

If you want to change standard grey ripple effect change colorControlHighlight proproperty in AppTheme so it looks like following:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">     <!-- Customize your theme here. -->     <item name="colorPrimary">@color/colorPrimary</item>     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>     <item name="colorAccent">@color/colorAccent</item>     <item name="colorControlHighlight">@color/colorPrimaryRipple</item> </style> 

Use 26% alpha for colored ripples.

<color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryRipple">#423F51B5</color> 

Answer 2

1. For Shadow use elevation in your BottomNavigationView app:elevation="8dp".
2. And for Ripples Effect you just need to remove app:itemBackground and set android:background to white color like that android:background="@android:color/white"

Full example below:

<android.support.design.widget.BottomNavigationView         android:id="@+id/bottom_navigation"         android:layout_width="match_parent"         android:layout_height="56dp"         android:layout_alignParentBottom="true"         android:background="@android:color/white"         android:clickable="true"         app:elevation="8dp"         app:itemIconTint="@drawable/nav_item_color_state"         app:itemTextColor="@drawable/nav_item_color_state"         app:menu="@menu/my_navigation_items" />