BottomNavigationView with more than 3 Items: tab title is hiding

Question

I\'m using BottomNavigationView with using Android Support Desing Library 25. But when I switch the tabs, the other tab\'s title is hiding. But there is no hiding issue actu

Answer 1

The solution using reflection doesn't work anymore because the field mShiftingMode was removed.

There's an easy way to do it now: Use Support Library 28 and just add app:labelVisibilityMode="labeled" to your BottomNavigationView XML declaration.

Hope it helps.

Answer 2

Create Class BottomNavigationViewHelper

import android.annotation.SuppressLint;
import android.support.design.internal.BottomNavigationItemView;
import android.support.design.internal.BottomNavigationMenuView;
import android.support.design.widget.BottomNavigationView;
import android.util.Log;
import java.lang.reflect.Field;
public class BottomNavigationViewHelper {
    @SuppressLint("RestrictedApi")
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
if(menuView.getChildCount()<6)
           {
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
         }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}   

Call

    BottomNavigationView bottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_navigation);
    BottomNavigationViewHelper.disableShiftMode(bottomNavigationView); 

Answer 3

I pretty much used rafsanahmad007 answer but translate it to Kotlin. Let me share it for the future wanderers

@SuppressLint("RestrictedApi")
fun BottomNavigationView.disableShiftMode() {
    val menuView = this.getChildAt(0) as BottomNavigationMenuView
    try {
        val shiftingMode = menuView::class.java.getDeclaredField("mShiftingMode")
        shiftingMode.setAccessible(true)
        shiftingMode.setBoolean(menuView, false)
        shiftingMode.setAccessible(false)
        for (i in 0..(menuView.childCount - 1)) {
            val item = menuView.getChildAt(i) as BottomNavigationItemView
            item.setShiftingMode(false)
            // set once again checked value, so view will be updated
            item.setChecked(item.getItemData().isChecked())
        }
    } catch (e: NoSuchFieldException) {
        Timber.e("Unable to get shift mode field")
    } catch (e: IllegalAccessException) {
        Timber.e("Unable to change value of shift mode")
    }
}

Answer 4

One thing to note even though it does not apply in this case.

This pattern can be used when you have between 3 and 5 top-level destinations to navigate to.

To enable the icon title to display do the following:

1. Make sure your menu (bottom_navigation_menu) item XML is structured as follows:-

   <item
       android:id="@+id/action_home"
       android:enabled="true"
       android:icon="@drawable/ic_action_home"
       android:title="HOME"
       app:showAsAction="ifRoom"/>
   
   <item
       android:id="@+id/action_favourites"
       android:enabled="true"
       android:icon="@drawable/ic_action_favourite"
       android:title="FAVOURITES"
       app:showAsAction="ifRoom"/>
   
   <item
       android:id="@+id/action_basket"
       android:enabled="true"
       android:icon="@drawable/ic_action_basket"
       android:title="BASKET"
       app:showAsAction="ifRoom"/>
   

2. Add the following to the BottomNavigationView code app:labelVisibilityMode="labeled"

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@android:color/white"
    app:itemIconTint="@android:color/black"
    app:itemTextColor="@android:color/black"
    app:menu="@menu/bottom_navigation_menu"
    app:labelVisibilityMode="labeled"/>