Fragments within Fragments in Android

Introduction

Many times while building an android application we come under a scenario in which we have to display one fragment into another fragment. For example we are using tab layout with fragments within our application and we want to open another fragment on button click then we have to call one more fragment into the current fragment. In this article we will take a look on How to call a fragment into another fragment in Android.

Implementation

We will be creating a simple application in which we will be displaying a text view inside our parent activity. Inside this parent activity we will be calling our parent fragment and displaying a text message in that as well. After that we will be calling our child fragment inside the parent fragment and displaying a text message in that fragment as well.

Step 1: Creating a new project in Android Studio

Navigate to Android studio as shown in below screen. In the below screen click on New Project to create a new Android Studio Project.

After clicking on New Project you will get to see the below screen.

Inside this screen we have to simply select Empty Activity and click on Next. After clicking on next you will get to see the screen below.

Inside this screen we have to simply specify the project name. Then the package name will be generated automatically.

Note − Make sure to select the Language as Java.

After specifying all the details click on Finish to create a new Android studio project.

Once our project has been created we will get to see 2 files which are open i.e activity_main.xml and MainActivity.java file.

Step 3: Working with activity_main.xml

Navigate to activity_main.xml. If this file is not visible. To open this file. In the left pane navigate to app>res>layout>activity_main.xml to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/idCLayout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   tools:context=".MainActivity">

   <!-- creating a text view for displaying the text for parent activity-->
   <TextView
      android:id="@+id/idTVHeading"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:padding="4dp"
      android:text="Parent Activity"
      android:textAlignment="center"
      android:textColor="@color/black"
      android:textSize="20sp"
      android:textStyle="bold" />

   <!-- creating a frame layout for displaying a parent fragment -->
   <FrameLayout
      android:id="@+id/parentContainer"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_below="@id/idTVHeading" />

</RelativeLayout>

Explanation − In the above code we are creating a Relative layout as a root layout and inside this we are creating a text view for displaying the heading of the current activity as Parent Activity and then we are creating a frame layout in which we will be displaying our parent fragment which will contain a text view and our child fragment.

Step 4: Creating two new Fragments

Now we will be creating two fragments one will be our Parent Fragment and another will be our Child Fragment. For creating a new Fragment. Navigate to app>java>your app’s package name>Right click on it>New>Fragment and select an Empty Blank Fragment and name it as ParentFragment. Similarly create another fragment with the name as ChildFragment. The xml and java files will be created for both of these fragments.

Step 5: Working with fragment_parent.xml file

Navigate to fragment_one.xml. If this file is not visible. To open this file. In the left pane navigate to app>res>layout>fragment_parent.xml to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

<?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=".ParentFragment">

   <!-- creating a text view for displaying the text for parent activity-->
   <TextView
      android:id="@+id/idTVHeading"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:padding="5dp"
      android:text="Parent fragment"
      android:textAlignment="center"
      android:textColor="@color/black"
      android:textSize="20sp"
      android:textStyle="bold" />
   <!-- creating a frame layout for displaying a child fragment -->
   <FrameLayout
      android:id="@+id/childFragmentContainer"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_below="@id/idTVHeading">
   </FrameLayout>
</RelativeLayout>

Explanation − In the above code we are creating a root layout as Relative layout. Inside this relative layout we are creating a text view for displaying the heading of our current fragment as Parent Fragment, then we are creating a frame layout for our child fragment for displaying our child fragment.

Step 6 : Working with fragment_child.xml file

Navigate to fragment_one.xml. If this file is not visible. To open this file. In the left pane navigate to app>res>layout>fragment_child.xml to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

<?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=".ChildFragment">

   <!-- creating a text view for displaying a text-->
   <TextView
      android:id="@+id/idTVHeading"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:padding="5dp"
      android:text="Child fragment"
      android:textAlignment="center"
      android:textColor="@color/black"
      android:textSize="20sp"
      android:textStyle="bold" />

</RelativeLayout>

Explanation : In the above code we are creating a root layout as Relative layout. Inside this relative layout we are creating a text view for displaying the heading of our current fragment as Child Fragment.

Step 7 − Working with ParentFragment.java file

Navigate to ParentFragment.java. If this file is not visible. To open this file. In the left pane navigate to app>java>your app’s package name>ParentFragment.java to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

package com.example.androidjavaapp;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ParentFragment extends Fragment {
   @Override
   public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
      // Inflate the layout for this fragment
      View view = inflater.inflate(R.layout.fragment_parent, container, false);
      
      // on below line creating a child fragment
      Fragment childFragment = new ChildFragment();
      
      // on below line creating a fragment transaction and initializing it.
      FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
      
      // on below line replacing the fragment in child container with child fragment.
      transaction.replace(R.id.childFragmentContainer, childFragment).commit();
      return view;
   }
}

Explanation − In the above code we can see the onCreateView method inside which we are inflating the layout for fragment_parent.xml file. Inside this onCreateView method we are firstly creating the variable for our Child Fragment and then we are calling and initializing fragment transactions. Using this variable for fragment transactions we are replacing the fragment in the container.

Step 8 : Working with MainActivity.java file.

Navigate to MainActivity.java. If this file is not visible. To open this file. In the left pane navigate to app>java>your app’s package name>MainActivity.java to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

package com.example.androidjavaapp;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentTransaction;

public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      // creating and initializing variable for fragment transaction.
      FragmentTransaction ft = getSupportFragmentManager().beginTransaction();

      // replacing the parent container with parent fragment.
      ft.replace(R.id.parentContainer, new ParentFragment());

      // committing the transaction.
      ft.commit();

   }
}

Explanation − In the above code we can see the onCreate method inside which we are inflating our layout for activity_main.xml. Inside this onCreate method we are loading our ParentFragment using Fragmenttransaction. Then we are replacing the fragment from the parent container with Parent Fragment.

After adding the above code now we have to simply click on the green icon in the top bar to run our application on a mobile device.

Note − Make sure you are connected to your real device or emulator.

Output

In the above output screen shot we can get to see three text views, firstly is our Parent Activity in which we are loading our Parent Fragment. Thus we can get to see the text for our Parent Fragment, then we can get to see one more text view as a Child Fragment where we are loading our Child Fragment.

Conclusion

In the above tutorial we have taken a look on How we can get the currently displayed fragment instance within an android application.