Beautiful Navigation Drawer in Android

In this article, we are going to learn how to create a beautiful Navigation Drawer in Android by using Empty Activity.

In the below image you can see that what are we going to build.

Hope so you are interested to know how to make the above beautiful Navigation Drawer in Android, so now without wasting much time let’s start.

You can also refer our video tutorial for same.

So let’s start with this tutorial :

Beautiful Navigation Drawer in Android

1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and provide a name to your project. choose Empty activity. By default activity name is MainActivity.java.

2. Now open build.gradle file and add the below dependencies.

implementation 'com.google.android.material:material:1.0.0'
implementation 'de.hdodenhof:circleimageview:3.1.0'

3. Now open res => values => dimens.xml file and paste the below code.

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen tools:override="true"
        name="design_navigation_separator_vertical_padding">40dp</dimen>
</resources>

4. Now open res => values => strings.xml file and paste the below code.

<resources>
    <string name="app_name">Beautiful_navigation_drawer</string>
    <string name="open">Open</string>
    <string name="close">Close</string>
    <string name="hello_blank_fragment">Hello blank fragment</string>
</resources>

5. Now open res => values => styles.xml file and paste the below code to apply some custom styles.

<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">#0E66B9</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="drawerArrowStyle">@style/DrawerIcon</item>
        <item name="android:listDivider">@android:color/transparent</item>
        <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"/>
    <style name="TextViewStyle" parent="android:Widget.TextView"
        >
        <item name="android:fontFamily">@font/nunito_semibold</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">#fff</item>
    </style>
   <style name="DrawerIcon" parent="Widget.AppCompat.DrawerArrowToggle"
       >
       <item name="color">#AE000000</item>
   </style>
</resources>

6. Now to apply custom font, create a new resource directory by navigating res => New => Android Resource Directory and give the directory name as “font” and select “font” from resource type.

7. Now download this folder and copy all drawable resources from the drawable folder and paste all in res => drawable and copy all fonts from the font folder and paste in the font res => font.

8. Create a new layout res file by navigating res => layout => New => Layout resource file =>app_bar_main.xml and put the below lines of code to make custom tool bar for app.

<?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"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        app:elevation="0dp"
        android:fitsSystemWindows="true"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        >
        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:background="#fff"
            android:id="@+id/toolBar"
            app:popupTheme="@style/AppTheme.popUpOverlay"
            app:layout_scrollFlags="scroll|enterAlways"
            android:layout_height="60dp">
        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.AppBarLayout>
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/frame"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
    </FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

9.  Create a new layout res file by navigating res => layout => New => Layout resource file =>nav_header.xml and put the below lines of code to make the header view for navigation drawer for the app.

<?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="250dp"
    android:background="#0E66B9"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingLeft="16dp"
    android:layout_marginBottom="-70dp"
    >
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_marginTop="80dp"
        android:layout_marginLeft="10dp"
        android:src="@drawable/girl2"
        android:layout_centerVertical="true"
        android:id="@+id/imageView"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/imageView"
        android:id="@+id/name"
        android:layout_marginLeft="20dp"
        android:layout_centerVertical="true"
        android:text="Chike Mgbemena"
        android:textColor="#fff"
        android:textSize="14sp"
        android:fontFamily="@font/nunito_semibold"
        />
</RelativeLayout>

10. Now to apply custom font, create a new resource directory by navigating res => New => Android Resource Directory and give the directory name as “menu” and select “menu” from resource type.

