Nested fragments - Screen of Frag2 stays empty

Question

I'm suffering through nested fragments. I have a mainactivity which calls a fragment 1 which in turns call a fragment via a button. The fragment frag2 is well instantiated but the screen is blank. Is there something obvious with my code?

MainActivity

import android.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

        FragmentManager fragmentManager;
        Frag1 f1 = new Frag1();
        fragmentManager = getFragmentManager();
        fragmentManager.beginTransaction().replace(R.id.content_frame,
                f1).commit();
    }
}

mainactivity xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.narb.nestedfragments.MainActivity">


    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</RelativeLayout>

Fragment 1 and its xml layout:

import android.app.FragmentTransaction;
import android.content.Context;
import android.os.Bundle;
import android.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.RelativeLayout;


/**
 * A simple {@link Fragment} subclass.
 */
public class Frag1 extends android.app.Fragment {
    Context context;
    private Button back1;
    RelativeLayout rl1;

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

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootview = null;
        rootview = inflater.inflate(R.layout.fragment_frag1, container, false);
        return rootview;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        context = getActivity().getApplicationContext();

        initFindView();

        back1.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                Log.i("frag1","createdview");
                //getActivity().getFragmentManager().popBackStackImmediate();
                rl1.setVisibility(View.INVISIBLE);
                FragmentTransaction ft = getFragmentManager().beginTransaction();
                Frag2 f2 = new Frag2();
                ft.replace(R.id.fl1, f2);
                ft.addToBackStack(null);
                ft.commit();
            }
        });

    }

    private void initFindView(){
        back1 = (Button) getActivity().findViewById(R.id.btn1);
        rl1 = (RelativeLayout) getActivity().findViewById(R.id.rl1);
    }
}

Is it normal that I need to make my layout frag 1 invisible before calling frag2?

and finally my fragment 2 and its layout. I see the log for frag 2 but the screen is empty:

import android.app.Fragment;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;


public class Frag2 extends Fragment {
    Context context;
    private Button btn2;

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

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootview;
        rootview = inflater.inflate(R.layout.fragment_frag2, container, false);
        Log.i("frag2","createdview");
        return rootview;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        context = getActivity().getApplicationContext();
        Log.i("frag2","onactivitycreated");

        btn2 = (Button) getActivity().findViewById(R.id.btn2);
        btn2.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                Log.i("frag2","onactivitycreated");
            }
        });

    }
}

<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="com.narb.nestedfragments.Frag2">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Test 2" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="60dp"
        android:text="back"
        />
</RelativeLayout>

Answer 1

if your fragment 1 is having another FrameLayout where you are replacing fragment 2, then instead of getFragmentManager(), use getChildFragmentManager() in fragment 1

otherwise you are passing wrong container id in replace() method R.id.fl1 inside fragment1. you should pass R.id.content_frame there.

Answer 2

use content_frame id of activity_main in Frag1 class

back1.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            Log.i("frag1", "createdview");
            //getActivity().getFragmentManager().popBackStackImmediate();
            rl1.setVisibility(View.INVISIBLE);
            FragmentTransaction ft = getFragmentManager().beginTransaction();
            Frag2 f2 = new Frag2();
            ft.replace(R.id.content_frame, f2);
            ft.addToBackStack(null);
            ft.commit();
        }
    });

Answer 3

You have not posted the fragment1 XML Code. lets assume RelativeLayout (rl1) is your parent layout and you have FrameLayout (fl1) inside the rl1. You are making the parent layout invisible. So the fragment2 can't be visible.

If you don't want to show the fragment1 while showing there is no need for the nested fragment.

You should call like this to load second fragment.

getFragmentManager().beginTransaction()
                .replace(R.id.content_frame ,new Frag2());
                .addToBackStack(null);
                .commit();