Quitar etiquetas BottomNavigationView


82

Google lanzó una nueva biblioteca de soporte v25 con BottomNavigationView

ingrese la descripción de la imagen aquí

¿Hay alguna forma de eliminar las etiquetas de los artículos?


1
¿Intentó eliminar la titles de los menús <item>?
Mike M.

8
Después de eliminar los títulos, hay un relleno adicional debajo de los iconos. Agregar layout_marginBottom="-16dp"eliminará este relleno pero hará que toda la vista sea más pequeña.
dzikovskyy

En lugar de establecer un margen, puede establecer una altura personalizada y agregar un poco de relleno adicional en la parte superior. De esa forma puede centrar los iconos.
Bolling

4
Lo arreglé así: android:paddingTop="8dp" android:layout_marginBottom="-8dp" Esto evita que la barra se haga más pequeña
Palm

Respuestas:


198

Espero no llegar demasiado tarde a la fiesta aquí.

Pero a partir de Design Support Library 28.0.0-alpha1 puede usar la propiedad

app:labelVisibilityMode="unlabeled"

BottomNavigationView sin etiquetas

también puede utilizar otros valores "automático", "etiquetado" y "seleccionado".


¿Qué biblioteca de apoyo? v7 o diseño?
Sagar Maiyad

biblioteca de soporte de diseño 28.0.0
Abdul-Aziz-Niazi

característica más pendiente.
bikram

1
¿En qué clase escribes esto?
Explorex

1
@Explorex Esta es la vista de navegación inferior de Android y los atributos que mencioné son atributos xml de dicha clase utilizada en la etiqueta xml de dicha vista. también puedes usarlo en el código developer.android.com/reference/com/google/android/material/…
Abdul-Aziz-Niazi

21

¿Quieres este estilo?

Si es así, te recomiendo que pruebes BottomNavigationViewEx .


No me gusta esta biblioteca. hace que la posición del icono cambie cuando se hace clic y no hay forma de fijar la posición del icono cuando se hace clic.
Dika

18

Desafortunadamente, esta primera versión de BottomNavigationView vino con muchas limitaciones. Y por ahora no puede eliminar los títulos simplemente usando la API de diseño de soporte. Entonces, para resolver esta limitación mientras Google no la implementa, puede hacer (usando la reflexión):

1. Establezca los títulos vacíos en el archivo bottom_navigation_menu.xml.

2. Amplía 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. Agregue al layout.xml este customView

Para más detalles, he implementado esto en Github.


No es necesario usar la reflexión, puede obtener cada uno BottomNavigationItemViewllamando findViewById()con los ID de los elementos del menú (como lo hace @NikolaDespotoski en su respuesta ).
Fred Porciúncula

1
Apoyan la eliminación de etiquetas ahoraapp:labelVisibilityMode="unlabeled"
Amjad Alwareh

13

1. Establecer android:title="";en menú / abc.xml

2. Cree la siguiente clase de ayuda que utiliza la reflexión

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. En su actividad principal, agregue estas líneas:

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

11

Enfoque sin reflejos:

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

1
¿Qué tal si quiero eliminar el ícono en lugar del texto
Merhawi Fissehaye

¿Cómo puedo llamar a esto en la actividad principal donde ya existe el código BottomNavigation predeterminado? @NikolaDespotoski
TiagoIB

@TiagoIB simplemente haga que el método sea estático y muévalo a otra clase. O manténgalo privado y llámelo con los argumentos especificados.
Nikola Despotoski

Disculpe, pero ¿cómo podría insertarlo en mi código? prntscr.com/he03j7 @NikolaDespotoski
TiagoIB

6

Este es un arreglo temporal. Solo agregue: app:itemTextColor="@android:color/transparent"eso lo hará cualquiera que sea el color de fondo, apareciendo deshabilitado. Hace que el icono parezca elevado.


2

Quería eliminar tanto la animación de turno como las etiquetas y ninguna de las soluciones aquí funcionó bien para mí, así que aquí está la que construí en base a todo lo que aprendí aquí:

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

Simplemente agregue este método a su personalizado BottomNavigationViewy llámelo pasando los identificadores de los elementos del menú.


1

Recomendaría implementarlo usted mismo como sanf0rd dio en su respuesta . Pero AppCompatImageViewno me funciona. Lo he cambiado a ImageView. Y cambió getChildAtafindViewById .

También oculto todas las etiquetas de los elementos no seleccionados.

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);
        }
    }
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.