Search code examples
androidmaterial-designbottomnavigationview

BottomNavigationView shows label over icon

I am creating an app that contains BottomNavigationView, but after updating the library com.google.android.material:material:1.5.0 my app shows labels over icons.

enter image description here

The layout for BottomNavigationView:

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:background="@color/white"
        android:alpha="0.9"
        app:layout_constraintBottom_toBottomOf="parent"
        app:itemIconTint="@drawable/bottom_nac_icon_color_selector"
        app:itemTextColor="@drawable/bottom_nac_icon_color_selector"
        app:menu="@menu/bottom_nav_menu"
        app:labelVisibilityMode="labeled"/>

bottom_nav_menu.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_location_on_black_24dp"
        android:title="@string/city" />

    <item
        android:id="@+id/navigation_menu"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_menu" />

</menu>

Theme contains only tint, so I won't include it here.

Is there any solution to put the labels back under the icons? Will I have to downgrade the library?

Solution

  • Upon closer examination, I found that my default application style Theme.AppCompat.DayNight.DarkActionBar was causing the problems, and by simultaneously overriding it to Theme.MaterialComponents.DayNight.DarkActionBar, including overriding the component styles from AppCompat to MaterialComponents, I fixed the problem.

    Next, I had to add

    <item name="bottomNavigationStyle">@style/NavigationViewTheme</item>

    to the default style and remove the style call directly in the component.