How to add Navigation Drawer Menu in android| Todo Android app using Node JS and REST API | Part 4

In this series of todo app using rest API, today we will discuss how to add a navigation drawer menu in android.

If you’re new then go through the previous parts of this project otherwise you will not understand anything about this project.

Part 1 (CLICK HERE)

Part 2 (CLICK HERE)

Part 3 (CLICK HERE)

Overview

Add Navigation Drawer

In the main activity XML file (/res/layout/activity_main.xml) adds navigation view for the navigation drawer menu and add frame layout for the fragments. Here I used two fragments, one is the Home fragment and one is the Finished task fragment.

<?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:layout_height=”match_parent”
android:id=”@+id/drawer_layout”
android:fitsSystemWindows=”true”
tools:context=”.MainActivity”
android:background=”@color/white”>
<LinearLayout
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”>
<include layout=”@layout/app_bar_layout”/>
<FrameLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:id=”@+id/content”>
</FrameLayout>
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width=”wrap_content”
android:layout_height=”match_parent”
app:itemTextColor=”@color/textColor”
app:headerLayout=”@layout/navigation_header”
app:menu=”@menu/menu”
android:layout_gravity=”start”
android:id=”@+id/navigationView”/>

</androidx.drawerlayout.widget.DrawerLayout>

Create Menu and Navigation header

  • Now create a menu for our navigation drawer menu and a navigation header which we will create after creating the menu for the navigation drawer menu.
  • Now create a menu resource directory in the res folder (/res/new/android resource directory/select menu) and a new menu drawable file menu.xml (/res/menu/menu.xml).

<?xml version=”1.0" encoding=”utf-8"?>
<menu xmlns:android=”http://schemas.android.com/apk/res/android">
<group
android:id=”@+id/group1"
android:checkableBehavior=”single”>
<item
android:title=”@string/home”
android:id=”@+id/action_home”
android:icon=”@drawable/ic_home” />
<item
android:title=”@string/finished_task”
android:id=”@+id/action_finished_task”
android:icon=”@drawable/finished_task”/>
<item
android:title=”@string/logout”
android:id=”@+id/action_logout”
android:icon=”@drawable/ic_logout”/>
</group>
</menu>

  • Next, create a layout file for the navigation header under the layout folder (/res/layout/navigation_header.xml) for the navigation drawer menu

<?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=”200dp”
xmlns:app=”http://schemas.android.com/apk/res-auto"
android:id=”@+id/nav_header_main”
android:background=”@color/colorPrimary”>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width=”64dp”
android:layout_height=”64dp”
android:id=”@+id/avatar”
android:layout_alignParentTop=”true”
android:layout_marginTop=”55dp”
android:layout_marginStart=”30dp”
android:src=”@drawable/icon_profile_main”
app:civ_border_width=”2dp”
app:civ_border_color=”@color/colorAccent”
android:padding=”2dp”/>
<TextView
android:id=”@+id/username”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@+id/avatar”
android:layout_marginStart=”25dp”
android:layout_marginTop=”20dp”
android:fontFamily=”@font/ubuntu_medium”
android:includeFontPadding=”false”
android:text=”@string/your_name”
android:textColor=”@color/colorAccent”
android:textSize=”16sp” />
<TextView
android:id=”@+id/useremail”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@+id/username”
android:layout_marginStart=”25dp”
android:fontFamily=”@font/ubuntu”
android:includeFontPadding=”false”
android:text=”@string/your_email_id”
android:textColor=”@color/colorAccent”
android:textSize=”14sp” />
</RelativeLayout>

Create app bar and app bar menu

  • Now create the app bar for our app and also add a menu in the app bar. This menu contains two items, one is a refresh item and another one is a share item.
  • First, create a menu for the app bar (/res/menu/main_menu.xml).

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

<item
android:title=”Refresh”
app:showAsAction=”always”
android:id=”@+id/refresh_menu”
android:icon=”@drawable/refresh”/>

