Elementos del menú de NavigationView con el contador a la derecha

El nuevo NavigationView en la nueva biblioteca de soporte de diseño funciona realmente bien.

Utilizan " elementos de menú " para mostrar las opciones.

Pero ¿cómo puedo mostrar un contador a la derecha del elemento de menú?

Como en esta foto:

Introduzca aquí la descripción de la imagen

O como en la aplicación de GMail .

A partir de la versión 23 de appcompat-v7 NavigationView admite las vistas de acción, por lo que es muy fácil de implementar contra usted mismo.

  1. Crear diseño de contador, es decir, menu_counter.xml :

     <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center_vertical" android:textAppearance="@style/TextAppearance.AppCompat.Body2" /> 
  2. Referencia en el menú de su cajón xml, es decir, menu/drawer.xml :

     <item ... app:actionLayout="@layout/menu_counter" /> 

Tenga en cuenta que debe utilizar el espacio de nombres de la app , no intente utilizar android .

También puede establecer manualmente la vista de acción con el método MenuItem.setActionView() .

  1. Buscar elemento de menú y establecer el contador:

     private void setMenuCounter(@IdRes int itemId, int count) { TextView view = (TextView) navigationView.getMenu().findItem(itemId).getActionView(); view.setText(count > 0 ? String.valueOf(count) : null); } 

Tenga en cuenta que tendrá que utilizar MenuItemCompat si tiene que admitir versiones de Android 2.x.

Mi solución estaba pasando un SpannableString con un fondo diferente como nuevo título del MenuItem.

Sé que no es la mejor solución y no está bien alineado, pero funciona como un contador bastante bien. Algo como esto:

 NavigationView navigation = (NavigationView)findViewById(R.id.navigation); Menu menuNav = navigation.getMenu(); MenuItem element = menuNav.findItem(R.id.item5); String before = element.getTitle().toString(); String counter = Integer.toString(5); String s = before + " "+counter+" "; SpannableString sColored = new SpannableString( s ); sColored.setSpan(new BackgroundColorSpan( Color.GRAY ), s.length()-(counter.length()+2), s.length(), 0); sColored.setSpan(new ForegroundColorSpan( Color.WHITE ), s.length()-(counter.length()+2), s.length(), 0); element.setTitle(sColored); 

Para mejorar el contador, aquí puedes encontrar una buena respuesta para ajustar las esquinas redondeadas

Ejemplo:

Introduzca aquí la descripción de la imagen

En cuanto a la fuente de NavigationView , actualmente no admiten ninguna representación personalizada de los elementos de menú (consulte NavigationMenuPresenter y NavigationMenuAdapter ). Esperemos que expongan más funcionalidades pronto como quiero establecer una fuente personalizada en los elementos del menú, pero no puedo sin usar la reflexión.

Hay una gran biblioteca que puede hacer eso – https://github.com/mikepenz/MaterialDrawer .

Paso 1 : Identifique el elemento de grupo y agregue "app: actionViewClass = android.widget.TextView" como se indica a continuación:

 <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <group android:checkableBehavior="single"> <item android:id="@+id/nav_recorder" app:actionViewClass="android.widget.TextView" android:icon="@drawable/ic_menu_gallery" android:title="Gallery" /> <item android:id="@+id/nav_night_section" app:actionViewClass="android.widget.TextView" android:icon="@drawable/ic_menu_slideshow" android:title="Slideshow" /> </group> 

Paso 2: Declare el ítem de menú del Cajón de Navegación e inicialice el ítem con el valor de la insignia

 //Create these objects above OnCreate()of your main activity TextView recorder,nightSection; //These lines should be added in the OnCreate() of your main activity recorder =(TextView) MenuItemCompat.getActionView(navigationView.getMenu(). findItem(R.id.nav_recorder)); recordSection=(TextView) MenuItemCompat.getActionView(navigationView.getMenu(). findItem(R.id.nav_night_section)); //This method will initialize the count value initializeCountDrawer(); 

Paso 3: initializeCountDrawer () se puede llamar donde sea necesario. También se puede utilizar para actualizar el valor de recuento o insignia en el elemento de menú del cajón de navegación.

 private void initializeCountDrawer(){ //Gravity property aligns the text recorder.setGravity(Gravity.CENTER_VERTICAL); recorder.setTypeface(null, Typeface.BOLD); recorder.setTextColor(getResources().getColor(R.color.colorAccent)); recorder.setText("99+"); slideshow.setGravity(Gravity.CENTER_VERTICAL); slideshow.setTypeface(null,Typeface.BOLD); slideshow.setTextColor(getResources().getColor(R.color.colorAccent)); //count is added slideshow.setText("7"); } 
  • agrega onClickListener al encabezado de vista de navegación usando la biblioteca de soporte de diseño de android
  • Uso de NavigationView desde Android Design Support Library
  • ¿Cómo diseñar el NavigationView de la biblioteca de soporte de diseño?
  • ¿Cómo puedo eliminar el relleno superior innecesario de la vista de navegación?
  • Agregar hijo a un MenuItem dentro de un grupo en un NavigationView
  • Cambiar la separación entre el grupo de encabezados y el primer elemento
  • NavigationView no está visible pero el clic de artículo está funcionando
  • Android - Navegación Ver el color del fondo del menú del elemento
  • Cómo dar color de texto personalizado para un solo elemento de menú en un NavigationView?
  • ¿Cómo crear un divisor simple en el nuevo NavigationView?
  • Configuración del relleno de la barra de estado en NavigationView en Android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.