Most of the apps have Bottom Navigation With Navigation Drawer In Android Or IOS. In this tutorial we will learn to implement that feature. This is quite easy to use and implement, follow the below steps.

Why Do Use Navigation Drawer With Bottom Navigation I Android Or IOS Apps?

This is mostly used to.

Required Files And Contents.

Following files and icons will used to implement for create the Bottom Navigation With Navigation Drawer In Android Studio. You can use your icons but sure replace the name with your icons.

activity_drawer_and_bottom_nav.xml

This is the main layout xml file in which we will create the Drawer Navigation and Bottom Navigation Bar. Copy and paste below code in your project’s file.

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        tools:openDrawer="start">

        <RelativeLayout
            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="wrap_content"
                android:minHeight="?attr/actionBarSize"
                android:background="@color/design_default_color_secondary"/>

            <FrameLayout
                android:id="@+id/frameLayout"
                android:layout_below="@id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_above="@id/bottomNavigationView"/>

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottomNavigationView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:background="@color/purple_500"
                app:itemTextColor="@color/white"
                android:padding="10dp"
                app:menu="@menu/item_bottom_navigation" />

        </RelativeLayout>

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/navView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:paddingVertical="20dp"
            app:headerLayout="@layout/drawer_header_layout"
            app:menu="@menu/item_drawer"
            app:itemHorizontalPadding="40dp"
            app:itemIconPadding="30dp"
            app:itemIconSize="20dp"
            android:fitsSystemWindows="true"
            android:background="@color/white"
            app:itemBackground="@drawable/item_background_nav_checked"
            app:itemTextAppearance="?android:attr/textAppearanceSmallInverse"/>

    </androidx.drawerlayout.widget.DrawerLayout>


</layout>

DrawerAndBottomNavActivity.java

This is the main java file for above xml file. All the Bottom Navigation and Drawer Navigation logics are written here. If you copy this file in your project then please change the names of file with your file names. Click listeners for both Bottom Navigation and Drawer Navigation are implemented in this class.

Note: We have used Data Binding in this project. Please have a visit of Data Binding if you haven’t heard about it.

package com.example.mytestapp.Activity;

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.view.GravityCompat;
import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.graphics.Color;
import android.os.Bundle;
import android.view.MenuItem;

import com.example.mytestapp.Fragment.CallFragment;
import com.example.mytestapp.Fragment.ChatFragment;
import com.example.mytestapp.Fragment.HomeFragment;
import com.example.mytestapp.Fragment.StatusFragment;
import com.example.mytestapp.R;
import com.example.mytestapp.databinding.ActivityDrawerAndBottomNavBinding;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.android.material.navigation.NavigationView;

public class DrawerAndBottomNavActivity extends AppCompatActivity {
    private ActivityDrawerAndBottomNavBinding binding;
    private ActionBarDrawerToggle toggle;
    private OnBackPressedListener onBackpressedListener;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_drawer_and_bottom_nav);

        initView();
    }

    private void initView() {

        setSupportActionBar(binding.toolbar);
        binding.toolbar.setTitleTextColor(Color.WHITE);

        //set default home fragment and its title
        getSupportActionBar().setTitle("Home");
        getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout, new HomeFragment()).commit();
        binding.navView.setCheckedItem(R.id.drawer_home);

        toggle = new ActionBarDrawerToggle(this, binding.drawer, binding.toolbar, R.string.open, R.string.close);
        binding.drawer.addDrawerListener(toggle);
        toggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.white));
        toggle.syncState();

        //navigation drawer item click and drawer click listener
        binding.navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            Fragment fragment = null;
            @Override
            public boolean onNavigationItemSelected( MenuItem item) {
                switch (item.getItemId()){
                    case R.id.drawer_home:
                        fragment = new HomeFragment();
                        binding.drawer.closeDrawer(GravityCompat.START);
                        getSupportActionBar().setTitle("Home");
                        callFragment(fragment);
                        break;

                    case R.id.drawer_contact:
                        fragment = new CallFragment();
                        binding.drawer.closeDrawer(GravityCompat.START);
                        getSupportActionBar().setTitle("Contact US");
                        callFragment(fragment);
                        break;

                    case R.id.drawer_about:
                        fragment = new ChatFragment();
                        binding.drawer.closeDrawer(GravityCompat.START);
                        getSupportActionBar().setTitle("About US");
                        callFragment(fragment);
                        break;

                }
                return true;
            }
        });

