Remove BottomNavigationView labels

Question

Google released new support library v25 with BottomNavigationView

is there any way to remove items labels ?

Dunton

Did you try removing the titles from the menu <item>s? – Gibby

After removing titles there is extra padding below icons. Adding layout_marginBottom="-16dp" will remove this padding but will make all the view smaller. – Banta

You can instead of setting margin, set custom height and add some extra padding to the top. In that way you can center the icons. – Bargeman

I just fixed it like this: android:paddingTop="8dp" android:layout_marginBottom="-8dp" This prevents the bar from getting smaller – Hyetography

Answer 1

I hope I am not too late to the party here.

But as of Design Support Library 28.0.0-alpha1 you can use the property

app:labelVisibilityMode="unlabeled"

you can use other values "auto", "labeled" and "selected" as well.

Pains

which support library? v7 or design? – Chartier

design support library 28.0.0 – Pains

In what class do you write this in? – Alisa

@Alisa This is android's bottom navigation view and the attributes I mentioned are xml attributes of the said class used in the said view's xml tag. you can use it in code too developer.android.com/reference/com/google/android/material/… – Pains

can we change position of text and icon ? i want texts besides icon – Leandra

Answer 2

Would you want to this style ?

If so, I recommend you try BottomNavigationViewEx.

Overweigh

I dont like this library. it makes icon position changed when clicked and no way to make the icon position fixed when clicked. – Antietam

Answer 3

Unfortunately this first version of BottomNavigationView came with a lot of limitations. And for now you can't remove the titles just using the support design API. So to solve this limitation while google doesn't implement it, you can do (using reflection):

1. Set the titles empty in from bottom_navigation_menu.xml file.

2. Extends the BottomNavigationView:

    public class MyBottomNavigationView extends BottomNavigationView {

      public MyBottomNavigationView(Context context, AttributeSet attrs) {
          super(context, attrs);
          centerMenuIcon();
      }

      private void centerMenuIcon() {
          BottomNavigationMenuView menuView = getBottomMenuView();

          if (menuView != null) {
              for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView menuItemView = (BottomNavigationItemView) menuView.getChildAt(i);

                AppCompatImageView icon = (AppCompatImageView) menuItemView.getChildAt(0);

                FrameLayout.LayoutParams params = (LayoutParams) icon.getLayoutParams();
                params.gravity = Gravity.CENTER;

                menuItemView.setShiftingMode(true);
              }
          }
      }

      private BottomNavigationMenuView getBottomMenuView() {
          Object menuView = null;
          try {
              Field field = BottomNavigationView.class.getDeclaredField("mMenuView");
              field.setAccessible(true);
              menuView = field.get(this);
          } catch (NoSuchFieldException | IllegalAccessException e) {
              e.printStackTrace();
          }

          return (BottomNavigationMenuView) menuView;
      }
    }

3. Add to the layout.xml this customView

For more details I have implemented this on Github

Brei

No need to use reflection, you can get each BottomNavigationItemView by calling findViewById() with the menu items ids (just like @NikolaDespotoski is doing in his answer). – Regulate

They support removing labels now app:labelVisibilityMode="unlabeled" – Eire

Answer 4

1. Set android:title=""; in menu/abc.xml

2. Create the below helper class which is using reflection

import android.support.design.internal.BottomNavigationMenuView;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.widget.AppCompatImageView;
import android.util.Log;
import android.view.Gravity;
import android.widget.FrameLayout;

import java.lang.reflect.Field;

public class BottomNavigationViewHelper {
    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);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                item.setPadding(0, 15, 0, 0);
                // 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);
        }
    }
} 

3. In your main activity, add these lines:

mBottomNav = (BottomNavigationView) findViewById(R.id.navigation);
BottomNavigationViewHelper.disableShiftMode(mBottomNav);

Conductance

Answer 5

Reflectionless approach:

