CODEWITHSUNDEEP
androidmaterial-designbottomnavigationview
Javed Khatri
Javed Khatri

Reputation: 739

How do I add elevation (shadow) to my BottomNavigationView. It doesn't come by default

I tried setting elevation from xml and programmatically both. But nothing works.enter image description here

Upvotes: 20

Views: 14258

Answers (5)

Abed
Abed

Reputation: 5157

if you're not using CoordinateLayout with BottomNavigationBar you could just wrap your navigation with a CardView or MaterialCardView and set cardElevation to what you want and cardCornerRadius to zero.

Upvotes: 2

diAz
diAz

Reputation: 506

For those who are interested, I also managed to get some shadow using a background drawable. However, I had to use the color white otherwise it doesn't work...

It can be useful if you want to do angles like I do.

drawable/gnt_rounded_corners_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="@android:color/white"/>

  <corners android:bottomRightRadius="0dp"
      android:bottomLeftRadius="0dp"
      android:topLeftRadius="16dp"
      android:topRightRadius="16dp" />
</shape>

and inside layout/main_activity.xml

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/gnt_rounded_corners_shape"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu"
        android:elevation="8dp"
        />

result :

enter image description here

Upvotes: 1

M-Wajeeh
M-Wajeeh

Reputation: 17284

This is the only solution that worked for me:

val background = bottomNavigation.background
if (background is MaterialShapeDrawable) {
    background.shadowCompatibilityMode = SHADOW_COMPAT_MODE_ALWAYS
}

as suggested here: https://issuetracker.google.com/issues/124153644#comment2

Upvotes: 1

pgentili
pgentili

Reputation: 659

It only works if you set white as android:background in the BottomNavigationView.

This is my code and it's working:

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@color/white"
    app:elevation="8dp"
    app:itemIconTint="@color/bottom_color_state"
    app:itemTextColor="@color/bottom_color_state"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.52"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_navigation_main" />

Upvotes: 36

Javed Khatri
Javed Khatri

Reputation: 739

I got the solution. You need to add background attribute along with elevation else it wont show the shadow.

Upvotes: 3

Related Questions