How to Add Icons in Navigation Drawer in Android?
Android navigation drawer is a user interface that shows the app’s main navigation menu. It appears when the user touches the drawer icon in the app bar or when the user swipes their fingers or does some kind of action on the screen. It is not visible by default and it needs to open either by sliding from the left or clicking its icon in the ActionBar. It shows all the internal of the app and its functionalities.
Android Icons
Android icons represent our app on a device’s Home and All Apps screens. They are the symbolic representation of all functions present in the app.
Step-by-Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Step 2:
In your res folder make a menu folder. In it add xml file name nav_menu. Add this below code.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < menu xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:tool = "http//schemas.android. com/tools" tool:showIn = "navigation_view" > < group android:checkableBehavior = "single" > < item android:id = "@+id/nav_home" android:title = "Home" android:icon = "@drawable/home" > </ item > < item android:title = "Attendance Track" android:id = "@+id/attend_track" android:icon = "@drawable/baseline_how_to_reg_24" > </ item > < item android:title = "QR Scan" android:id = "@+id/scan_qr" android:icon = "@drawable/baseline_qr_code_scanner_24" > </ item > </ group > < item android:title = "General" > < menu > < item android:title = "Profile" android:id = "@+id/profile" android:icon = "@drawable/user" /> < item android:title = "Settings" android:id = "@+id/settings" android:icon = "@drawable/baseline_settings_24" /> </ menu > </ item > < item android:title = "Communicate" > < menu > < item android:title = "How To Use" android:icon = "@drawable/baseline_emoji_people_24" android:id = "@+id/use" /> < item android:title = "Suggestions" android:icon = "@drawable/question" android:id = "@+id/sugg" /> < item android:title = "Share App" android:icon = "@drawable/baseline_share_24" android:id = "@+id/share" /> </ menu > </ item > </ menu > |
Step 3:
In your layout folder add nav_header.xml. Add the below code
XML
<? 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 = "176dp" android:orientation = "vertical" android:gravity = "top" android:padding = "10dp" android:background = "@drawable/grad" > < TextView android:layout_marginTop = "10dp" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Navigation Bar" android:layout_marginLeft = "9dp" android:fontFamily = "@font/regular" android:textSize = "20sp" android:textColor = "@color/white" android:textStyle = "bold" /> </ LinearLayout > |
Step 4:
In your drawable folder make a grad.xml .Add this code to it.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < selector xmlns:android = "http://schemas.android.com/apk/res/android" > < item > < shape android:shape = "rectangle" > < corners android:bottomLeftRadius = "15dp" android:bottomRightRadius = "15dp" > </ corners > < gradient android:startColor = "#615EE8" android:endColor = "#7F6CEF" /> </ shape > </ item > </ selector > |
Step 5:
Go to your main activity and add the code given below.
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:layout_width = "match_parent" android:layout_height = "match_parent" android:id = "@+id/drawer_layout" android:fitsSystemWindows = "true" tools:openDrawer = "start" tools:context = ".MainActivity" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical" > < Toolbar android:layout_width = "match_parent" android:layout_height = "56dp" android:id = "@+id/toolbar" android:elevation = "4dp" android:background = "@color/grad_1" android:theme = "@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:popupTheme = "@style/ThemeOverlay.AppCompat.Light" tools:targetApi = "lollipop" /> < FrameLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:id = "@+id/frag_con" /> </ LinearLayout > < com.google.android.material.navigation.NavigationView android:layout_width = "wrap_content" android:layout_height = "match_parent" android:id = "@+id/nav_view" android:layout_gravity = "start" app:headerLayout = "@layout/nav_header" app:menu = "@menu/nav_menu" app:itemIconTint = "@color/grad_2" > </ com.google.android.material.navigation.NavigationView > </ androidx.drawerlayout.widget.DrawerLayout > |
Output:
Contact Us