<item
android:title=”Share App”
android:id=”@+id/action_share”
app:showAsAction=”always”
android:icon=”@drawable/share”/>
</menu>

  • Next, create an app bar (/res/layout/app_bar.xml) and add the main menu

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height=”?attr/actionBarSize”
xmlns:app=”http://schemas.android.com/apk/res-auto"
android:theme=”@style/ThemeOverlay.MaterialComponents.Dark”
app:layout_collapseMode=”pin”
app:layout_scrollFlags=”scroll|enterAlways”
android:elevation=”8dp”
android:background=”@color/colorPrimary”
app:menu=”@menu/main_menu”
android:id=”@+id/toolbar”>

</androidx.appcompat.widget.Toolbar>

Add functionality

Now in the main java file add our menus and app bar

public class MainActivity extends AppCompatActivity {
SharedPreferenceClass sharedPreferenceClass;
private Toolbar toolbar;
private DrawerLayout drawerLayout;
private ActionBarDrawerToggle drawerToggle;
private NavigationView navigationView;
private TextView user_name, user_email;
private CircleImageView user_image;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_main);
sharedPreferenceClass = new SharedPreferenceClass(this);

drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
navigationView = (NavigationView) findViewById(R.id.
navigationView);
toolbar = (Toolbar) findViewById(R.id.
toolbar);
setSupportActionBar(toolbar);

View hdView = navigationView.getHeaderView(0);
user_name = (TextView) hdView.findViewById(R.id.
username);
user_email = (TextView) hdView.findViewById(R.id.
useremail);
user_image = (CircleImageView) hdView.findViewById(R.id.
avatar);

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
setDrawerClick(item.getItemId());
item.setChecked(true);
drawerLayout.closeDrawers();
return true;
}
});
initDrawer();
}

private void initDrawer() {
FragmentManager manager = getSupportFragmentManager();
FragmentTransaction ft = manager.beginTransaction();
ft.replace(R.id.
content, new HomeFragment());
ft.commit();

drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close){
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}

@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
};

drawerToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.colorAccent));

drawerLayout.addDrawerListener(drawerToggle);
}

@Override
public void onPostCreate(@Nullable Bundle savedInstanceState ) {
super.onPostCreate(savedInstanceState);
drawerToggle.syncState();
}

@Override
public void onConfigurationChanged(@NonNull Configuration newConfig) {
super.onConfigurationChanged(newConfig);
drawerToggle.onConfigurationChanged(newConfig);
}

