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.
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?
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.