BottomNavigationView with more than 3 Items: tab title is hiding

Question

I'm using BottomNavigationView with using Android Support Design Library 25. But when I switch the tabs, the other tab's title is hiding. But there is no hiding issue actual Bottom Navigation View. But mine is hiding.

But I want to it look like that. Any idea to do that? What am I missing?

Here is my code:

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.yunus.ototakip.MainActivity">  <FrameLayout     android:id="@+id/main_container"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:layout_above="@+id/bottom_navigation"     android:layout_alignParentTop="true"> </FrameLayout>  <android.support.design.widget.BottomNavigationView     android:id="@+id/bottom_navigation"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:layout_alignParentBottom="true"     app:itemBackground="@color/colorPrimary"     app:itemIconTint="@color/beyaz"     app:itemTextColor="@color/beyaz"     app:menu="@menu/bottombar_menu" /> 

bottom_bar_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">  <item android:id="@+id/bb_menu_arac" android:enabled="true" android:icon="@drawable/icon_car" android:title="@string/araclarim" app:showAsAction="ifRoom" />  <item android:id="@+id/bb_menu_yakin" android:enabled="true" android:icon="@drawable/icon_yer" android:title="@string/yakinimdakiler" app:showAsAction="ifRoom" />   <item android:id="@+id/bb_menu_yaklasan" android:enabled="true" android:icon="@drawable/icon_takvim" android:title="@string/yaklasanlar" app:showAsAction="ifRoom" />  <item     android:id="@+id/bb_menu_ipucu"     android:enabled="true"     android:icon="@drawable/icon_ipucu"     android:title="@string/ipuclari"     app:showAsAction="ifRoom" />  </menu> 

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 or higher and just add app:labelVisibilityMode="labeled" to your BottomNavigationView XML declaration.

Hope it helps.

Answer 2

UPDATE

removeShiftMode() is no longer needed, as in support library 28.0.0-alpha1 we can now add Labels.

In XML:

<android.support.design.widget.BottomNavigationView     app:labelVisibilityMode="labeled" /> 

For programmatically change:

mBottomNavigationView.setLabelVisibilityMode(LabelVisibilityMode.LABEL_VISIBILITY_LABELED);  

For this to work: update the design support library to 28.0.0-alpha1

Here is a Good read

FOR OLDER SUPPORT LIBRARY:

in your bottom_bar_menu.xml.Change the showAsAction attribute

<item android:id="@id/menu_item" android:title="text" android:icon="@drawable/drawable_resource_name" android:showAsAction="always|withText" /> 

in build.gradle:

compile 'com.android.support:design:25.3.1' 

BOTTOM NAVIGATIONVIEW MORE THAN 3 ITEMS: use removeShiftMode() method

in BottomNavigationViewHelper.java Use:

import android.annotation.SuppressLint; import android.support.design.internal.BottomNavigationItemView; import android.support.design.internal.BottomNavigationMenuView; import android.support.design.widget.BottomNavigationView; import java.lang.reflect.Field;      public class BottomNavigationViewHelper {         @SuppressLint("RestrictedApi")         public static void removeShiftMode(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);                 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("BottomNav", "Unable to get shift mode field", e);             } catch (IllegalAccessException e) {                 Log.e("BottomNav", "Unable to change value of shift mode", e);             }         }     } 

Call it using:

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

It will disable the shift animation of the title text and enable the text to be displayed.