Navigation Drawer Android Studio With Nested Fragment

Navigation drawer Android

Navigation drawer Android Studio example guide you to create a nested fragment.

Navigation drawer Android example will give you a professional structure to create an Android app with child fragment and sliding menu.

This Navigation drawer Android example is the second part of basic navigation drawer in Android tutorial.

Complete all the steps from that example then follow steps of this tutorial.

Visit this link for more information about navigation drawer.

First, see the output of navigation drawer android studio example, then we will make it.

Download Source Code For Navigation Drawer Android tutorial

[sociallocker] Download DrawerFragmentDemonuts [/sociallocker]

Creating Navigation Drawer Android Tutorial step by step

Step 1: Follow all the steps from basic navigation drawer in Android tutorial.

After you have completed above tutorial, you will have one android project with navigation drawer.

Now follow below steps.

Step 2: Creating FriendActivity

Make a new activity named “FriendActivity.”

Copy below code into the FriendActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class FriendActivity extends AppCompatActivity {

    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_friend);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        getSupportActionBar().setTitle("Friend Activity");
       // getSupportActionBar().setHomeAsUpIndicator(R.mipmap.backarrow);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            onBackPressed();
            return true;
        }
        return false;
    }
}

Add following code into activity_friend.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.exampledemo.parsaniahardik.drawerfragmentdemonuts.FriendActivity">

    <include
        layout="@layout/toolbar"
        android:id="@+id/toolbar"
    />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="25sp"
        android:textColor="#fff"
        android:background="#e76d30"
        android:id="@+id/tv"
        android:text="Friend Activity" />

</LinearLayout>

Step 3: Adding FriendNested Fragment

Create a new fragment and give the name as “FriendNestedFragment.”

Add below code in fragment_friend_nested.xml

<FrameLayout 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="com.exampledemo.parsaniahardik.drawerfragmentdemonuts.FriendNestedFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="25sp"
        android:textColor="#fff"
        android:background="#4244d6"
        android:id="@+id/tv"
        android:text="Friend Nested Fragment" />

</FrameLayout>

Copy below source code in FriendNestedFragment.java

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class FriendNestedFragment extends Fragment {

    private View view;
    private TextView textView;

    public FriendNestedFragment() {
        // Required empty public constructor
    }

    @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 = inflater.inflate(R.layout.fragment_friend_nested, container, false);

        textView = (TextView) view.findViewById(R.id.tv);

        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(getActivity(),FriendActivity.class);
                startActivity(intent);
            }
        });

        return view;
    }
}

Step 4: Updating FriendListFragment

Update fragment_friend_list.xml as per below

<FrameLayout 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="com.exampledemo.parsaniahardik.drawerbasicdemonuts.FriendListFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/tvfriend"
        android:gravity="center"
        android:textSize="30sp"
        android:background="#4aef44"
        android:textColor="#fff"
        android:text="Friends List" />

</FrameLayout>

Update FriendListFragment.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class FriendListFragment extends Fragment {

    private TextView tvfriend;
    private View view;

    public FriendListFragment() {
        // Required empty public constructor
    }

    @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 = inflater.inflate(R.layout.fragment_friend_list, container, false);
        tvfriend = (TextView) view.findViewById(R.id.tvfriend);

        tvfriend.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                addFragment(new FriendNestedFragment(),"Nested");
            }
        });

        return view;
    }
    public void addFragment(Fragment fragment, String tag) {
        FragmentManager manager = getActivity().getSupportFragmentManager();
        FragmentTransaction ft = manager.beginTransaction();
        ft.addToBackStack(tag);
        ft.replace(R.id.container_body, fragment, tag);
        ft.commitAllowingStateLoss();
    }
}

Description of addFragment() method

This method will open a new fragment in the container box.

This method will put the fragment in the backstack before opening it. That means when the user clicks on the back button this fragment will be open if new any nested fragment or activity is opened.

Here, we have opened a FriendActivity, so when you come back from the FriendActivity, FriendNestedFragment will be opened as shown in the output video.

Step 5: Creating NotiSecondNestedFragment

Prepare a new fragment named NotiSecondNestedFragment.

Copy below source code in fragment_noti_second_nested.xml

<FrameLayout 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="com.exampledemo.parsaniahardik.drawerfragmentdemonuts.NotiSecondNestedFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="25sp"
        android:textColor="#fff"
        android:background="#198f07"
        android:id="@+id/tv"
        android:text="Notification Second Nested Fragment" />

</FrameLayout>

Add following in NotiSecondNestedFragment.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class NotiSecondNestedFragment extends Fragment {

    private View view;

    public NotiSecondNestedFragment() {
        // Required empty public constructor
    }

    @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 = inflater.inflate(R.layout.fragment_noti_second_nested, container, false);

       return view;
    }
}

Step 6: Creating NotiNestedFragment

Make a new fragment named NotiNestedFragment.

Paste below source code in fragment_noti_nested.xml

<FrameLayout 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="com.exampledemo.parsaniahardik.drawerfragmentdemonuts.NotiNestedFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="25sp"
        android:textColor="#fff"
        android:background="#4244d6"
        android:id="@+id/tv"
        android:text="Notification Nested Fragment" />
</FrameLayout>

Put following in NotiNestedFragment.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class NotiNestedFragment extends Fragment {

    private View view;
    private TextView textView;

    public NotiNestedFragment() {
        // Required empty public constructor
    }

    @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 = inflater.inflate(R.layout.fragment_noti_nested, container, false);

        textView = (TextView) view.findViewById(R.id.tv);

        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                addFragment(new NotiSecondNestedFragment(),"SecondNoti");
            }
        });

        return view;
    }

    public void addFragment(Fragment fragment, String tag) {
        FragmentManager manager = getActivity().getSupportFragmentManager();
        FragmentTransaction ft = manager.beginTransaction();
        ft.addToBackStack(tag);
        ft.replace(R.id.container_body, fragment, tag);
        ft.commitAllowingStateLoss();
    }
}

Step 7: Updating NotificationFragment

Update fragment_notification.xml as per below

<FrameLayout 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="com.exampledemo.parsaniahardik.drawerbasicdemonuts.NotificationFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/tv"
        android:gravity="center"
        android:textSize="30sp"
        android:background="@color/colorAccent"
        android:textColor="#fff"
        android:text="Notification" />

</FrameLayout>

Update NotificationFragment.java as following code

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class NotificationFragment extends Fragment {

    private TextView textView;
    private View view;

    public NotificationFragment() {
        // Required empty public constructor
    }

    @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 = inflater.inflate(R.layout.fragment_notification, container, false);

        textView = (TextView) view.findViewById(R.id.tv);

        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                addFragment(new NotiNestedFragment(), "NotiNested");
            }
        });
        return view;
    }

    public void addFragment(Fragment fragment, String tag) {
        FragmentManager manager = getActivity().getSupportFragmentManager();
        FragmentTransaction ft = manager.beginTransaction();
        ft.addToBackStack(tag);
        ft.replace(R.id.container_body, fragment, tag);
        ft.commitAllowingStateLoss();
    }
}

Now run your project, and it should work like shown in the output video.

If you have any query, then drop it in the comment box. I will be happy to help you. Thank you šŸ™‚