Navigation Drawer Example in Android
Hello Friends, Today we will teach you how to create Navigation Drawer in Android using Empty project.
Step 1. :- Create new Empty project.
Step 2. :- Now we need to Add the Design dependency in build.gradle ( Module:app ) file.
For API Level 28 we need to implement 'com.android.support:design:28.0.0' dependency.
implementation 'com.android.support:design:28.0.0'
For API Level 29 ( AndroidX ) we need to implement 'com.google.android.material:material:1.0.0'
implementation 'com.google.android.material:material:1.0.0'
Step 3. :- Now we need to create Menu folder in our project directory for create navigation drawer's menu.
Click right on app select new, click on Android Resource Directory.
Now Select menu on Resource Type then click ok
Step 4. :- Now we need to create one xml file in our menu folder for navigation drawer's menu.
Click right on menu and select new, now click on Menu resource file and type any name then click OK.
Step 5. :- Now create group of the menu and create item for showing menu of our navigation drawer.
menuitems.xml :-
<?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/fav"
android:title="Favorite"
android:icon="@android:drawable/btn_star_big_on"/>
<item
android:icon="@android:drawable/ic_menu_search"
android:title="Search"
android:id="@+id/search"/>
</group>
<item android:title="Communicate">
<menu>
<item
android:id="@+id/cancel"
android:icon="@android:drawable/ic_menu_close_clear_cancel"
android:title="Cancel" />
</menu>
</item>
</menu>
Note :- we use icons for our menu.
Step 6. :- Now we need to create header file for our navigation drawer. so create one more xml layout file for header.
we need to set layout height = 176dp is standard height of navigation drawer header layout.
nav_header.xml :-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="176dp"
android:background="@android:color/holo_blue_dark">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="@+id/nav_pic"
android:src="@drawable/ic_launcher_background"
android:layout_centerInParent="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Start with Android App"
android:textColor="@android:color/white"
android:textSize="20sp"
android:layout_below="@+id/nav_pic"
android:layout_centerInParent="true"
android:layout_marginTop="8dp"
android:id="@+id/nav_title"/>
</RelativeLayout>
Step 7. :- Now we need to remove actionbar from our app because of we will add toolbar for our navigation drawer.
we need to open resource ( res ) folder then open values folder and now open styles.xml file and remove darkactionbar to noactionbar.
styles.xml :-
Step 8. :- Now open activity_main.xml for add some codes.
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_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/toolbar"
android:background="@android:color/holo_purple"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome"
android:textSize="25sp"
android:id="@+id/textView"
android:layout_centerInParent="true"/>
</RelativeLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/navigationView"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/menuitems"
android:layout_gravity="start"/>
</androidx.drawerlayout.widget.DrawerLayout>
we need to change main layout as a DrawerLayout because in this layout open our navigation drawer.
now we need to add NavigationView element in our drawer layout for our navigation drawer. In this element we need to add our navigation drawer header and navigation drawer menu and set width as a wrap_content and set layout_gravity start because of the navigation drawer comes from the left side that's way we need to set layout_gravity as start.
Now we need to add another layout for our main layout. This layout show our home page.
Step 9. :- Now go to MainActivity.java file and write some codes like this.
MainActivity.java :-
package com.akshayarora.uvdjunction.navigationdrawer;
import android.os.Bundle;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.snackbar.Snackbar;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.core.view.GravityCompat;
import androidx.appcompat.app.ActionBarDrawerToggle;
import android.view.MenuItem;
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;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private NavigationView navigationView;
private DrawerLayout drawerLayout;
private ActionBarDrawerToggle actionBarDrawerToggle;
private TextView textView;
private Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setUpToolbar();
navigationView = (NavigationView) findViewById(R.id.navigationView);
textView = (TextView) findViewById(R.id.textView);
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, "Welcome Text", Toast.LENGTH_SHORT).show();
}
});
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
switch (menuItem.getItemId()) {
case R.id.fav:
Toast.makeText(MainActivity.this, "Clicked on Fav", Toast.LENGTH_SHORT).show();
break;
case R.id.search:
Toast.makeText(MainActivity.this, "Click on Search", Toast.LENGTH_SHORT).show();
break;
case R.id.cancel:
Toast.makeText(MainActivity.this, "Click on Cancel", Toast.LENGTH_SHORT).show();
break;
}
return false;
}
});
}
private void setUpToolbar() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
setSupportActionBar(toolbar);
actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.app_name, R.string.app_name);
drawerLayout.addDrawerListener(actionBarDrawerToggle);
actionBarDrawerToggle.syncState();
}
@Override
public void onBackPressed() {
if (this.drawerLayout.isDrawerOpen(GravityCompat.START)) {
this.drawerLayout.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
}
We create setUpToolbar method for add drawer hamburger icon with toggle the navigation drawer ( for close and open drawer ).
we call override method onBackPressed because if navigation drawer is open and user click on back button then first drawer close and click again on back button then our app close.
Now run the project and see the output
Output
Enjoy !
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.