android- support library BottomNavigationView not showing titles

Question

I'm using android support design widget BottomNavigationView for making my bottom navigation items. this is the result of the job :

it has 2 problems , first it doesn't show the titles under the items, the second problem I want the items to fill the with , I don't want to have free space on the navigation ,I just want them to fill the space and divide the space between items.

this is my menu code:

    <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_item1"
        android:icon="@drawable/phone"
        app:showAsAction="ifRoom"
        android:title="ارتباط" />

    <item
        android:id="@+id/action_item2"
        android:icon="@mipmap/ic_history"
        app:showAsAction="ifRoom"
        android:title="سوابق خرید" />

    <item
        android:id="@+id/action_item3"
        android:icon="@drawable/sabad"
        app:showAsAction="ifRoom"
        android:title="سبد خرید" />

    <item
        android:id="@+id/action_item4"
        android:icon="@drawable/market2"
        app:showAsAction="ifRoom"
        android:title="فروشگاه" />

</menu>

this is the xml code :

` <RelativeLayout
        android:id="@+id/activity_main"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.truiton.bottomnavigation.MainActivity">

        <FrameLayout
            android:id="@+id/frame_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/navigation"
            android:animateLayoutChanges="true">

        </FrameLayout>

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/colorPrimary"
            app:itemIconTint="#fff"
            app:itemTextColor="#F2F2F4"
            app:menu="@menu/bottom_navigation_items"/>
    </RelativeLayout>`

How can I solve this issue?

JingJoeh · Answer 1 · 2019-07-02T07:39:28.630

10

Update for design support library 28.0.0

uses app:labelVisibilityMode="labeled" in your xml.

Old answer is a workaround for support library below 28.0.0

Your first problem, from the guideline Bottom navigation

"if there are four or five actions, display inactive views as icons only"

for solution check this Android BottomNavigationView items showing without text also layout does not hiding on scroll

edited Jul 02 '19 at 07:39

answered May 29 '17 at 10:08

JingJoeh

393
4
14

4

It's strange google themselves don't honour these guidelines. Play Newsstand and Youtube app both have four actions and they show icons and title on all the action views. – ArunL Jun 14 '17 at 08:59

score 4 · Answer 2 · answered Apr 15 '19 at 09:56

To enable titles under the items use this trick. In your BottomNavigationView set parametr labelVisibilityMode to "labeled".

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="49dp"
    android:layout_gravity="bottom"
    app:elevation="5dp"
    **app:labelVisibilityMode="labeled"**
    app:itemIconTint="@drawable/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/bottom_navigation_menu" />

There are several types of title visibility:

labeled (will keep all labels visible.)
unlabeled (will show only icon)
selected (will only show the label for the selected item and shift items)
auto (will choose labeled or selected based on the number of items we have labeled for 1–3 items and selected for 3+ items)

Arash · Answer 3 · 2017-10-02T11:16:10.963

Two behaviors (not problems) are default behaviors. If i understood you correctly by "free space", this space is created by shifting animation that's a behavior of BottomNavigationView. You can override onLayout method of BottomNavigationView class then you can use the extended tag to avoiding these two. This approach also sets custom font family for BottomNavigationView if you want.

public final class ExtendedBottomNavigationView extends BottomNavigationView{
    private final Context context;
    private Typeface fontFace = null;

    public ExtendedBottomNavigationView(Context context, AttributeSet attrs){
        super(context, attrs);
        this.context = context;
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom){
        super.onLayout(changed, left, top, right, bottom);
        final ViewGroup bottomMenu = (ViewGroup)getChildAt(0);
        final int bottomMenuChildCount = bottomMenu.getChildCount();
        BottomNavigationItemView item;
        View itemTitle;
        Field shiftingMode;

        if(fontFace == null){
            fontFace = Typeface.createFromAsset(context.getAssets(), context.getString(R.string.VazirBold));
        }
        try {
            //if you want to disable shiftingMode:
            //shiftingMode is a private member variable so you have to get access to it like this:
            shiftingMode = bottomMenu.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(bottomMenu, false);
            shiftingMode.setAccessible(false);
        } catch (NoSuchFieldException e){
            e.printStackTrace();
        } catch (IllegalAccessException e){e.printStackTrace();}
        //for changing font face of item titles.
        for(int i=0; i<bottomMenuChildCount; i++){
            item = (BottomNavigationItemView)bottomMenu.getChildAt(i);
            //this shows all titles of items
            item.setChecked(true);
            //every BottomNavigationItemView has two children, first is an itemIcon and second is an itemTitle
            itemTitle = item.getChildAt(1);
            //every itemTitle has two children, first is a smallLabel and second is a largeLabel. these two are type of AppCompatTextView
            ((TextView)((BaselineLayout) itemTitle).getChildAt(0)).setTypeface(fontFace, Typeface.BOLD);
            ((TextView)((BaselineLayout) itemTitle).getChildAt(1)).setTypeface(fontFace, Typeface.BOLD);
        }
    }
}

Then use it like this:

<your.package.name.ExtendedBottomNavigationView android:id="@id/bottomMenu" style="@style/bottomMenu"/>

android- support library BottomNavigationView not showing titles

3 Answers3