11. Now open res => menu => menu.xml file and put the below lines of code to create menu items for navigation drawer.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <group android:checkableBehavior="single">
      <item
          android:title="Search"
          android:icon="@drawable/search"
          android:id="@+id/search"
          />
      <item
          android:title="Basket"
          android:icon="@drawable/basket"
          android:id="@+id/basket"
          />
      <item
          android:title="Favorites"
          android:icon="@drawable/favorite"
          android:id="@+id/favorite"
          />
      <item
          android:title="Promo-codes"
          android:icon="@drawable/promo_code"
          android:id="@+id/promo_code"
          />
      <item
          android:title="Orders"
          android:icon="@drawable/orders"
          android:id="@+id/orders"
          />
  </group>
    <item android:title=""
        >
        <menu>
            <group android:checkableBehavior="single">
                <item
                    android:title="Setting"
                    android:icon="@drawable/setting"
                    android:id="@+id/setting"
                    />
                <item
                    android:title="Support"
                    android:icon="@drawable/support"
                    android:id="@+id/support"
                    />
            </group>
        </menu>
    </item>
</menu>

12.  Now create a new drawable res file by navigating res => drawable => New => Drawable resource file =>menu_back.xml and put the below lines of code.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <solid
     android:color="#34FFFFFF"
     />
    <corners
        android:radius="25dp"
        />
</shape>

13.  Again create a new drawable res file by navigating res => drawable => New => Drawable resource file =>menu_back_state.xml and put the below lines of code.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/transparent" 
    android:state_checked="false"
    />
    <item android:drawable="@drawable/menu_back" 
        android:state_checked="true"/>
</selector>

14.  Now create a new drawable res file by navigating res => drawable => New => Drawable resource file =>menu_item_padding.xml and put the below lines of code.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item
     android:left="10dp"
     android:right="10dp"
     android:drawable="@drawable/menu_back_state"
     >
 </item>
</layer-list>

12. Now go to your activity_main.xml file and paste the below lines of code to make Drawer Layout.

<?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:layout_width="match_parent"
    android:background="#fff"
    android:fitsSystemWindows="true"
    tools:openDrawer="start"
    android:id="@+id/drawer"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  <include
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    layout="@layout/app_bar_main"
    />
    <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/nav_view"
        android:background="#0E66B9"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/menu"
        app:itemBackground="@drawable/menu_item_padding"
        app:itemIconTint="#fff"
        app:itemTextAppearance="@style/TextViewStyle"
        app:itemHorizontalPadding="40dp"

        />
</androidx.drawerlayout.widget.DrawerLayout>

13. Now create required fragments for drawer menu items.

14. Now open MainActivity.java file and put the below lines of code to add functionality on Drawer Layout.

package com.thecodingshef.beautiful_navigation_drawer;
import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.view.MenuItem;
import com.google.android.material.navigation.NavigationView;
public class MainActivity extends AppCompatActivity {
DrawerLayout drawerLayout;
ActionBarDrawerToggle toggle;
Toolbar toolbar;
NavigationView navigationView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawerLayout=findViewById(R.id.drawer);
        toolbar=findViewById(R.id.toolBar);
        setSupportActionBar(toolbar);
        toggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close);
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();
        navigationView=findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                int id=menuItem.getItemId();
                Fragment fragment=null;
                switch (id)
                {
                    case R.id.search:
                        fragment=new SearchFragment();
                        loadFragment(fragment);
                        break;
                    case R.id.basket:
                        fragment=new BasketFragment();
                        loadFragment(fragment);
                        break;
                    case R.id.favorite:
                        fragment=new FavFragment();
                        loadFragment(fragment);
                        break;
                    case R.id.promo_code:
                        fragment=new PromoCodeFragment();
                        loadFragment(fragment);
                        break;
                    case R.id.orders:
                        fragment=new OrderFragment();
                        loadFragment(fragment);
                        break;
                    case R.id.setting:
                        fragment=new SettingFragment();
                        loadFragment(fragment);
                        break;
                    case R.id.support:
                        fragment=new SupportFragment();
                        loadFragment(fragment);
                        break;
                    default:
                        return true;
                }
                return true;
            }
        });
    }
    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);
    }
}

15. Finally, run the app and you will get the output as shown in the demo image.

If you found this post useful, don’t forget to share this with your friends, and if you have any query feel free to comment it in the comment section.

Thank you 🙂 Keep Learning !

Leave a Comment

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