ejemplo - navigation view android

¿Cómo configurar el recuento de notificaciones no leídas en NavigationView of DrawerLayout?

Question

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

<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 configurar el contador de notificaciones no leídas para cada elemento de NavigationView como la imagen de abajo:

¿Cómo configurar el contador de notificaciones no leídas en el elemento de NavigationView ?

Answer 1

Apoyo para esto se agregó en 23 de la biblioteca de diseño, creo.

En su archivo XML de 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>

Luego haga que el diseño incluido del menú calcule los elementos no leídos, probablemente utilizando una vista personalizada o un fragmento para obtener los datos.

Answer 2

Encontré 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 una actividad vacía, seleccione "Actividad del cajón de navegación".

Paso 2: Agregar 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ú del cajón de navegación e inicialice el elemento con el valor de distintivo. 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 credencial 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

Answer 3

Le sugiero que elimine 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>

Luego cree una clase para el fragmento y cree un archivo de recursos para la clase que contendrá los elementos para 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 agregar 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 de "configuración" se encuentra en el fragmento y ahí es donde se inicializa, es decir,

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, agregue los elementos para los que desea establecer la notificación no leída y luego agregue un diseño relativo cuya orientación 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 agregaría la sección "Alertas" como en la imagen que publicó. Este diseño relativo debe ser horizontal, es decir

<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 de vista de texto 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 establece en rojo. Desde aquí, obtenga una referencia a él en la clase de fragmento del cajón de navegación utilizando su ID (en oncreateview) y rellénelo con su contador.

¡Espero que esto ayude!

Answer 4

NavigationView está diseñado para ser una forma fácil de implementar un cajón de navegación básico que cumpla con las pautas de diseño del material.

Si desea algo más que un cajón de navegación básico (es decir, uno con elementos de navegación de texto y un encabezado opcional), deberá crear su propio diseño para el cajón de navegación.

Answer 5

Respuesta actualizada:

El uso de app:actionLayout con la biblioteca de soporte 23.1.1 o superior admitirá 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" />

Referenciarlo en el elemento del menú de su 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 usar el espacio de nombres de la app , no intente usar android .

Alternativamente, puede configurar manualmente la vista de acción con el método MenuItem.setActionView() .

Busque el elemento del menú y configure el contador como el código siguiente:

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 necesitará usar MenuItemCompat si tiene que ser compatible con Android 2.x versiones de Android 2.x

Respuesta anterior (para la versión anterior):

Resuelto con ListView dentro de NavigationView como el código siguiente ...

<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 la lista de elementos de su actividad, como se muestra a continuación ...

    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 escucha de clic 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;
}

}