private void removeTextLabel(@NonNull BottomNavigationView bottomNavigationView, @IdRes int menuItemId) {
    View view = bottomNavigationView.findViewById(menuItemId);
    if (view == null) return;
    if (view instanceof MenuView.ItemView) {
        ViewGroup viewGroup = (ViewGroup) view;
        int padding = 0;
        for (int i = 0; i < viewGroup.getChildCount(); i++) {
            View v = viewGroup.getChildAt(i);
            if (v instanceof ViewGroup) {
                padding = v.getHeight();
                viewGroup.removeViewAt(i);
            }
        }
        viewGroup.setPadding(view.getPaddingLeft(), (viewGroup.getPaddingTop() + padding) / 2, view.getPaddingRight(), view.getPaddingBottom());
    }
}

Sabatier

How about if I want to remove icon instead of the text – Pacification

How can I call this in the main activity where the default BottomNavigation code already exists? @NikolaDespotoski – Trefler

@Trefler just make the method static and move it to some other class. Or keep it private and call it with arguments specified. – Sabatier

Excuse me, but how could I insert it in my code?prntscr.com/he03j7 @NikolaDespotoski – Trefler

Answer 6

This is a temporary fix. Just add: app:itemTextColor="@android:color/transparent" That'll make it whatever the background color is, appearing disabled. It does make the icon look elevated.

Axel

Answer 7

I wanted to remove both the shift animation and the labels and none of the solutions here worked well for me, so here's the one I built based on everything I learned here:

public void removeLabels(@IdRes int... menuItemIds) {
    getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
        @Override public boolean onPreDraw() {
            getViewTreeObserver().removeOnPreDrawListener(this);

            // this only needs to be calculated once for an unchecked item, it'll be the same value for all items
            ViewGroup uncheckedItem = findFirstUncheckedItem(menuItemIds);
            View icon = uncheckedItem.getChildAt(0);
            int iconTopMargin = ((LayoutParams) uncheckedItem.getChildAt(0).getLayoutParams()).topMargin;
            int desiredTopMargin = (uncheckedItem.getHeight() - uncheckedItem.getChildAt(0).getHeight()) / 2;
            int itemTopPadding = desiredTopMargin - iconTopMargin;

            for (int id : menuItemIds) {
                ViewGroup item = findViewById(id);
                // remove the label
                item.removeViewAt(1);
                // and then center the icon
                item.setPadding(item.getPaddingLeft(), itemTopPadding, item.getPaddingRight(),
                        item.getPaddingBottom());
            }

            return true;
        }
    });
}

@SuppressLint("RestrictedApi")
private ViewGroup findFirstUncheckedItem(@IdRes int... menuItemIds) {
    BottomNavigationItemView item = findViewById(menuItemIds[0]);
    int i = 1;
    while (item.getItemData().isChecked()) {
        item = findViewById(menuItemIds[i++]);
    }
    return item;
}

Just add this method to your custom BottomNavigationView and call it passing the ids of the menu items.

Goutweed

Answer 8

I'd recommend to implement it by yourself as sanf0rd gave in his answer. But AppCompatImageView is not working for me. I've changed it to ImageView. And changed getChildAt to findViewById.

Also I hide all labels of unselected items.

private void centerMenuIcon() {
    BottomNavigationMenuView menuView = getBottomMenuView();
    if (menuView != null) {
        for (int i = 0; i < menuView.getChildCount(); i++) {
            BottomNavigationItemView menuItemView = (BottomNavigationItemView) menuView.getChildAt(i);
            TextView smallText = (TextView) menuItemView.findViewById(R.id.smallLabel);
            smallText.setVisibility(View.INVISIBLE);
            //TextView largeText = (TextView) menuItemView.findViewById(R.id.largeLabel);
            ImageView icon = (ImageView) menuItemView.findViewById(R.id.icon);
            FrameLayout.LayoutParams params = (LayoutParams) icon.getLayoutParams();
            params.gravity = Gravity.CENTER;
            menuItemView.setShiftingMode(true);
        }
    }
}

Slash