Navigation Drawer with Material Design 3
In this blog, We will learn about the Navigation Drawer with material Design 3 in
Android App Coding Blog.
What is Navigation Drawer?
The navigation drawer is a UI panel that displays our app’s primary navigation menu. Navigation drawer is the most used feature provided by Android.
It is also a crucial UI feature that delivers activities that user’s desire, such as changing user profiles, altering program settings, and so on.
The drawer appears when the user touches the drawer icon in the app bar or when the user swipes a finger from the left edge of the screen.
Steps
1. Create a New Project named Android App Coding Blog.
2. Before writing any code change your themes in values like below
A. res/values/themes.xml
<resources>
<style name="Theme.AndroidAppCodingBlog"
parent="Theme.Material3.DayNight">
</style>
</resources>
B. res/values-night/themes.xml
<resources>
<style name="Theme.AndroidAppCodingBlog"
parent="Theme.Material3.DayNight">
</style>
</resources>
3. Create a menu named drawer_menu for Drawer layoutres > New >Android Resource File >File name - drawer_menuResource type - Menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/firstItem"
android:title="First Item" />
<item
android:id="@+id/secondtItem"
android:title="Second Item" />
<item
android:id="@+id/thirdItem"
android:title="Third Item" />
</menu>
4. Create a Header named drawer_header for Drawer Layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginStart="10dp"
android:background="@android:color/transparent"
android:src="@drawable/kotlin"/>
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/TextAppearance.Material3.HeadlineLarge"
android:textStyle="bold"
android:layout_marginStart="10dp"
android:textColor="@color/black"
android:text="@string/material_design"/>
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/TextAppearance.Material3.ActionBar.Subtitle"
android:textStyle="bold"
android:layout_marginStart="10dp"
android:textColor="@color/black"
android:text="@string/nav"/>
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>
5. Create a layout named as screen <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.textview.MaterialTextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/contents"
android:textSize="14.sp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
6. acivity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/my_drawer_layout"
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"
tools:context=".MainActivity">
<include
layout="@layout/screen"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.google.android.material.navigation.NavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer_menu"/>
</androidx.drawerlayout.widget.DrawerLayout>
7. MainActivity.kt
package com.example.androidappcodingblog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import android.widget.Toast
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.core.view.GravityCompat
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView
class MainActivity : AppCompatActivity() {
private lateinit var toggle: ActionBarDrawerToggle
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val navigation = findViewById<NavigationView>(R.id.navigation)
val drawerLayout = findViewById<DrawerLayout>(R.id.my_drawer_layout)
toggle = ActionBarDrawerToggle(this, drawerLayout, R.string.nav_open, R.string.nav_close)
drawerLayout.addDrawerListener(toggle)
toggle.syncState()
supportActionBar?.setDisplayHomeAsUpEnabled(true)
navigation.setNavigationItemSelectedListener { MenuItem ->
when (MenuItem.itemId) {
R.id.firstItem -> {
Toast.makeText(this, "First Item", Toast.LENGTH_SHORT).show()
}
R.id.secondtItem -> {
Toast.makeText(this, "Second Item", Toast.LENGTH_SHORT).show()
}
R.id.thirdItem -> {
Toast.makeText(this, "Third Item", Toast.LENGTH_SHORT).show()
}
}
drawerLayout.close()
true
}
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
return if (toggle.onOptionsItemSelected(item)) {
true
} else
super.onOptionsItemSelected(item)
}
@Deprecated("Deprecated in Java")
override fun onBackPressed() {
if (isTaskRoot) {
val drawerLayout=findViewById<DrawerLayout>(R.id.my_drawer_layout)
if (drawerLayout.isDrawerOpen(GravityCompat.START)){
drawerLayout.close()
}
else{
finish()
}
}
}
}
OUTPUT
Thanks for reading!😊😊😊😊😊😊
If you enjoyed reading , Show some Love by clapping 👏 on this post!If you have any suggestion share with me.
0 Comments