BottomNavigationView navigation items text displayed above icon

Question

After upgrading dependency:

'com.google.android.material:material:x.x.x'

from 1.4.0 to 1.5.0, the navigation items text has somehow changed from being anchored below the icon to on top of it:

From:

To:

Is this a feature or a bug and does this have a fix?

I do not think so . It works fine for me on 1.5.0 and 1.6.0 alpha01 — Mr.Droid, Jan 16 '22 at 09:53

score 14 · Accepted Answer · answered Feb 01 '22 at 16:10

I was facing the same problem after updating from 1.4.0 to 1.5.0, but in my case the problem was caused because I was using a theme for the BottomNavigationView that inherited from Widget.Design.BottomNavigationView:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bnv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/windowBackground"
    android:theme="@style/Widget.BottomNavigationView"
    ...
/>

After looking at the Widget.Design.BottomNavigationView xml I realised that in version 1.5.0 a minHeight attribute has been added, causing the problem affecting us.

So I added <item name="android:minHeight">0dp</item> to my custom style like this:

<style name="Widget.BottomNavigationView" parent="Widget.Design.BottomNavigationView">
    ...
    <item name="android:minHeight">0dp</item>
</style>

And the problem was solved!

score 5 · Answer 2 · answered Mar 01 '22 at 07:54

Reading the release notes of 1.5.0 I could see the Material3 theme introduction. I went over the BottomNavigation.md and then I figured it out: turns out it's needed to use the new Material3 theme instead of MaterialComponent:

<style name="Theme.Inventory" parent="Theme.Material3.Light.NoActionBar">
    ...
    <item name="bottomNavigationStyle">@style/Widget.App.BottomNavigationView</item>
</style>

<style name="Widget.App.BottomNavigationView" parent="Widget.Material3.BottomNavigationView">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.BottomNavigationView</item>
</style>

<style name="ThemeOverlay.App.BottomNavigationView" parent="">
    <item name="colorSurface">@color/shrine_blue_100</item>
    <item name="colorOnSurfaceVariant">@color/shrine_blue_900</item>
</style>

Also, I removed the android:theme="@style/MyBottomNavigationView" from the BottomNavigationView in xml.

BottomNavigationView navigation items text displayed above icon

2 Answers2

Linked