//        bottom navigation click listener
        binding.bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.home_bottom:
                        callFragment(new ChatFragment());
                        break;
                    case R.id.call_bottom:
                        callFragment(new StatusFragment());
                        break;
                    case R.id.chat_bottom:
                        callFragment(new CallFragment());
                        break;
                }
                return true;
            }
        });
    }

    //loading the another fragment in viewPager
    private void callFragment(Fragment fragment){
        FragmentManager manager = getSupportFragmentManager();
        FragmentTransaction transaction = manager.beginTransaction();
        transaction.setCustomAnimations(android.R.anim.slide_in_left, android.R.anim.slide_out_right);
        transaction.replace(R.id.frameLayout, fragment);
        transaction.addToBackStack(null);
        transaction.commit();
    }

    //on backpress
    @Override
    public void onBackPressed() {
        if (onBackpressedListener !=null){
            getSupportActionBar().setTitle("Home");
            binding.navView.setCheckedItem(R.id.drawer_home);
            onBackpressedListener.doBack();
            binding.drawer.closeDrawer(GravityCompat.START);
        }else if(onBackpressedListener == null){
            finish();
            super.onBackPressed();
        }
    }

    public interface OnBackPressedListener {
        void doBack();
    }
    public void setOnBackPressedListener(OnBackPressedListener onBackPressedListener){
        this.onBackpressedListener = onBackPressedListener;
    }

    @Override
    protected void onDestroy() {
        onBackpressedListener = null;
        super.onDestroy();
    }
}

item_drawer.xml

Create a resource menu directory then create this file inside the menu resource directory. The items created inside will be loaded in the Drawer Navigation. Please change the icons with your icons name.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <group>

        <item
            android:id="@+id/drawer_home"
            android:title="Home"
            android:icon="@drawable/icon_home"/>

        <item android:id="@+id/drawer_contact"
            android:title="Contact Us"
            android:icon="@drawable/icon_contact"/>

        <item android:id="@+id/drawer_about"
            android:title="About Us"
            android:icon="@drawable/icon_about"/>

        <item android:id="@+id/drawer_logout"
            android:title="Logout"
            android:icon="@drawable/icon_about"/>
    </group>

</menu>

item_bottom_navigation.xml

Create a resource menu directory then create this file inside the menu resource directory. The items created inside will be loaded in the Bottom Navigation. Please change the icons with your icons name.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/home_bottom"
        android:title="Home"/>

    <item android:id="@+id/call_bottom"
        android:title="Call"/>

    <item android:id="@+id/chat_bottom"
        android:title="Chat"/>

</menu>

item_background_nav_checked.xml

Create this file in res-> Drawable -> item_background_nav_checked.xml. This is used to set the background color of clicked items in Drawer Navigation.

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

Fragments

Create all fragment that are used above. Fragments which are need in this example are:

• HomeFragment
• AboutUsFrament
• ContactUsFragment
• ChatFragment

Result

Below is the result of above example. Both Navigation Drawer and Bottom Navigation is implemented together as you can see in these images.

For any doubt and query you can comment in the comment section below. You can also post your content here out of free.

Please leave this field empty

Don’t miss new tips!

Email Address *

We don’t spam! Read our [link]privacy policy[/link] for more info.

Thank You For Subscribe. Check your inbox or spam folder to confirm your subscription.