Android Navigation Drawer Menu
Creating Android Navigation Drawer Menu is a complex task involving bunch of steps.
So, let's start.
1) In activity_main.xml file change the root level layout to DrawerLayout. So whatever layout is there, make it DrawerLayout at the very beginning.
2) Add NavigationView before the closing TAG of DrawerLayout
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:id="@+id/navigationView" />
3) Add following properties inside the opening DrawerLayout
android:fitsSystemWindows="true"
tools:openDrawer="start"4) Now Create a LayoutResouceFile and name it as header.xml. We will use this file
as the header for DrawerLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical"
android:background="@drawable/background"
android:gravity="bottom"
android:padding="20dp">
<ImageView
android:layout_width="75dp"
android:layout_height="75dp"
android:src="@drawable/launcher_icon"
android:visibility="visible"/>
<TextView
android:id="@+id/txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/baloo"
android:textColor="@color/colorUserName"
android:paddingTop="@dimen/paddingTop"
android:text="@string/app_name"
android:textSize="@dimen/caption" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/aclonica"
android:textColor="@color/colorUserName"
android:text="domain.in"
android:textSize="@dimen/mediumText" />
</LinearLayout>
When you run, you will find few missing attributes. Add them one after another.
4) Add headerLayout attribute within NavigationView
app:headerLayout="@layout/header"
5) Now create a new LayoutResouceFile, viz menu under res directory
Add Layout File, viz we will name it as main_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item android:title="Information">
<menu>
<item
android:id="@+id/nav_logout"
android:icon="@drawable/logout"
android:title="Logout" />
</menu>
</item>
</group>
<group android:id="@+id/nav_footer">
<item
android:id="@+id/nav_version"
android:icon="@drawable/appversion"
android:title="Version" />
</group>
</menu>
6) Now inside NavigationView add following :
app:menu="@menu/main_menu"
7) Set NoActionBar inside themes.xml
8) Now go to MainActivity.javaAdd following two lines inside strings.xml file at first<string name="open_drawer">Open Navigation Drawer</string>
<string name="close_drawer">Close Navigation Drawer</string>Now go to MainActivity.java and add following:Define following objectsDrawerLayout drawerLayout;
NavigationView navigationView;Inside onCreate Method writedrawerLayout = findViewById(R.id.drawerLayout);
navigationView = findViewById(R.id.navigationView);ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,
drawerLayout, toolbar, R.string.open_drawer, R.string.close_drawer);
drawerLayout.addDrawerListener(toggle);
toggle.syncState();
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
if ( id == R.id.nav_logout) {
// logout(); // Define Logout action / any action you prefer
}
drawerLayout.closeDrawer(GravityCompat.START);}return true;
});Also Add onbackPressed() method within MainActivity.java to handle what happens when user presses back button.@Override
public void onBackPressed() {
if(drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
Comments
Post a Comment