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;
}}
