How to create a ViewPager with 3 Fragments inside a Fragment on the same page?

Question

I want to create an application to display 3 different fragments inside a fragment using ViewPager. The fragments will look like in the picture shown down below:

Click here to see the picture

And later on, when user clicks on one of these fragments, another fragment will be opened to display only that specific fragment. Is this possible? Any recommendations would be appreciated! Thanks!

Answer 1

It really takes 3 minutes.

You have to give each container/view/widget a 0dp which means "match_constrains", in other words: your size will be determined by the constrains you have (after they have been ran by the algorithm).

In the following Layout there are three widgets (I used the "new" FragmentContainerView but they can be FrameLayout instances as well.

Notice in all three:

• width/height is set to 0dp (aka: match_constrains)

Fragment one:

• Top to Top of Parent (top of the screen)
• Start to Start of Parent (left/start of the screen)
• End(right) to Start(left) of Fragment Two.
• Bottom to Top of Fragment Three.

Fragment Two:

• Top to Top of Parent (top of the screen)
• Start(left) to End(right) of Parent
• End(right) to End of Parent (right/end of the screen)
• Bottom to Top of Fragment Three.

Fragment Three:

• Top to bottom of Fragment One (here I chose Fragment One, but could have used "two" or even a guideline set at 50%, this is fine)
• Start and End both pointing to the respective parent (since we want FR3 to use all the available width)
• Bottom to Bottom of Parent (fragment three goes all the way down).

The result looks like this:

And here's the Layout.

Now go and spend some time learning Constraint Layout. :)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragment_one"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_bright"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/fragment_two"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/fragment_three" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@id/fragment_two"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_dark"
        app:layout_constraintStart_toEndOf="@id/fragment_one"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/fragment_three" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragment_three"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_purple"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fragment_one"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>