private void setDrawerClick(int itemId) {
switch (itemId) {
case R.id.
action_finished_task:
getSupportFragmentManager().beginTransaction().replace(R.id.
content, new FinishedTaskFragment()).commit();
break;
case R.id.
action_home:
getSupportFragmentManager().beginTransaction().replace(R.id.
content, new HomeFragment()).commit();
break;
case R.id.
action_logout:
sharedPreferenceClass.clear();
startActivity(new Intent(MainActivity.this, LoginActivity.class));
finish();
break;
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.
main_menu, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {

switch (item.getItemId()){
case R.id.
action_share:
break;

case R.id.refresh_menu:
break;
}
return super.onOptionsItemSelected(item);
}
}

Create fragments

  • Now create two blank fragments (/package/new/fragment/blank fragment), one is HomeFragment and another one is FinishedTaskFragemnt.

fragment_home.xml

<?xml version=”1.0" encoding=”utf-8"?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:tools=”http://schemas.android.com/tools"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background=”@color/white”
xmlns:app=”http://schemas.android.com/apk/res-auto"
tools:context=”.Fragments.HomeFragment”>

<ImageView
android:layout_width=”250dp”
android:layout_height=”250dp”
android:src=”@drawable/box”
android:layout_centerHorizontal=”true”
android:layout_centerVertical=”true”
android:id=”@+id/empty_image”
android:visibility=”gone”
app:tint=”@color/backgroundMain” />
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/empty_text”
android:text=”Sorry, No Task Found”
android:textAlignment=”center”
android:textSize=”17sp”
android:fontFamily=”@font/ubuntu_bold”
android:textColor=”@color/backgroundMain”
android:layout_marginTop=”-40dp”
android:layout_below=”@+id/empty_image”
android:layout_centerVertical=”true”
android:layout_centerHorizontal=”true”
android:visibility=”gone”
android:padding=”5dp”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/empty_text2"
android:text=”@string/add_a_task_click_button”
android:textAlignment=”center”
android:textSize=”17sp”
android:fontFamily=”@font/ubuntu”
android:textColor=”@color/backgroundMain”
android:layout_below=”@+id/empty_text”
android:layout_centerVertical=”true”
android:layout_centerHorizontal=”true”
android:visibility=”gone”
android:padding=”5dp”/>

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:backgroundTint=”@color/buttonColor”
android:src=”@drawable/ic_add”
android:id=”@+id/add_task_btn”
android:layout_alignParentBottom=”true”
android:layout_alignParentEnd=”true”
android:layout_marginBottom=”20dp”
android:layout_marginEnd=”20dp”
app:elevation=”10dp”
android:contentDescription=”@string/todo” />

</RelativeLayout>

HomeFragemnt.java

public class HomeFragment extends Fragment implements RecyclerviewClickListener {

SharedPreferenceClass sharedPreferenceClass;
FloatingActionButton floatingActionButton;
TextView emptyTv, emptyTv2;
ImageView emptyIv;
ProgressBar progressBar;

public HomeFragment() {
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_home, container, false);
sharedPreferenceClass = new SharedPreferenceClass(getContext());

floatingActionButton = view.findViewById(R.id.add_task_btn);
floatingActionButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {

}
});
emptyTv = view.findViewById(R.id.
empty_text);
emptyTv2 = view.findViewById(R.id.
empty_text2);
emptyIv = view.findViewById(R.id.
empty_image);
progressBar = view.findViewById(R.id.
progressBar);
return view;
}
}

fragment_finished_task.xml

<?xml version=”1.0" encoding=”utf-8"?>

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:tools=”http://schemas.android.com/tools"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.Fragments.FinishedTaskFragment”
android:background=”@color/white”
xmlns:app=”http://schemas.android.com/apk/res-auto">

<ProgressBar
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/progressBar”
android:layout_centerVertical=”true”
android:layout_centerHorizontal=”true”
android:visibility=”gone”
android:indeterminateTint=”@android:color/holo_blue_dark”/>

<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”No Finished Task\nHurry up! Add a task and Finish it”
android:textAlignment=”center”
android:textColor=”@color/backgroundMain”
android:fontFamily=”@font/ubuntu_bold”
android:textSize=”18sp”
android:layout_centerHorizontal=”true”
android:layout_centerVertical=”true”
android:id=”@+id/empty_text”
android:visibility=”gone”/>

<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_centerInParent=”true”
android:layout_below=”@id/empty_text”
android:text=”Add a task”
android:background=”@drawable/background_button”
android:paddingStart=”20dp”
android:paddingEnd=”20dp”
android:textColor=”@color/white”
android:fontFamily=”@font/ubuntu_medium”
android:textSize=”14sp”
android:layout_marginTop=”20dp”
android:id=”@+id/back_to_addTask”
android:visibility=”gone”/>

</RelativeLayout>

FinishedTaskFragment.java

public class FinishedTaskFragment extends Fragment implements RecyclerviewClickListener {

SharedPreferenceClass sharedPreferenceClass;
TextView emptyTv;
ProgressBar progressBar;
Button backToAddTask;

public FinishedTaskFragment() {
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_finished_task, container, false);

sharedPreferenceClass = new SharedPreferenceClass(getContext());
emptyTv = view.findViewById(R.id.
empty_text);
progressBar = view.findViewById(R.id.
progressBar);
backToAddTask = view.findViewById(R.id.
back_to_addTask);
backToAddTask.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});

return view;
}

}

In the next tutorial, we will add a task in the home fragment using Node JS REST API.

Stay tuned for the next parts.

Hi everyone, myself Golap an Android app developer with UI/UX designer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store