Androidx: Create Navigation menu from scratch

In this tutorial we are creating navigation menu from scratch by swiping from left or right you can bring menu.

Create android project file > new >new project>start with empty activity

Now create xml file by right click on layout folder>new>XML>layout xml named it as navigation.xml. and type the following code , in this we are creating sidebar navigation menu.

<?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_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:openDrawer="start">    <include        layout="@layout/app_bar_navigation"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <com.google.android.material.navigation.NavigationView        android:id="@+id/nav_view"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        android:fitsSystemWindows="true"        app:headerLayout="@layout/nav_header_navigation"        app:menu="@menu/activity_navigation_drawer" /></androidx.drawerlayout.widget.DrawerLayout>

Now create Another Xml file by right click on layout folder>new>XML>layout xml named it as nav_header.xml, In this we are creating header of our side bar navigation and type the following code

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="@dimen/nav_header_height"    android:background="@drawable/side_nav_bar"    android:gravity="bottom"    android:orientation="vertical"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingBottom="@dimen/activity_vertical_margin"    android:theme="@style/ThemeOverlay.AppCompat.Dark">    <ImageView        android:id="@+id/imageView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:contentDescription="@string/nav_header_desc"        android:paddingTop="@dimen/nav_header_vertical_spacing"        app:srcCompat="@mipmap/ic_launcher_round" />    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:paddingTop="@dimen/nav_header_vertical_spacing"        android:text="@string/nav_header_title"        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />    <TextView        android:id="@+id/textView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/nav_header_subtitle" /></LinearLayout>

Now Create another XML file by right click on layout folder>new>XML>layout xml named it as app_bar.xml, In this we are creating menu items in our navigation bar. Type the following code

<?xml version="1.0" encoding="utf-8"?><androidx.coordinatorlayout.widget.CoordinatorLayout 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=".navigation">    <com.google.android.material.appbar.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/AppTheme.AppBarOverlay">    </com.google.android.material.appbar.AppBarLayout>    <include layout="@layout/content_navigation" /></androidx.coordinatorlayout.widget.CoordinatorLayout>

Now Create another XML file by right click on layout folder>new>XML>layout xml named it as main.xml, In this we are creating main content, type the following code

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout 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"    app:layout_behavior="@string/appbar_scrolling_view_behavior"    tools:showIn="@layout/app_bar_main">    <fragment        android:id="@+id/nav_host_fragment"        android:name="androidx.navigation.fragment.NavHostFragment"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:defaultNavHost="true"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:navGraph="@navigation/mobile_navigation" /></androidx.constraintlayout.widget.ConstraintLayout>

Now create a folder under resource folder >NEW>android resource directory> named it as menu. In this we are creating the menu items for our navigation bar.

Now Create another XML file by right click on layout folder>new>XML>layout xml named it as menuitems.xml, In this we are creating menu items , type the following code

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    tools:showIn="navigation_view">    <group android:checkableBehavior="single">        <item            android:id="@+id/nav_home"            android:icon="@drawable/ic_menu_camera"            android:title="@string/menu_home" />        <item            android:id="@+id/nav_gallery"            android:icon="@drawable/ic_menu_gallery"            android:title="@string/menu_gallery" />        <item            android:id="@+id/nav_slideshow"            android:icon="@drawable/ic_menu_slideshow"            android:title="@string/menu_slideshow" />        <item            android:id="@+id/nav_tools"            android:icon="@drawable/ic_menu_manage"            android:title="@string/menu_tools" />    </group>    <item android:title="Communicate">        <menu>            <item                android:id="@+id/nav_share"                android:icon="@drawable/ic_menu_share"                android:title="@string/menu_share" />            <item                android:id="@+id/nav_send"                android:icon="@drawable/ic_menu_send"                android:title="@string/menu_send" />        </menu>    </item></menu>

Now create a folder under resource folder >NEW>android resource directory> named it as values. In this we are creating the strings which will reflect on our actual file name.

In android to add a name of any file we need to create strings.xml under values folder{Imp}, In this type the following code to create strings .

<resources>    <string name="app_name">guide</string>    <string name="title_activity_navigation">navigation</string>    <string name="navigation_drawer_open">Open navigation drawer</string>    <string name="navigation_drawer_close">Close navigation drawer</string>    <string name="nav_header_title">Android Studio</string>    <string name="nav_header_subtitle">android.studio@android.com</string>    <string name="nav_header_desc">Navigation header</string>    <string name="action_settings">Settings</string>    <string name="menu_home">Home</string>    <string name="menu_gallery">Gallery</string>    <string name="menu_slideshow">Slideshow</string>    <string name="menu_tools">Tools</string>    <string name="menu_share">Share</string>    <string name="menu_send">Send</string></resources>

Now create a style for our app here we do some styling of our app using pre-built themes or create new one , Type the following code

<resources>    <!-- Base application theme. -->    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>    </style>    <style name="AppTheme.NoActionBar">        <item name="windowActionBar">false</item>        <item name="windowNoTitle">true</item>    </style>    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" /></resources>

Now Create a java class for our navigation bar, Right Click on your package name select new java class and type the following code

package com.passionategeekz.guide;import android.os.Bundle;import com.google.android.material.floatingactionbutton.FloatingActionButton;import com.google.android.material.snackbar.Snackbar;import android.view.View;import androidx.navigation.NavController;import androidx.navigation.Navigation;import androidx.navigation.ui.AppBarConfiguration;import androidx.navigation.ui.NavigationUI;import com.google.android.material.navigation.NavigationView;import androidx.drawerlayout.widget.DrawerLayout;import androidx.appcompat.app.AppCompatActivity;import androidx.appcompat.widget.Toolbar;import android.view.Menu;public class navigation extends AppCompatActivity {    private AppBarConfiguration mAppBarConfiguration;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_navigation);        DrawerLayout drawer = findViewById(R.id.drawer_layout);        NavigationView navigationView = findViewById(R.id.nav_view);        // Passing each menu ID as a set of Ids because each        // menu should be considered as top level destinations.        mAppBarConfiguration = new AppBarConfiguration.Builder(                R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow,                R.id.nav_tools, R.id.nav_share, R.id.nav_send)                .setDrawerLayout(drawer)                .build();        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);        NavigationUI.setupActionBarWithNavController(this, navController, mAppBarConfiguration);        NavigationUI.setupWithNavController(navigationView, navController);    }    @Override    public boolean onSupportNavigateUp() {        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);        return NavigationUI.navigateUp(navController, mAppBarConfiguration)                || super.onSupportNavigateUp();    }}

Now finally run your project(shift+f10) or from menu bar select run , you can use android emulator or you can use your device as emulator.