Cómo configurar el recuento de notificaciones no leídas en NavigationView de DrawerLayout?
He creado un NavigationView dentro de DrawerLayout usando la Biblioteca de soporte de diseño de Android
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <!-- other views --> <android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/my_navigation_items" /> </android.support.v4.widget.DrawerLayout>
My_navigation_items.xml
- Cómo dar color de texto personalizado para un solo elemento de menú en un NavigationView?
- DrawerLayout con NavigationView - no mostrar el efecto de rizo en el clic
- ¿Cómo puedo cambiar el color del icono de la hamburguesa ActionBar?
- agrega onClickListener al encabezado de vista de navegación usando la biblioteca de soporte de diseño de android
- Horarios de reciclaje en DrawerLayout
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/bookmarks_drawer" android:icon="@drawable/ic_drawer_bookmarks" android:title="@string/bookmarks" /> <item android:id="@+id/alerts_drawer" android:icon="@drawable/ic_drawer_alerts" android:title="@string/alerts" /> <item android:id="@+id/settings_drawer" android:icon="@drawable/ic_drawer_settings" android:title="@string/settings" /> </group> </menu>
Ahora, quiero establecer un contador de notificaciones no leído para cada elemento de NavigationView
como la imagen de abajo:
Cómo configurar el contador de notificaciones no leído en el elemento de NavigationView
?
- Cómo agregar un elemento a un grupo de menús en NavigationView
- ¿Cómo personalizar el fondo del elemento y el color del texto del elemento dentro de NavigationView?
- ¿Cómo desmarcar los elementos seleccionados en la vista de navegación?
- NavigationView selecciona el elemento seleccionado como
- NavigationView y diseño personalizado
- Cómo configurar la tipografía personalizada en los elementos de NavigationView?
- Error de lanzamiento de NavigationView: No se encontró ningún identificador de recurso para el atributo 'menu' en el paquete
- Cómo obtener el ID de submenú en la vista de navegación
Respuesta actualizada:
El uso de la app:actionLayout
con la biblioteca de soporte 23.1.1 o superior admite el diseño personalizado como se muestra a continuación.
Cree su diseño de contador personalizado como a continuación.
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" />
Hacer referencia a ello en el elemento de menú del cajón en xml.
Menu / drawer.xml :
<item android:id="@+id/navigation_drawer_item_1" android:icon="@drawable/ic_menu_1" android:title="@string/navigation_drawer_item_1" 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()
.
Buscar el elemento de menú y establecer el contador como el siguiente código:
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
Respuesta anterior (Para versiones anteriores):
Resuelto con ListView
dentro de NavigationView
como código …
<android.support.design.widget.NavigationView android:id="@+id/my_courses_nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/nav_header" > <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="150dp" > <!-- Give layout margin top according to "headerLayout" height --> <ListView android:id="@+id/left_drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" android:cacheColorHint="@android:color/transparent" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp" /> </FrameLayout> </android.support.design.widget.NavigationView>
En el elemento de la lista de activación de la …
private final String[] mMenuTitles = { getResources().getString(R.string.bookmarks), getResources().getString(R.string.alerts), getResources().getString(R.string.settings) }; private final int[] mMenuIconId = { R.drawable.ic_drawer_bookmarks, R.drawable.ic_drawer_alerts, R.drawable.ic_drawer_settings }; ListView mDrawerList = (ListView) findViewById(R.id.left_drawer); mDrawerList.setOnItemClickListener(new DrawerItemClickListener()); private ArrayList<SlideMenuItem> drawerItemList = new ArrayList<SlideMenuItem>(); for( int i = 0; i < mMenuTitles.length; i++ ) { SlideMenuItem item = new SlideMenuItem(); item.setTitle(mMenuTitles[i]); item.setIconID(mMenuIconId[i]); // item..setUnread(5) //set or update unread count & notify dataset changed to adapter drawerItemList.add(item); } MenuAdapter mMenuAdapter = new MenuAdapter( MyCoursesActivity.this, R.layout.drawer_list_item, drawerItemList); mDrawerList.setAdapter(mMenuAdapter);
El oyente de clics para ListView en el cajón de navegación …
private class DrawerItemClickListener implements ListView.OnItemClickListener { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { try { mDrawerLayout.closeDrawers(); SlideMenuItem item = (SlideMenuItem) parent.getItemAtPosition(position); switch (item.getIconId()) { case R.drawable.ic_drawer_bookmarks: { } break; case R.drawable.ic_drawer_alerts: { } break; case R.drawable.ic_drawer_settings: { } break; default: { } break; } } catch (Exception e) { } } }
MenuAdapter..java
public class MenuAdapter extends ArrayAdapter<SlideMenuItem> { private Activity activity; private List<SlideMenuItem> itemList; private SlideMenuItem item; private int row; public MenuAdapter(Activity act, int resource, List<SlideMenuItem> arrayList) { super(act, resource, arrayList); this.activity = act; this.row = resource; this.itemList = arrayList; } @Override public View getView(final int position, View convertView, ViewGroup parent) { View view = convertView; ViewHolder holder; if (view == null) { LayoutInflater inflater = (LayoutInflater) activity .getSystemService(Context.LAYOUT_INFLATER_SERVICE); view = inflater.inflate(row, null); holder = new ViewHolder(); holder.tvTitle = (TextView) view.findViewById(R.id.menu_title); holder.imgView = (ImageView) view.findViewById(R.id.menu_icon); holder.tvUnread = (TextView) view.findViewById(R.id.unread_count); view.setTag(holder); } else { holder = (ViewHolder) view.getTag(); } if ((itemList == null) || ((position + 1) > itemList.size())) return view; item = itemList.get(position); holder.tvTitle.setText(item.getTitle()); holder.imgView.setImageResource(item.getIconId()); if( item.getUnreadCount() > 0 ) { holder.tvUnread.setVisibility(View.VISIBLE); holder.tvUnread.setText(item.getUnread()); if( MyCoursesActivity.DRAWER_MENU_ALERTS_POSITION == position ) { holder.tvUnread.setBackgroundResource(R.drawable.round_unread_count_bg_red); } else { holder.tvUnread.setBackgroundResource(R.drawable.round_unread_count_bg_green); } } else { holder.tvUnread.setVisibility(View.GONE); } return view; } public class ViewHolder { public TextView tvTitle; public ImageView imgView; public TextView tvUnread; } }
Drawer_list_item.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RelativeLayout android:id="@+id/drawar_list_view" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/menu_icon" android:layout_width="20dp" android:layout_height="20dp" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:gravity="center_vertical" android:src="@drawable/ic_drawer" /> <TextView android:id="@+id/menu_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toLeftOf="@+id/unread_count" android:layout_toRightOf="@+id/menu_icon" android:minHeight="?attr/listPreferredItemHeightSmall" android:paddingLeft="16dp" android:paddingRight="16dp" android:text="About Us" android:gravity="center_vertical" android:textAppearance="?android:attr/textAppearanceSmall" android:textColor="@android:color/black" /> <TextView android:id="@+id/unread_count" android:layout_width="20dp" android:layout_height="20dp" android:layout_alignParentRight="true" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:gravity="center" android:text="99+" android:textColor="@android:color/white" android:textSize="10sp" android:visibility="gone" />
SlideMenuItem.java
public class SlideMenuItem { private Bitmap icon; private String title; private String unread; private int iconID; public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public Bitmap getIcon() { return icon; } public void setIcon(Bitmap icon) { this.icon = icon; } public int getIconId() { return iconID; } public void setIconID(int icon) { this.iconID = icon; } public String getUnread() { return unread; } public int getUnreadCount() { int count = Flinnt.INVALID; try { if( null != unread ) { count = Integer.parseInt(unread); } } catch (Exception e) { } return count; } public void setUnread(String unread) { this.unread = unread; } }
NavigationView
está diseñado para ser una manera fácil de implementar un cajón de navegación básico que cumpla con las directrices de diseño del material.
Si desea algo más que un cajón básico de navegación (es decir, uno con elementos de navegación de texto y un encabezado opcional), tendrá que crear su propio diseño para su cajón de navegación.
Le sugeriría que quite el NavigationView y agregue los elementos del cajón de navegación como un fragmento, es decir, en el archivo DarawerLayout
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <LinearLayout
<fragment android:id = "@+id/fragment_navigation_drawer" android:layout_width="280dp" android:layout_height="match_parent" android:layout_gravity = "start" android:layout= "@layout/fragment_navigation_drawer" android:name="com.your_package.NavigationDrawerFragment" tools:layout="@layout/fragment_navigation_drawer" /> </android.support.v4.widget.DrawerLayout>
A continuación, crear una clase para el fragmento y crear un archivo de recursos para la clase que contendrá los elementos de su cajón, es decir
public class NavigationDrawerFragment extends Fragment { ... @Override public View onCreateView(final LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment View rootView = inflater.inflate(R.layout.fragment_navigation_drawer, container, false); ...
A continuación, puede añadir este fragmento a su actividad principal, es decir
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); navigationDrawerFragment = (NavigationDrawerFragment) getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer); navigationDrawerFragment.setUp(R.id.fragment_navigation_drawer,mDrawerLayout, toolbar);
El método "set up" se encuentra en el fragmento y ahí es donde lo inicializas ie
public void setUp(int fragmentId, DrawerLayout drawerLayout, final Toolbar toolbar) { containerView = getActivity().findViewById(fragmentId); mDrawerLayout = drawerLayout; mActionBarDrawerToggle = new ActionBarDrawerToggle( getActivity(), mDrawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close ) { @Override public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView); } getActivity().invalidateOptionsMenu(); } @Override public void onDrawerClosed(View drawerView) { super.onDrawerClosed(drawerView); } }
En el archivo de diseño del cajón, añada los elementos que desea configurar la notificación no leída para agregar un diseño relativo cuya orientación se establecerá en vertical, es decir
<RelativeLayout android:layout_below="@+id/drawer_layout_unread_notif" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="fill_parent">
Dentro de este diseño relativo vertical, agregue otro diseño relativo para los elementos. Este sería el lugar donde se agregaría la sección "Alertas" como en la imagen que publicó. Este diseño relativo debe ser horizontal ie
<RelativeLayout android:layout_below="@+id/drawer_items_1" android:orientation="horizontal" android:background="@drawable/drawer_selector" android:clickable="true" android:layout_width="match_parent" android:id="@+id/drawer_items_2" android:layout_height="48dp"> <ImageView android:src="@drawable/ic_notification" android:padding="8dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_centerVertical="true" android:layout_gravity="center_vertical"/> <TextView android:text="Notifications" android:textColor="@color/primary_text" android:layout_marginLeft="72dp" android:layout_centerVertical="true" android:layout_gravity="center_vertical" android:padding="8dp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:background="@color/red" android:layout_marginRight="10dp" android:id="@+id/drawer_notifications" android:layout_alignParentRight="true" android:padding="8dp" android:layout_centerVertical="true" android:textColor="@color/white" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>
El último elemento textview en el código justo encima de este contendrá el contador que desea agregar para las notificaciones no leídas. En el xml su color se fija en rojo. Desde aquí, obtenga una referencia a ella en la clase de fragmento del cajón de navegación usando su ID (en oncreateview) y llénela con su contador.
¡Espero que esto ayude!
El apoyo para esto se agregó en 23 de la biblioteca de diseño, creo.
En el archivo XML de su menú, establezca un actionLayout
en el prefijo XML de la app
:
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context="com.example.user.myapplication.MainActivity" > <item android:id="@+id/menu_one" android:checkable="true" android:title="Unread items" app:actionLayout="@layout/unread_items" /> </menu>
A continuación, haga que el menú incluya el diseño de calcular los elementos no leídos, probablemente utilizando una vista personalizada o fragmento para buscar los datos.
He encontrado esta solución fácil de implementar en este sitio web https://android.jlelse.eu/android-adding-badge-or-count-to-the-navigation-drawer-84c93af1f4d9 Siga los pasos a continuación
Paso 1: Cree un proyecto de Android Studio, en lugar de elegir actividad vacía, seleccione "Actividad de cajón de navegación".
Paso 2: Agregando el atributo "actionViewClass" al menú del cajón de navegación (es decir, menu / youractivityname_drawer.xml)
<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_camera" android:icon="@drawable/ic_menu_camera" android:title="Import" /> <item android:id="@+id/nav_gallery" app:actionViewClass="android.widget.TextView" android:icon="@drawable/ic_menu_gallery" android:title="Gallery" /> <item android:id="@+id/nav_slideshow" app:actionViewClass="android.widget.TextView" android:icon="@drawable/ic_menu_slideshow" android:title="Slideshow" /> <item android:id="@+id/nav_manage" android:icon="@drawable/ic_menu_manage" android:title="Tools" /> </group>
Paso 3: Declare el elemento de menú de la bandeja de navegación e inicialice el elemento con el valor de la insignia. En su actividad principal, declare el elemento de menú del cajón de navegación como se indica a continuación
//Create these objects above OnCreate()of your main activity TextView slideshow,gallery; //These lines should be added in the OnCreate() of your main activity NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view); navigationView.setNavigationItemSelectedListener(this); gallery=(TextView) MenuItemCompat.getActionView(navigationView.getMenu(). findItem(R.id.nav_gallery)); slideshow=(TextView) MenuItemCompat.getActionView(navigationView.getMenu(). findItem(R.id.nav_slideshow)); //This method will initialize the count value initializeCountDrawer();
Paso 5: Inicialice initializeCountDrawer () 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 gallery.setGravity(Gravity.CENTER_VERTICAL); gallery.setTypeface(null, Typeface.BOLD); gallery.setTextColor(getResources().getColor(R.color.colorAccent)); gallery.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"); }
Fuente: https://android.jlelse.eu/android-adding-badge-or-count-to-the-navigation-drawer-84c93af1f4d9
- ¿Qué método de actividad se llama después de todos los métodos de disposición?
- Obtención de encabezado de respuesta (Retrofit / OkHttp Client)