Android Navigation Drawer

Github code :

Navigation drawer consist of two parts , header and the menu part.


To create a Navigation drawer you have to declare the "DrawerLayout" as a root element


(Below I have created a new layout with the Root element as Drawerlayout & then I included the Main xml file. This keeps the code clean )


Change the layout file for the main activity so that it uses the NavigationDrawerLayout
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.navigationdrawer_layout);

NOTE : See that the Navigation View is located after the ConstrainLayout in the layout file.

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerlayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        tools:menu="@menu/main_menu">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar1"
            android:layout_width="0dp"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/cardview_dark_background"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:title="@string/app_name"
            app:titleTextColor="@color/black" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="40dp"
            android:layout_marginTop="164dp"
            android:text="Hello,Deepesh !"
            android:textSize="40sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/share_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="37dp"
            android:layout_marginTop="95dp"
            android:text="Share"
            app:layout_constraintStart_toEndOf="@+id/changetext_button"
            app:layout_constraintTop_toBottomOf="@+id/textView1" />

        <Button
            android:id="@+id/changetext_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="50dp"
            android:text="Change"
            app:layout_constraintBaseline_toBaselineOf="@+id/share_button"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigattion_view1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="start"
        app:headerLayout="@layout/activity_splash_screen"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@+id/toolbar1"
        app:layout_constraintTop_toTopOf="parent"
        app:menu="@menu/main_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

<?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"
    android:id="@+id/drawerlayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        layout="@layout/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationview1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />


</androidx.drawerlayout.widget.DrawerLayout>


then 'include' the layout file into the Drawerlayout.



next Create a NAVIGATION view as shown in the code .

IMP - Navigation View comes at the last of the code in the layour







@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.navigationdrawer_layout);

    Toolbar toolbar1 = findViewById(R.id.toolbar1);
    setSupportActionBar(toolbar1);

    drawerLayout = findViewById(R.id.drawerlayout1);
    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar1, R.string.nav_open, R.string.nav_close);
    drawerLayout.addDrawerListener(toggle);
    toggle.syncState();

    NavigationView navigationView = findViewById(R.id.navigationview1);
    navigationView.setNavigationItemSelectedListener(navigationItemSelectedListener);


}

@Override
public void onBackPressed() {
    if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
        drawerLayout.closeDrawer(GravityCompat.START);
    } else {
        super.onBackPressed();
    }
}

then fetch the drawerlayout using ist id and sync it with a ActionbarDrawerToggle to make it swipable

When the drawer is open and if anyone clicks the back button on the phone , it will take  tehm directly to the Home screen or another Activity.

To close the opened drawer, Overide its onBackpressed() method


NavigationView.OnNavigationItemSelectedListener navigationItemSelectedListener = new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.setting:
                Toast.makeText(MainActivity.this, "This is a Setting option", Toast.LENGTH_SHORT).show();
                break;

            case R.id.about:
                Toast.makeText(MainActivity.this, "This is a About option", Toast.LENGTH_SHORT).show();
                break;

            case R.id.forums:
                Toast.makeText(MainActivity.this, "This is a Forums option", Toast.LENGTH_SHORT).show();
                break;


            case R.id.trash:
                Toast.makeText(MainActivity.this, "This is a Trash option", Toast.LENGTH_SHORT).show();
                break;

            case R.id.inbox:
                Toast.makeText(MainActivity.this, "This is a Inbox option", Toast.LENGTH_SHORT).show();
                break;

            case R.id.outbox:
                Toast.makeText(MainActivity.this, "This is a Outbox option", Toast.LENGTH_SHORT).show();
        }

        return false;
    }
};
To set the Click events listner apply its onNavigationItemSelectedListener and overide its methods.

DONT FORGET TO SET THE LISTNER in the onCreate method





KOTLIN :


package com.deepesh.testapp
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import android.widget.Toast
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.appcompat.widget.Toolbar
import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView

class MainActivity : AppCompatActivity() {

    lateinit var drawerlayout1:DrawerLayout
    lateinit var navigationview1:NavigationView
    lateinit var toolbar1:Toolbar

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.navigationviewlayout)

        drawerlayout1=findViewById(R.id.drawerlayout1)
        toolbar1=findViewById(R.id.toolbat1)

        val actionbartoggle:ActionBarDrawerToggle = ActionBarDrawerToggle(this, drawerlayout1, toolbar1, R.string.nav_open, R.string.nav_close);
        actionbartoggle.syncState()
        drawerlayout1.addDrawerListener(actionbartoggle)

        navigationview1=findViewById(R.id.mynavigationview)

    }



}

































Comments

Post a Comment

Popular posts from this blog

React Js + React-Redux (part-2)

Image
  Useful : 1]  Click  2] " Click "  NOTE  :   In the "Reducer" function always have a 'default' switch case,else you'll get Undefined state error. Redux.JS Redux is an open-source state management javascript library.  As the application grows, it becomes difficult to keep it organized and maintain data flow. Redux solves this problem by managing application’s state with a single global object called Store. Redux itself is  a standalone library  that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and React are commonly used together, they are independent of each other. NOTE  :  The data in react always flows from parent to child components,which makes react  "Unidirectional" . Unlike react,  Angular makes use of bi-directional binding in which the data flow takes place in both directions. What problem does Redux solve  ? So,  state is everywhere in ...
Read more

React Js + CSS Styling + React Router (part-1)

Image
Useful : 1] Click  2] Click  3] React Roadmap React is an open source, JavaScript library for developing user interface (UI) in web application. React is developed and released by  Facebook in 2013 . React has a component based architecture i.e everything is a component ,this let you break-down your application into small parts which can then be composed to make complex interfaces. In the past, when browsers were much less capable than today, and JavaScript performance was poor, every page was coming from a server. Every time you clicked something, a new request was made to the server and the browser subsequently loaded the new page. Today, popularized by modern frontend JavaScript frameworks like React, an app is usually built as a single page application: you only load the application code (HTML,  CSS ,  JavaScript ) once, and when you interact with the application, what generally happens is that JavaScript intercepts the browser events and instead of making ...
Read more

ViteJS (Module Bundlers, Build Tools)

Image
Module Bundlers ( Useful :1] Click  2] Click ) Web browsers can only understand and execute JavaScript, HTML and CSS . However, developers often use other technologies and tools like React, Sass, TypeScript, and Tailwind to improve the development process, write more maintainable code, and add additional functionality to their applications. We need a way to combine all this JS & CSS code into a single optimized javascript file, this is achieved through module bundling. A module bundler is a tool that takes all the JavaScript files in a project and combines them into a single JS file (or a few files) that can be loaded by a browser. It usually starts with an entry point file, and from there it will start looking for "import" statements and then bundles up all of code needed for that entry file. The entry point is typically defined in the config file of the bundler. The entry point is the file where the bundler starts its traversal of the application's dependencies...
Read more