How to customize navigation drawer in android studio

0 Comments





In this article, we can create a customize navigation drawer for android application. If you want to make your own navigation design then you must follow stepwise.

Step: 1

First, we can import material design dependency in your buil.gradle(Module: app) under Gradle Script. So you can copy design dependency then you can paste in your project.

// Material Design Dependency
implementation 'com.google.android.material:material:1.1.0'

Step: 2

Next, we can create a navigation drawer item. So first, we can create an “Android Resource Directory” after that you can create a “navigation_menu.xml” under the menu folder then you can create a navigation item that will show in navigation drawer.  The code is given below.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/home"
android:icon="@drawable/home"
android:title="Home" />

<item
android:id="@+id/wallet"
android:icon="@drawable/wallet"
android:title="Wallet" />
<item
android:id="@+id/share"
android:icon="@drawable/share"
android:title="Share" />
<item
android:id="@+id/rating"
android:icon="@drawable/star"
android:title="Rate this app" />
</group>

<item
android:id="@+id/privacy"
android:icon="@drawable/privacy"
android:title="Privacy Policy" />
<item
android:id="@+id/terms"
android:icon="@drawable/policy"
android:title="Terms &amp; Conditions" />

</menu>

Step: 3

We can create a navigation icon for navigation drawer items in the android studio. So go to res folder and right-click on the drawer folder and go to New and select Vector Asset.  And select your own icons for your navigation drawer items.

Step: 4

Now, you can create a navigation header model Icon, title, and email ID. So you can copy the below code in your project.

<?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:layout_height="156dp"
android:background="@color/colorPrimaryDark"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="16dp">

<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="24dp"
android:contentDescription="@string/app_name"
android:elevation="3dp"
android:src="http://www.click2code.in/android-studio/how-to-customize-navigation-drawer-in-android-customize-navigation-drawer-menu-in-android-studio/@drawable/logo" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:fontFamily="@font/open_sans_semibold"
android:text="CLICK2CODE"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:textColor="@android:color/white"
android:textStyle="bold" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/open_sans"
android:text="nilkanthpawan@gmail.com"
android:textAppearance="@style/TextAppearance.AppCompat.Small"
android:textColor="@android:color/white" />

</androidx.appcompat.widget.LinearLayoutCompat>

Step: 5

Now, you can create an open drawer and close drawer in string.xml under the values folder. So code is given below.

<resources>
<string name="app_name">Custom Navigation Drawer</string>
<string name="close">Close</string>
<string name="open">Open</string>
</resources>

Step: 6

Next, we can create a code for  activity_main.xml. Under this activity, you can copy below code directly in your project in 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"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:openDrawer="start">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimaryDark"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Custom Navigation" />

<FrameLayout
android:id="@+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

<com.google.android.material.navigation.NavigationView
android:id="@+id/navigation_menu"
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>

Step: 7

Now, you can create a code in MainActivity.java for a complete customize navigation drawer then first you can create a variable under JAVA activity. The code is given below.

If you want to watch YouTube Video for better understanding then:  CLICK HERE

NavigationView navigationView;
ActionBarDrawerToggle actionBarDrawerToggle;
DrawerLayout drawerLayout;
Fragment fragment = null;

Now, you can copy all code under the onCreate method, then you can copy all code and paste in your project.

Toolbar toolbar = findViewById(R.id.toolBar);
setSupportActionBar(toolbar);

navigationView = findViewById(R.id.navigation_menu);
navigationView.setItemIconTintList(null);
drawerLayout = findViewById(R.id.drawer);

actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close);
drawerLayout.addDrawerListener(actionBarDrawerToggle);
actionBarDrawerToggle.syncState();

fragment = new HomeFragment();
loadFragment(fragment);
drawerLayout.closeDrawer(GravityCompat.START);

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.home:
fragment = new HomeFragment();
loadFragment(fragment);
drawerLayout.closeDrawer(GravityCompat.START);
break;
case R.id.wallet:
fragment = new WalletFragment();
loadFragment(fragment);
drawerLayout.closeDrawer(GravityCompat.START);
break;
case R.id.share:
fragment = new ShareFragment();
loadFragment(fragment);
drawerLayout.closeDrawer(GravityCompat.START);
break;
case R.id.rating:
fragment = new RateFragment();
loadFragment(fragment);
drawerLayout.closeDrawer(GravityCompat.START);
break;
case R.id.privacy:
fragment = new PrivacyFragment();
loadFragment(fragment);
drawerLayout.closeDrawer(GravityCompat.START);
break;
case R.id.terms:
fragment = new TermsFragment();
loadFragment(fragment);
drawerLayout.closeDrawer(GravityCompat.START);
break;
}
return true;
}
});

Now, you can load fragment out of the onCreate method for Fragment Activity then you can copy all below code in your project.

private void loadFragment(Fragment fragment) {
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.frame, fragment).commit();
drawerLayout.closeDrawer(GravityCompat.START);
fragmentTransaction.addToBackStack(null);
}

LAST ONE THING: One thing you can change ActionBar into NoActionBar under styles.xml.








share this

Leave a Reply

Your email address will not be published. Required fields are marked *