1

ViewPager with 3 pages

The attached picture shows a ViewPager with 3 pages. Each page is implemented as a Fragment. The Toolbar has a + icon in black for adding a new patient. When the + icon is pressed, a nested fragment should be created inside the Patients page which allows the creation of a new patient.

In the Logcat, I can see that the fragment lifecycle callbacks for the nested fragment are called right upto onResume(), but the view for the nested fragment is not rendered.

I am doing this to create the nested fragment and insert it into the parent fragment view hierarchy:

FrPatientDetails frChild = new FrPatientDetails();
FragmentTransaction transaction = getChildFragmentManager().beginTransaction()
                .replace(R.id.flPatientsPage, frChild);
                transaction.addToBackStack(null)
                .commit();

R.id.flPatientsPage is a FrameLayout in the Patients page into which I am trying to insert the nested fragment.

I am getting a feeling that the way to insert a child fragment into a parent fragment hosted in a ViewPager might be different, but I am not clear what to do.

Would someone be able to help here.

Update: Added the xml for the Patients page (parent)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/patients_page_linear_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<ListView
    android:id="@+id/lvHomeViewPatientsPage"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:divider="@color/colorPrimary"
    android:dividerHeight="1dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="8dp"
    android:textColor="@android:color/black" />

<TextView 
   android:id="@+id/tvEmpty"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:textColor="@android:color/black"
   android:text="@string/patients_page_empty"
   android:fontFamily="sans-serif"
   android:gravity="center"
   android:textSize="16sp"
    />
<FrameLayout 
    android:id="@+id/flPatientsPage"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

</LinearLayout>

Update: This is the screenshot after following what @Filo suggested: Child fragment view superimposed on the parent fragment

Amit
  • 519
  • 1
  • 5
  • 20

1 Answers1

2

To summarize, here is the problem that I was facing: There is an Activity A containing a TabLayout and ViewPager(V). V contains 3 pages (fragments). One of the fragments(F1) contains a child fragment C. I was able to display F1. I was unable to display C when the user clicked a button in F1.

Solution: V used a FragmentPagerAdapter to setup the fragments. Inside FragmentPagerAdapter.getItem(), do not launch F1 directly. Instead, launch a a fragment called F1Wrapper which contains a FrameLayout. Inside F1Wrapper.onCreateView(), create a FragmentTransaction adding F1 to the backstack. Use getChildFragmentManager to create the transaction. Pass the FrameLayout of F1Wrapper as the view container for F1.

When the user clicks the button in F1 to launch fragment C, create a FragmentTransaction.replace() in F1Wrapper which adds C to the backstack. Use getChildFragmentManager to create the transaction. Again, pass the FrameLayout of F1Wrapper as the view container for C. C will now replace F1 in the backstack and will be displayed.

Note: You cannot pass the ViewPager as the view container for C. That is the crux of the problem and the main reason why we need to use a wrapper fragment. If you pass V as the view container for C, C.onCreateView() will crash.

Amit
  • 519
  • 1
  • 5
  • 20