Child Fragments and ViewPager2 with Fragments

You have already seen how to add a Fragment to a FragmentManager inside an Activity. However, sometimes it can become necessary to add a Fragment inside another Fragment. Or, you might need to create a screen slider with Fragments. In this topic, you will learn how to use childFragmentManager and ViewPager2 for these purposes.

Child Fragments

A child Fragment is a Fragment that is attached to another Fragment instead of an Activity.

Using this approach can sometimes be really handy. For example, imagine you are creating an app containing food recipes. In this scenario, the main Fragment would be the recipe page for your dish, and the child Fragment could be used to display a timer or recipe tips.

The way you attach one Fragment to another is similar to how you attach a Fragment to an Activity. First, add a Fragment container (typically FrameLayout) to your_fragment.xml file, in the same way as you would with an Activity. Then, instead of using Activity.supportFragmentManager, you need to use Fragment.childFragmentManager:

childFragmentManager.beginTransaction()
        .add(R.id.your_container_id, YourFragment())
        .commit()

As with an Activity, don't forget that the commit() method must be called at the end of each transaction. Also, note that every Fragment has a parentFragmentManager to which it directly belongs, while childFragmentManager is used for child Fragments.

The below example shows the main Fragment being added first, and then the child Fragment being added inside it:

ViewPager2 with Fragments

As you know, ViewPager2 is used to create the simplest transitions between screens in your application. In this section, we will look at how to use ViewPager2 with Fragments as pages.

You first need to add the following line to the build.gradle file (Module: YourProjectName.app) in the project:

dependencies {
    implementation "androidx.viewpager2:viewpager2:1.0.0"
}

Make sure to sync the project afterward!

Next, add the ViewPager2 widget to your XML layout file.

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPagerContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Now for the most important part: the Adapter for the ViewPager. To implement it, create a Kotlin class:

import androidx.fragment.app.Fragment
import androidx.viewpager2.adapter.FragmentStateAdapter

class YourAdapterName(fm: FragmentManager, lifecycle: Lifecycle) : FragmentStateAdapter(fm, lifecycle) {

}

Here you must override two methods: getItemCount() and createFragment(). You need to specify how many Fragments will be available in the ViewPager with getItemCount(). createFragment() returns the Fragment in a particular position, so ViewPager shows Fragments in the correct order. Below is an example with two Fragments:

override fun getItemCount(): Int {
    return 2
}

override fun createFragment(position: Int): Fragment {
    return when (position) {
        0 -> FirstFragment()
        1 -> SecondFragment()
        else -> throw AssertionError()
    }
}

Lastly, assign the Adapter for ViewPager2 in the MainActivity class:

val viewPager2 = findViewById<ViewPager2>(R.id.viewPagerContainer)
val pagerAdapter = ViewPager2Adapter(supportFragmentManager, lifecycle)
viewPager2.adapter = pagerAdapter

That's it! Your result should be the same as the above example.

The orientation is set to horizontal by default so, if you want to change it to vertical, you just need to add:

viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL

Conclusion

You now know how to use childFragmentManager and have seen how to utilize ViewPager2 with Fragments as pages. Remember that childFragmentManager works in much the same way as the supportFragmentManager in an Activity. Also, don't forget that any number of Fragments can be added to ViewPager2. The example in this topic only uses two for the sake of clarity.