How can I change the icon of the navigation drawer and its item android studio

Question

im new on android studio and I use the navigation drawer for my app. but I don't know how to change the icon of each on navigation drawer by default. I want to use my own icon PLEASE HELP!

This I want to change the icon:

and also of this item

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.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">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"
        app:itemIconTint="#000000"/>

</android.support.v4.widget.DrawerLayout>

Post nav_header_main.xml & activity_main_drawer.xml from menu also — Mayur Gangurde, Feb 01 '17 at 06:42
Refer this for 2nd image http://stackoverflow.com/questions/38132260/how-do-i-change-item-title-font-color-for-an-item-that-contains-a-menu-in-naviga/38132450#38132450 — Mayur Gangurde, Feb 01 '17 at 06:44
Jerome Lim, I would recommend to place the image directly on the post. This link might break and would not be there in future. — A.B., Feb 01 '17 at 07:17

score 0 · Answer 1 · answered Feb 01 '17 at 06:44

0

you just need to use toolbar and set navigation icon for it.

toolbar = (Toolbar) findViewById(R.id.toolbar);
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view_main_activity);
    navigationView.setNavigationItemSelectedListener(this);
    toolbar.setNavigationIcon(R.mipmap.ic_menu);

answered Feb 01 '17 at 06:44

Mostafa Davodi

65
1
7

note that you must use NoActionBar theme for your activity to support toolbar. – Mostafa Davodi Feb 01 '17 at 06:44
where should i put noaction bar? – Jerome Lim Feb 01 '17 at 07:02
you include app_bar_main in your DrawerLayout, in this file you should have a toolbar for activity that has this layout. you should setSupportActionBar(toolbar) and after that use above code. – Mostafa Davodi Feb 01 '17 at 07:31
toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); – Mostafa Davodi Feb 01 '17 at 07:32

score 0 · Accepted Answer · answered Feb 01 '17 at 06:49

1)create a menu folder in R folder

2)now in menu create navigation_menu.xml file : paste this code - add icons from drawable folder

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <group android:checkableBehavior="all">
        <item
            android:id="@+id/home"
            android:title="Home"
            android:icon="@drawable/user"
            />

        <item
            android:id="@+id/earn"
            android:title="Wallet"
            android:icon="@drawable/earn"
            />
        <item
            android:id="@+id/notifications"
            android:title="Notifications"
            android:icon="@drawable/notification"
            />
    </group>
    <group android:checkableBehavior="single"
        android:menuCategory="secondary"
        android:id="@+id/secondary">
        <item
            android:title="Help"
            android:visible="false"
            android:id="@+id/help"
            android:icon="@drawable/ic_action_help"
            />
        <item
            android:title="About Us"
            android:id="@+id/aboutus"
            android:icon="@drawable/ic_action_name"
            >
        </item>
    </group>
</menu>

add this menu file in NavigaitonView tag

3)if you want to create your own toolbar for Navigation view. create toolbar.xml in your layout folder and paste this code ** add image in ImageView

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:elevation="10dp"
    >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_hamburger"
        android:id="@+id/hamburger"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Hello"
        android:textColor="@color/light_grey"
        android:gravity="center"
        android:padding="@dimen/small_padding"
        android:textSize="14dp"
        android:id="@+id/title_text"/>

</android.support.v7.widget.Toolbar>

4)add this toolbar in layout file

  <include
            layout="@layout/toolbar"
            android:id="@+id/toolbar"/>

5) goto Activity where you want to create Navigation View and do the following

public class MainActivity extends BaseActivity {


    TextView titleToolbarTV;
    ImageView  hamburgerIV;
    DrawerLayout drawerLayout;
    NavigationView navigationView;
    Toolbar toolbar; 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);  

        titleToolbarTV = (TextView)findViewById(R.id.title_text); 

        toolbar = (Toolbar)findViewById(R.id.toolbar);
        hamburgerIV = (ImageView)findViewById(R.id.hamburger);
        drawerLayout = (DrawerLayout) findViewById(R.id.base_layout);
        navigationView = (NavigationView)findViewById(R.id.navigation_drawer);
        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle("");
        loginPreferences = new LoginPreferences(MainActivity.this);
        user = loginPreferences.getUser();
        hamburgerIV.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(drawerLayout.isDrawerOpen(GravityCompat.START)){
                    drawerLayout.closeDrawer(GravityCompat.START);
                }
                else{
                    drawerLayout.openDrawer(GravityCompat.START);
                }
            }
        });

 }
 }

***dont forget to add NoActionBar for your layout file

where should i put NoActionBar? – Jerome Lim Feb 01 '17 at 07:09 — Jerome Lim, Feb 01 '17 at 07:09

score 0 · Answer 3 · answered Feb 01 '17 at 07:14

When I created a navigation view using default template provided by android studio, I faced same problem. I wanted to change the background of the navigation view header and place my own icon.

But I used simple technique to go step wise down to the header of navigation drawer. Please check this line from your code under NavigationView

app:headerLayout="@layout/nav_header_main"

This is the navigation header layout under folder layout. Open this file and place code here. My header looks like this, I have assigned the nice black background (with gradient) to this.

To assign my own application icon, I have provided my own drawable (or mipmap) under the image view. Notice this ImageView has been placed by the default template. P.S this is trimmed code of my navigation header, do not want to overwhelm you with unnecessary code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar">

   <!--My app icon-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:src="@mipmap/ic_launcher" />

    <!--My company/product name-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="@string/IDS_0235"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textColor="@color/colorTextLight"/>

    <!--My website link-->
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

How can I change the icon of the navigation drawer and its item android studio

3 Answers3