How to change Navigation Drawer icon color in Android || Show Image in Navigation Drawer in Android

Change Navigation Drawer icon color in Android

Hello Friends, Today we will teach you, how to show the real color of the navigation drawer's icon and In this tutorial, we will show you, how to show images with a real view in the navigation drawer.

Step 1. :- Create a new Empty project.

Step 2. :- Now we need to Add the Design dependency in build.gradle ( Module: app ) file.

For API Level 28 we need to implement 'com.android.support:design:28.0.0' dependency.

implementation 'com.android.support:design:28.0.0'

For API Level 29 ( AndroidX ) we need to implement 'com.google.android.material:material:1.0.0'

 implementation 'com.google.android.material:material:1.0.0'

Step 3. :- Now we need to create a Menu folder in our project directory to create the navigation drawer's menu.

Click right on the app select new, and click on Android Resource Directory.
Now Select the menu on Resource Type then click ok

Step 4. :- Now we need to create one xml file in our menu folder for navigation drawer's menu.

Click right on the menu and select new, now click on Menu resource file and type any name then click OK.

Step 5. :- Now create a group of the menu and create an item for showing the menu of our navigation drawer.

menuitems.xml :-

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="navigation_view">

<group
    android:checkableBehavior="single">
    <item
    android:id="@+id/fav"
    android:title="Favorite"
    android:icon="@android:drawable/btn_star_big_on"/>

    <item
        android:icon="@android:drawable/ic_menu_search"
        android:title="Search"
        android:id="@+id/search"/>
  <item
           android:id="@+id/country"
           android:title="Country"
           android:icon="@drawable/india"/>
</group>
 <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/cancel"
                android:icon="@android:drawable/ic_menu_close_clear_cancel"
                android:title="Cancel" />
        </menu>
    </item>
</menu>

Note :- we use icons and image for our menu.

Step 6. :- Now we need to create header file for our navigation drawer. so create one more xml layout file for header.
we need to set layout height = 176dp as the standard height of the navigation drawer header layout.

nav_header.xml :-

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="176dp"
    android:background="@android:color/holo_blue_dark">

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:id="@+id/nav_pic"
        android:src="@drawable/ic_launcher_background"
        android:layout_centerInParent="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start with Android App"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:layout_below="@+id/nav_pic"
        android:layout_centerInParent="true"
        android:layout_marginTop="8dp"
        android:id="@+id/nav_title"/>

</RelativeLayout>

Step 7. :- Now we need to remove the actionbar from our app because we will add a toolbar for our navigation drawer.
we need to open resource ( res ) folder then open values folder and now open styles.xml file and remove darkactionbar to noactionbar.

styles.xml :-

Step 8. :- Now open activity_main.xml for add some codes.

activity_main.xml :-

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/toolbar"
            android:background="@android:color/holo_purple"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Welcome"
            android:textSize="25sp"
            android:id="@+id/textView"
            android:layout_centerInParent="true"/>

    </RelativeLayout>

<com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/navigationView"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/menuitems"
        android:layout_gravity="start"/>

</androidx.drawerlayout.widget.DrawerLayout>

we need to change main layout as a DrawerLayout because in this layout open our navigation drawer.
now we need to add NavigationView element in our drawer layout for our navigation drawer. In this element, we need to add our navigation drawer header and navigation drawer menu and set the width as a wrap_content, and set layout_gravity start because the navigation drawer comes from the left side that's why we need to set layout_gravity as a start.
Now we need to add another layout for our main layout. This layout shows our home page.

Step 9. :- Now go to MainActivity.java file and write some codes like this.

we need to add navigationView.setItemIconTintList(null); for showing actual image and icon's color in drawer.
we create one new method closeDrawer() for closing the drawer after clicking on any item in the drawer menu.

MainActivity.java :-

package com.akshayarora.uvdjunction.navigationdrawer;

import android.graphics.Color;
import android.graphics.PorterDuff;
import android.os.Bundle;

import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.snackbar.Snackbar;

import android.view.View;

import androidx.annotation.NonNull;
import androidx.core.view.GravityCompat;
import androidx.appcompat.app.ActionBarDrawerToggle;

import android.view.MenuItem;

import com.google.android.material.navigation.NavigationView;

import androidx.drawerlayout.widget.DrawerLayout;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.view.Menu;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private NavigationView navigationView;
    private DrawerLayout drawerLayout;
    private ActionBarDrawerToggle actionBarDrawerToggle;
    private TextView textView;
    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setUpToolbar();

        navigationView = (NavigationView) findViewById(R.id.navigationView);
        textView = (TextView) findViewById(R.id.textView);
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Welcome Text", Toast.LENGTH_SHORT).show();
            }
        });
        navigationView.setItemIconTintList(null);//using this line we will show image and icon in real color
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                menuItem.setChecked(true);
                closeDrawer();
                switch (menuItem.getItemId()) {
                    case R.id.fav:
                        Toast.makeText(MainActivity.this, "Clicked on Fav", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.search:
                        Toast.makeText(MainActivity.this, "Click on Search", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.country:
                        Toast.makeText(MainActivity.this, "India", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.exit:
                        Toast.makeText(MainActivity.this, "Click on Exit", Toast.LENGTH_SHORT).show();
                        MainActivity.super.onBackPressed();
                        break;
                }
                return false;
            }
        });
    }

    private void setUpToolbar() {
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        setSupportActionBar(toolbar);
        actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.app_name, R.string.app_name);
        actionBarDrawerToggle.getDrawerArrowDrawable().setColor(Color.BLUE);
        drawerLayout.addDrawerListener(actionBarDrawerToggle);
        actionBarDrawerToggle.syncState();
    }

    private void closeDrawer() {
        drawerLayout.closeDrawer(GravityCompat.START);
    }

    @Override
    public void onBackPressed() {
        if (this.drawerLayout.isDrawerOpen(GravityCompat.START)) {
            this.drawerLayout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }
}

We create setUpToolbar method for add drawer hamburger icon with toggle the navigation drawer ( for close and open drawer ).
we call the override method onBackPressed because if the navigation drawer is open and the user clicks on the back button then the first drawer close and clicks again on the back button then our app close.
We use MainActivity.super.onBackPressed() method for close app.

Now run the project and see the output

Output

start app