In this tutorial, we are going to learn how to implement a navigation drawer Layout into our app. We will build this navigation drawer from a scratch.
In Android, the Navigation Drawer is a panel that appears on the left edge of the screen and provides the app’s navigation options. It is one of the most important and effective UI patterns for Android app development that Google has offered. The navigation drawer is a side menu that helps us organize our app’s navigation. It’s a standardized approach to navigating around our app’s many pages and information.
In Android Apps, a Toolbar is a ViewGroup that can be placed in the XML layouts of an activity. It’s easier to position, animate, and manage the toolbar.
ActionBars are less flexible than toolbars. We can easily change the object’s color, size, and position or labels, logos, and navigation symbols.
android.widget.Toolbar. This is a standard toolbar that may be used anywhere in the application. A toolbar is a type of action bar that can be used in application design.
- What is Navigation Drawer in Android?
The navigation bar is the user interface bar that displays the main navigation menu of the application. When the user touches the drawer symbol in the app bar or swipes a finger from the left side of the screen, the drawer appears.
Contents
Preview: Navigation Drawer Layout
<–Navigation Drawer Layout Example
dependency
–> Add the given below code to your file build.gradle (app)
// implementation 'com.google.android.material:material:1.4.0'
File: themes.xml
–>Add the code given below to your themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Primary brand color. -->
<item name="windowActionBar">false</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
File: activity_main.xml
–> In the activity_main.xml file, a Drawer layout, and toolbar inside a Relative Layout, NavigationView inside the Drawer layout.
–> Add the code given below to your file activity_main.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:id="@+id/drawer"
android:layout_width="match_parent"
tools:openDrawer="start"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
app:titleTextColor="@color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:title="Navigation Drawer Demo">
</androidx.appcompat.widget.Toolbar>
</RelativeLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/navmenu"
app:menu="@menu/menu_for_navigationview"
app:headerLayout="@layout/header_navigation"
android:layout_gravity="start"
>
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
File: menu_for_navigationview.xml
–> Create a menu folder res/Android Resource directory/Resource type: menu -> ok and create a new file in it and add the code given below to your file.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/menu_home"
android:icon="@drawable/ic_baseline_edit_24"
android:title="Edit" />
<item android:id="@+id/menu_call"
android:icon="@drawable/ic_baseline_content_cut_24"
android:title="Crop" />
<item android:id="@+id/menu_setting"
android:icon="@drawable/ic_baseline_create_new_folder_24"
android:title="Setting" />
<item android:id="@+id/submenu"
android:icon="@drawable/ic_baseline_dehaze_24"
android:title="Extra"
/>
<group android:id="@+id/group_menu">
<item android:id="@+id/nav_item_four"
android:title="Item 4" />
<item android:id="@+id/nav_item_five"
android:title="Item 5" />
</group>
<item android:title="Title 1">
<menu>
<item android:id="@+id/nav_item_six"
android:icon="@drawable/ic_baseline_edit_24"
android:title="Item 6" />
<item android:id="@+id/nav_item_seven"
android:icon="@drawable/ic_baseline_create_new_folder_24"
android:title="Item 7" />
</menu>
</item>
</menu>
File: header_navigation.xml
–>Create a New Layout Resources File and Add the code given below to your file.
<?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:orientation="vertical"
android:background="@color/colorPrimary"
android:layout_height="80dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:fontFamily="sans-serif-condensed-light"
android:textSize="30sp"
android:text="Toolbar Example"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:textSize="17sp"
android:fontFamily="sans-serif-smallcaps"
android:text="support us at developersdome.com"/>
</androidx.appcompat.widget.LinearLayoutCompat>
File: MainActivity.kt
–> Add the code given below to your file MainActivity.kt
package com.example.toolbar
import android.os.Bundle
import android.view.Window
import android.view.WindowManager
import android.widget.Toast
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.Toolbar
import androidx.core.view.GravityCompat
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
requestWindowFeature(Window.FEATURE_NO_TITLE);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN)
setContentView(R.layout.activity_main)
val toolbar= findViewById<Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)
val nav:NavigationView=findViewById(R.id.navmenu)
val drawerLayout:DrawerLayout=findViewById(R.id.drawer)
val toggle=ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close)
drawerLayout.addDrawerListener(toggle)
toggle.syncState()
nav.setNavigationItemSelectedListener { item ->
when (item.itemId) {
R.id.menu_edit ->{
Toast.makeText(applicationContext,"Edit Panel is open",Toast.LENGTH_SHORT).show()
drawerLayout.closeDrawer(GravityCompat.START)
}
R.id.menu_crop ->{
Toast.makeText(applicationContext,"Crop Panel is open",Toast.LENGTH_SHORT).show()
drawerLayout.closeDrawer(GravityCompat.START)
}
R.id.menu_setting ->{
Toast.makeText(applicationContext,"Setting Panel is open",Toast.LENGTH_SHORT).show()
drawerLayout.closeDrawer(GravityCompat.START)
}
R.id.menu_extra ->{
Toast.makeText(applicationContext,"Setting Panel is open",Toast.LENGTH_SHORT).show()
drawerLayout.closeDrawer(GravityCompat.START)
}
// after that you may add manually
}
true
}
}
}
Pingback: Android Table Layout Example in kotlin - Developers Dome