4

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?

Honza Rössler
  • 332
  • 3
  • 11

1 Answers1

3

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.

Honza Rössler
  • 332
  • 3
  • 11
  • I'm facing the same issue, but cannot understand what you have done to fix that. My theme is `Theme.MaterialComponents.Light.NoActionBar`. Have you added `bottomNavigationStyle` to your activity's theme? What's the `NavigationViewTheme` precisely? – azizbekian Feb 28 '22 at 12:24
  • Yes, I added `bottomNavigationStyle` to the application style, and `BottomNavigationView` style only contains a change in text color, so I don't show it. At the same time, the style for this view is extended by MaterialComponent. – Honza Rössler Mar 01 '22 at 09:39
  • Thanks. I fixed the issue [as such](https://stackoverflow.com/a/71305286/1083957). – azizbekian Mar 01 '22 at 10:31