Cara Menambahkan Icon dan Header pada Navigation Drawer

Assalamualaikum Wr. Wb. Kali ini saya akan membuat sebuah tutorial yang berhubungan dengan tutorial sebelumnya yaitu Cara Membuat Navigation Drawer Material Design. Tutorial kali ini akan membahas cara membuat sebuah icon dan header pada Menu Navigasi, seperti yang kita ketahui sebuah Navigation tidak akan lengkap tanpa adanya icon dan header.

Icon bisa digunakan sebagai simbol pada item dan header biasanya digunakan sebagai tempat untuk foto profil user, gambar sampul, nama user, dll.

Setelah sedikit saya jelaskan mengenai fungsi icon dan header pada NavigationView, Untuk lebih jelasnya silakan simak tutorial berikut ini.

A.Icon

1) Pertama siapkan gambar icon.png/image asset dan simpan pada folder Drawable (app/res/drawable), jika belum punya, kalian bisa membuatnya pada Android Studio, dengan cara klik kanan pada direktori res lalu pilih new > Image Asset, untuk lebih jelasnya perhatikan gambar berikut ini.

Klik Image Asset, perhatikan gambar berikut ini.

Disana terdapat beberapa atribut yang akan kalian gunakan untuk memuat Icon, artibut tersebut diantaranya :

• Icon Type : Ubah menjadi Action Bar and Tab Icon 
• Name : Untuk mengidentifikasikan nama dari sebuah Icon/gambar 
• Asset Type : Image fungsinya untuk mengambil gambar dari PC, Clip Art untuk mengambil gambar bawaan android studio, text untuk mengganti gambar menjadi text 
• Clip Art : Untuk memilih gambar yang tersedia pada Android Studio 
• Padding : Untuk mengatur jarak antara gambar dengan ruang 
• Theme : Untuk mengatur warna icon/gambar

Setelah itu gambar tersebut akan tersimpan pada folder drawable, drawable-hdpi, drawable-mdpi, drawable-xhdpi, drawable-xxhdpi.

Buatlah 4 buah icon untuk dipasang pada menu navigasi, setelah itu pasang icon tersebut pada file.xml yang berada di folder menu (app/res/menu), buka file tersebut dan tambahkan atribut : android : icon="@dwawable/xxxx(nama icon)" pada tag <item>, perhatikanlah source code berikut ini :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item android:id="@+id/tulis"
         android:title="Tulis"
         android:icon="@drawable/tulis"/>
 
    <item android:id="@+id/hapus"
         android:title="Hapus"
         android:icon="@drawable/hapus"/>
 
    <item android:id="@+id/more"
        android:title="More...">
 
       <menu>
           <item android:id="@+id/share"
              android:title="Share"
              android:icon="@drawable/share"/>
 
           <item android:id="@+id/setting"
              android:title="Setting"
              android:icon="@drawable/setting"/>
       </menu>
 
   </item>
 
</menu>

Sekarang jalankan program aplikasinya dan lihat hasinya.

B.Header

Pertama buatlah sebuah file.xml pada folder layout, klik kanan (new > Layout resourse file) dan berinama nav_header (nama boleh diubah), edit tampilan UI nya cantoh seperti ini.

 

nav_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@color/colorPrimary">
 
    <ImageView
       app:srcCompat="@drawable/android"
       android:id="@+id/imageView"
       android:layout_margin="12dp"
       android:layout_width="70dp"
       android:padding="4dp"
       android:layout_height="80dp" />
 
    <TextView
       android:text="WildanTechnoArt"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:id="@+id/textView"
       android:textStyle="normal|bold"
       android:textSize="16sp"
       android:textColor="@android:color/background_light"
       android:layout_marginLeft="14dp"
       android:layout_marginBottom="8dp" />
</LinearLayout>

Terakhir pasang layout header yang sudah kalian buat tadi pada layout NavigationDrawer, tambahkan atribut app : headerLayout="@layout/nav_header", fungsinya untuk memanggil header pada layout NavigationView.

<?xml version="1.0" encoding="utf-8"?>
<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/menu_utama"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="net.developer.wildantechnoart.tutorialnavigation.MenuUtama"
   android:background="#FFE3E3E3">
 
    <android.support.design.widget.NavigationView
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:layout_gravity="start"
       app:menu="@menu/nav_menu"
       app:headerLayout="@layout/nav_header">
    </android.support.design.widget.NavigationView>
 
</android.support.v4.widget.DrawerLayout>

Jalankan aplikasinya.

Sekian dari saya, saya akhiri tutorial ini dilanjut dengan tutorila berikutnya yaitu Cara Membuat ActionBar Toggle dan Event pada Navigation Drawer, semoga bermanfaat. Wassalamualaikum Wr. Wb.