Android Material Component BottomNavigation top shadow different when placed at bottom than when in center

Question

I'm trying to add more elevation to my navigation bar, when I change the elevation with the bar on a layout_gravity center it shadows as I would expect it, but when I anchor it to the bottom the elevation is overriden or the shadow is reset.

Layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">


    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:elevation="48dp"
            android:background="@android:color/background_light"
            app:itemIconTint="@android:color/primary_text_light"
            app:itemTextColor="@android:color/primary_text_light"
            app:menu="@menu/navbar_menu" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Example of how it looks:

Answer 1

It's not that the shadow is overwritten or reset, but it's actually a misunderstanding of shadows in Material Design.

In Material Design, the shadows you see when you change the elevation of a View is actually calculated based on how shadows appear in real world objects.

In reality, shadows don't come from no where. Instead, they appear when there's a light source shining towards an object. If you look at this link, you'll see that Google mentions that the shadows in Material Design are created from two sources of virtual light. One source is known as Key Lights and the other source is known as Ambient Lights.

The Key Light creates a sharper and more directional shadow, which is commonly seen by the deeper and darker shadow on the bottom of a View, through having it's virtual light shining down from the top of the screen.

The Ambient Light creates a more softer shadow all around the View, through having it's virtual light shining down from the center of the screen. This is why you'll still see a lighter shadow for the top side of a View. It's because there's not just a light source shining from the top, but also a light source shining from the center of the screen.

Here's an image of how the light sources look:

However, that's all there is in terms of light sources. There's no light source shining from the bottom of the screen, so when your BottomNavigationView is placed on the bottom, you'll only see a very subtle shadow on the top edge of the BottomNavigationView. A shadow that's so faint, it's almost not there. This is considered normal.

When you moved the BottomNavigationView to the center of the screen, you're now placing it more closer to the other two light sources, therefore, you're getting a more obvious shadow.

Google does warn against purposely adding a deeper shadow to Views, since this actually makes the layout look unnatural. In other words, it doesn't mimic how real shadows are in reality. So, don't purposely try to add a deeper top shadow to the BottomNavigationView, since it'll look strange when considering the natural shadows of your other Views.

You could argue that you want to place a 3rd light source shining from the bottom of the screen, but don't forget that this will also have direct effects to all the other Views on the screen. Just imagine having a deeper darker shadow on both the top and bottom sides of every View... it's not exactly as pleasant or natural as the current implementation that has a deeper darker shadow on just the bottom.

Also, keep in mind that the Shadows in Material Design are created based on two virtual light sources. Therefore, don't assume that Elevation is the only element that affects how a shadow appears. The View's size, it's elevation, it's position on the screen, and possibly other factors could all be deciding factors on how a shadow appears for your View.

Bottomline is, don't try to force shadows on elements because it might look more nice with a richer shadow. It might cause it to look unnatural which goes against Material Design and some users can pick up on that.