How to use Fragment in Navigation Drawer?

Question

I tried. I am unsuccessful. I am writing my steps. If anyone can help me out.

1. Create New Project using Android Studio and selected "Navigation Drawer Activity"

2. I put FrameLayout inside main activity as below

   <?xml version="1.0" encoding="utf-8"?>
   <android.support.v4.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_layout"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:fitsSystemWindows="true"
       tools:openDrawer="start">
   
       <include
           layout="@layout/app_bar_vshome"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />
   
       <android.support.design.widget.NavigationView
           android:id="@+id/nav_view"
           android:layout_width="wrap_content"
           android:layout_height="match_parent"
           android:layout_gravity="start"
           android:fitsSystemWindows="true"
           app:headerLayout="@layout/nav_header_vshome"
           app:menu="@menu/activity_vshome_drawer" />
   
       <!-- Framelayout to display Fragments -->
       <FrameLayout
           android:id="@+id/frame_container"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />
   
   </android.support.v4.widget.DrawerLayout>
   

3. I made new class, as below using v4.app.Fragment

   public class VSAllTopics extends Fragment{
       @Override
       public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                Bundle savedInstanceState) {
           // Inflate the layout for this fragment
           return inflater.inflate(R.layout.fragment_all_topics, container, false);
       }
   }
   

4. I made Fragment Mananger, as below,

   public class FragmentManager extends Fragment {
   
   } 
   

5. calling in **public boolean onNavigationItemSelected(MenuItem item) **

   android.support.v4.app.FragmentManager fragmentManager = getSupportFragmentManager();
   FragmentTransaction ft = fragmentManager.beginTransaction();
   
   if (id == R.id.nav_camera) {
   
       ft.replace(R.id.frame_container, new VSAllTopics(), "VS_ALL").commit();
   

I studied a little but I could not get succeed. It is not calling.

If I call it through Intent, it removes NAVIGATION ;(

HOW CAN I USE SIDE MENU IN A PROPER MANER.

THANKS.

Answer 1

In your Activity Layout

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".view_controllers.diagrams.DiagramEditorScreen"
    android:id="@+id/diagramEditorMainDrawerLayout"
>

.... {your activity layout}

    <com.google.android.material.navigation.NavigationView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:id="@+id/diagramEditorSlideInMenuNavigationView"
            app:itemTextColor="@color/white"
    >
        <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/diagramEditorSlideInMenuFragmentHolder"
        >
        </FrameLayout>
    </com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>

And then in your Activity onCreate method add listeners

val actionDrawerToggle = ActionBarDrawerToggle(this, diagramEditorMainDrawerLayout, R.string.open, R.string.close)
diagramEditorMainDrawerLayout.addDrawerListener(actionDrawerToggle)
actionDrawerToggle.syncState()

and when you are ready to show the navigation view you can just replace the fragment within the navigationView

supportFragmentManager.beginTransaction()
    .replace(R.id.diagramEditorSlideInMenuFragmentHolder, {your-fragment}, {your-fragment-tag})
    .commit()

diagramEditorMainDrawerLayout.openDrawer(GravityCompat.START)

Note: The above is done with androidX. if you are not using androidX, your layout call to navigationView should be

<android.support.v4.widget.DrawerLayout
....
>
   <android.support.design.widget.NavigationView 
   ... 
   />

</android.support.v4.widget.DrawerLayout>

Answer 2

Your Navigation View should be after the FrameLayout in your layout.

Android draw each view in the order it shows in the xml. Since your FrameLayout has match_parent for width and height android will draw it above your NavigationView.

Here are the code with the solution:

<include
layout="@layout/app_bar_vshome"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- Framelayout to display Fragments -->
<FrameLayout
    android:id="@+id/frame_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_vshome"
    app:menu="@menu/activity_vshome_drawer" />

Answer 3

it is recommended to use navigationView inside Drawer layout.Easiest option is to use navigation Activity provided by android studio

then u can edit the items from

activity_main_drawer.xml

and add your own items and their respective icons.

also you can edit the navigation header view in

navigation_header_main.xml

in order to use Fragment in your NavigationDrawer in your Activity

use it Like this :

public boolean onNavigationItemSelected(MenuItem item) {
  // Handle navigation view item clicks here.
  int id = item.getItemId();

  switch (id) {
    case R.id.item1:
      getSupportFragmentManager().beginTransaction().replace(R.id.fragment1, new item1Fragment()).commit();
      break;

    case R.id.change_settings:
      getSupportFragmentManager().beginTransaction().replace(R.id.fragment1, new item2Fragment()).commit();
      break;

  }

}