How to set elevation to Bottom navigation
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!
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)
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.