BottomNavigationView should look like the Youtube App

Question

I want to create a BottomNavigationView Screen like YouTube but I'm facing an issue that view is not displaying like that.

It perfectly works with three bottom menus but when I'm using more than three menus then Its Title is hiding and menus are shifted. I'm not understanding why this happening, I had tried many tricks but not solve the problem.

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/navigation" />

Java Activity:

BottomNavigationView navigation = findViewById(R.id.navigation);

// I had tried this code but not working

//   BottomNavigationMenuView menuView = (BottomNavigationMenuView) 
//   bottomNavigationView.getChildAt(0);
//            bottomNavigationView.setAnimation(null);
//            for (int i = 0; i < menuView.getChildCount(); i++) {
//                BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(i);
//                itemView.setShiftingMode(false);
//                itemView.setChecked(false);
//            }
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

Anyone, please suggest how I can achieve this.

Hi @Garg's, please read this: https://material.io/design/components/bottom-navigation.html. Hope this help! — SonhnLab, Jun 28 '18 at 08:29
And try this: https://stackoverflow.com/questions/40176244/how-to-disable-bottomnavigationview-shift-mode — SonhnLab, Jun 28 '18 at 08:30

score 0 · Answer 1 · answered Sep 04 '18 at 16:32

0

By default android makes only selected item title appearing on more than three menu items. If you do not want this to happen set BottomNavigationView XML atribute app:labelVisibility to labeled.

answered Sep 04 '18 at 16:32

Horácio Comé

11
3

score 0 · Answer 2 · answered Mar 13 '20 at 10:05

0

Add These property to your BottomNavigationView in XML.

app:labelVisibilityMode="labeled"

answered Mar 13 '20 at 10:05

Nikhil Hiran

21
2

BottomNavigationView should look like the Youtube App

2 Answers2