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 version = "1.0" encoding = "utf-8" ?>
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 version = "1.0" encoding = "utf-8" ?>
< LinearLayout
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 version = "1.0" encoding = "utf-8" ?>
< 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 version = "1.0" encoding = "utf-8" ?>
< androidx.drawerlayout.widget.DrawerLayout
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: