How to add icon to navigation item in NavigationView

I am just starting to use the new component android.support.design.widget.NavigationView, before that I am using the standard listview for the navigation box, but now I am starting to use the new component navigation of the View and having a problem to implement the icon on the item. Anyone now how to solve this?

+3


source to share


2 answers


This can be done with the following steps

1. Adding the actionViewClass attribute to the navigation drawer menu

After creating the Helloworld with Navigation Drawer application, locate the activity_main_drawer.xml file (ie youractivityname_drawer.xml) in the Menu folder in the Project Hierarchy View. Define a group item and add "app: actionViewclass = android.widget.TextView" as shown below:

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

      

2. Declare the Navigation Drawer menu item and initialize the item with an icon icon.

In your main activity, declare a navigation drawer menu item as shown below.



//Create these objects above OnCreate()of your main activity
TextView slideshow,gallery;

//These lines should be added in the OnCreate() of your main activity
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();

      

initializeCountDrawer () can be called where needed. It can also be used to update a counter value or icon in a Navigation Explorer menu item.

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

      

When adding the above method, run the application. And voila !! A simple counter will be displayed in the Gallery and Slideshow menus in the navigation drawer.

Meaning of dynamic icons

If you need dynamic icon values, such as updating a value from an API call or SQLite database, create a reusable method and update it in your activity's OnStart () or OnResume () method.

The complete source code can be found here

+8


source


You will still have to use a ListView to set the layout.

For using the NavigationView properties, my workaround was to pass a SpannableString with a different background as the new MenuItem header.



I know this is not the best solution, but it works great. Something like that:

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()-3, s.length(), 0);
sColored.setSpan(new ForegroundColorSpan( Color.WHITE ), s.length()-3, s.length(), 0);


element.setTitle(sColored);

      

+1


source







All Articles