Toolbar example

Navigation Drawer Layout Tutorial | Toolbar tutorial

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 organise our app’s navigation. It’s a standardised approach to navigate 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.

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
        }

    }

}

This Post Has One Comment

Leave a Reply