Search code examples
androidandroid-xmlbottomnavigationviewmaterial-components-androidandroid-bottomnavigationview

how can i keep showing bottom navigation menu title in Android?


I have 5 icons in Bottom Navigation View, and when I click the menu, I can see the menu's title, and if i click another one, the previous one's title gets disappeared. I want to keep showing all the menu's title in XML. How can I do it?

this is my code in acivity's XML.

 <androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNV"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/light_gray"
        app:itemIconTint="@color/black"
        app:itemTextColor="@color/black"
        app:menu="@menu/bottom_navigation_menu"/>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

and this is a menu resource file.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/bottom_menu_home"
    android:enabled="true"
    android:icon="@drawable/bottom_home_inactive"
    android:title="@string/bottom_menu_home" />

<item
    android:id="@+id/bottom_menu_search"
    android:enabled="true"
    android:icon="@drawable/bottom_search_inactive"
    android:title="@string/bottom_menu_search" />

<item
    android:id="@+id/bottom_menu_message"
    android:enabled="true"
    android:icon="@drawable/bottom_message_inactive"
    android:title="@string/bottom_menu_message" />

<item
    android:id="@+id/bottom_menu_reservation"
    android:enabled="true"
    android:icon="@drawable/bottom_reservation_inactive"
    android:title="@string/bottom_menu_reservation" />

<item
    android:id="@+id/bottom_menu_myInfo"
    android:enabled="true"
    android:icon="@drawable/bottom_myinfo_inactive"
    android:title="@string/bottom_menu_myInfo" />

Solution

  • Use the app:labelVisibilityMode attribute:

    <com.google.android.material.bottomnavigation.BottomNavigationView
        app:labelVisibilityMode="labeled"
        ../>
    

    The default behavior is auto: Label behaves as labeled when there are 3 items or less, or selected when there are 4 items or more.