Remove BottomNavigationView labels

android android-support-library androiddesignsupport bottomnavigationview

60,453

Solution 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.

Solution 2

Would you want to this style ?

If so, I recommend you try BottomNavigationViewEx.

Solution 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

Solution 4

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());
    }
}

Solution 5

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.

View more solutions

60,453