BottomNavigationView display both icons and text labels at all times

问题

I am using android.support.design.widget.BottomNavigationView from design support library version 25

compile 'com.android.support:design:25.0.0'  <android.support.design.widget.BottomNavigationView         android:id="@+id/bottomBar"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:layout_gravity="center"         app:itemBackground="@color/colorPrimary"         app:menu="@menu/bottom_navigation_main"         android:forceHasOverlappingRendering="true"/> 

When there are only three actions in @menu/bottom_navigation_main, it displays both icons and text labels at all times.

What is the way to display both icons and text labels at all the time when there are more than three actions.

回答1:

For anyone still looking for a solution and doesn't want to rely on third party libraries or runtime reflection, BottomNavigationView in Support Library 28/Jetpack natively supports always having text label.

This is the method you're looking for.

Or in XML, app:labelVisibilityMode="labeled"

回答2:

UPDATE FROM May 8, 2018

You can use app:labelVisibilityMode="labeled" directly in <android.support.design.widget.BottomNavigationView />

Source: https://developer.android.com/reference/com/google/android/material/bottomnavigation/LabelVisibilityMode

Don't need this below lengthy solution.

PREVIOUS ANSWER

I had some weird behavior with BottomNavigationView. When I was selecting any item/fragment in it, the fragment pushes BottomNavigationView a bit lower, so text of BottomNavigationView goes below the screen, so only icons were visible and text goes hidden on clicking of any item.

If you are facing that weird behavior then Here is the solution. Just remove

android:fitsSystemWindows="true" 

in your root layout of fragment. Just remove this and boom! BottomNavigationView will work fine, now it can be shown with text and icon. I had this in my root CoordinatorLayout of fragment.

Also don't forget to add

BottomNavigationViewHelper.removeShiftMode(bottomNavigationView); 

in your activity to disable shifting mode.

Here is that class:

public class BottomNavigationViewHelper {      @SuppressLint("RestrictedApi")     public static void removeShiftMode(BottomNavigationView view) {         //this will remove shift mode for bottom navigation view         BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);         try {             Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");             shiftingMode.setAccessible(true);             shiftingMode.setBoolean(menuView, false);             shiftingMode.setAccessible(false);             for (int i = 0; i < menuView.getChildCount(); i++) {                 BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);                 item.setShiftingMode(false);                 // set once again checked value, so view will be updated                 item.setChecked(item.getItemData().isChecked());             }          } catch (NoSuchFieldException e) {             Log.e("ERROR NO SUCH FIELD", "Unable to get shift mode field");         } catch (IllegalAccessException e) {             Log.e("ERROR ILLEGAL ALG", "Unable to change value of shift mode");         }     } } 

回答3:

It is difficult in version 25.

Try this code. But I think it's not good solution.

BottomNavigationView navigationView = (BottomNavigationView) findViewById(R.id.bottomBar); BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigationView.getChildAt(0); for (int i = 0; i < menuView.getChildCount(); i++) {     BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(i);     itemView.setShiftingMode(false);     itemView.setChecked(false); } 

回答4:

Here's a Kotlin extension function that combines @STAR_ZERO and @KishanSolanki124's solution.

fun BottomNavigationView.disableShiftMode() {     val menuView = getChildAt(0) as BottomNavigationMenuView      menuView.javaClass.getDeclaredField("mShiftingMode").apply {         isAccessible = true         setBoolean(menuView, false)         isAccessible = false     }      @SuppressLint("RestrictedApi")     for (i in 0 until menuView.childCount) {         (menuView.getChildAt(i) as BottomNavigationItemView).apply {             setShiftingMode(false)             setChecked(false)         }     } } 

To use it:

myBottomNavigation.disableShiftMode() 

回答5:

Are you want to this effect ?

If so, I recommended you to try BottomNavigationViewEx。

回答6:

in BottomNavigationView class there is a BottomNavigationMenuView field and in BottomNavigationMenuView there is a BottomNavigationItemView[] field, which is the items in the bottom bar.

Say n is the number of items, BottomNavigationMenuView will call BottomNavigationItemView.setShiftingMode(n>3) on each member of the BottomNavigationItemView[] array. This function decides the behaviour (show title always or only upon selection).

so the way to always show the titles is to try to call this method and you can use reflection to access the private fields.

    BottomNavigationView bottomNavigationView= (BottomNavigationView) findViewById(R.id.bottom_navigation);   //  get the private BottomNavigationMenuView field          Field f = null;         try {             f = bottomNavigationView.getClass().getDeclaredField("mMenuView");         } catch (NoSuchFieldException e) {             e.printStackTrace();         }         f.setAccessible(true);         BottomNavigationMenuView menuView=null;         try {              menuView = (BottomNavigationMenuView) f.get(bottomNavigationView);          } catch (IllegalAccessException e) {             e.printStackTrace();         }  //  get the private BottomNavigationItemView[]  field          try {             f=menuView.getClass().getDeclaredField("mButtons");         } catch (NoSuchFieldException e) {             e.printStackTrace();         }         f.setAccessible(true);         BottomNavigationItemView[] mButtons=null;         try {             mButtons = (BottomNavigationItemView[]) f.get(menuView);          } catch (IllegalAccessException e) {             e.printStackTrace();         }           for(int i=0;i<mButtons.length;i++){             mButtons[i].setShiftingMode(false);             mButtons[i].setChecked(true);         } 

回答7:

To show the titles all the way. Try this Kotlin code:

@SuppressLint("RestrictedApi") override fun onCreate(savedInstanceState: Bundle?) {     super.onCreate(savedInstanceState)     setContentView(R.layout.activity_ofree)      navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)      val menuView = navigation.getChildAt(0) as BottomNavigationMenuView     for (i in 0 until menuView.childCount) {         val itemView = menuView.getChildAt(i) as BottomNavigationItemView         itemView.setShiftingMode(false)         itemView.setChecked(false)     } } 

回答8:

You can use this for showing both text and icons on BottomNevigationView

app:labelVisibilityMode="labeled" 

If you are using this you will be able to view both icon and text

<android.support.design.widget.BottomNavigationView     app:labelVisibilityMode="labeled"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:id="@+id/bottom_navigation_view"     android:layout_alignParentBottom="true"     app:menu="@menu/bottom_navigation_menu"/> 

回答9:

Alternative to BottomNavigationViewEx: BottomBar

来源：https://stackoverflow.com/questions/40396545/bottomnavigationview-display-both-icons-and-text-labels-at-all-times