BottomNavigationView title hides when switching tab

Question

On select of My bookings only my is visible and hiding bookings. Below is my bottom navigation in XML:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <FrameLayout
        android:id="@+id/frame_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/navigation"
        android:layout_below="@+id/rl_custom_toolbar"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:labelVisibilityMode="labeled"
        android:background="?android:attr/windowBackground"
        app:itemBackground="@color/colorWhite"
        app:itemTextAppearanceActive="@style/itemTextAppearanceActive"
        app:itemTextAppearanceInactive="@style/itemTextAppearanceInactive"
        android:foreground="?attr/selectableItemBackground"
        app:menu="@menu/navigation"/>

</RelativeLayout>

These are my navigation menus xml code:

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

    <item
        android:id="@+id/nav_home"
        android:icon="@mipmap/tab_home_normal"
        android:title="Home" />

    <item
        android:id="@+id/nav_message"
        android:icon="@mipmap/tab_message_normal"
        android:title="Message" />

    <item
        android:id="@+id/nav_search"
        android:icon="@mipmap/tab_search_normal"
        android:title="Search" />

    <item
        android:id="@+id/nav_bookings"
        android:icon="@mipmap/tab_my_booking_normal"
        android:title="My Bookings" />

    <item
        android:id="@+id/nav_profile"
        android:icon="@mipmap/tab_account_normal"
        android:title="Profile" />

</menu>

I have tried one solution of layout behaviour scrolling to bottom navigation but it's not working for me. Only works fine if I shorten the string My Bookings to Bookings or I keep label visibility mode 'selected'. But that is not my requirement. I want the same label string and all label visible.

Any help would be appreciable please.

Answer 1

Add these to your styles.xml to change the text size of labels when they are active and inactive:

<dimen name="design_bottom_navigation_text_size" tools:override="true">12sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>