How to add another fragment on the existing fragment?

Question

I am trying to create tab layout with fragments. When i add another fragment on item click it should show another fragment above it. I am unable to get the goal. Fragment just goes above the existing one but both the fragments content are visible. Please don't throw the link towards any developer page for explanation.

Here is my code

home_activity.xml

<TabHost
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
        </TabWidget>

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

            <fragment
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                class="com.example.tabsfragment.School_Fragment" >
            </fragment>

            <fragment
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                class="com.example.tabsfragment.Sports_Fragment" >
            </fragment>
        </FrameLayout>
    </LinearLayout>
</TabHost>

Home_Activity.java

public class Home_Activity extends FragmentActivity {

TabHost mHost;

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

    mHost = (TabHost) findViewById(android.R.id.tabhost);

    mHost.setup();

    TabSpec schoolSpec = mHost.newTabSpec("School").setIndicator("School")
            .setContent(R.id.tab1);
    mHost.addTab(schoolSpec);

    TabSpec sportSpec = mHost.newTabSpec("Sports").setIndicator("Sportss")
            .setContent(R.id.tab2);
    mHost.addTab(sportSpec);

    mHost.setCurrentTab(1);

}

entertainment.xml

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</FrameLayout>

I am adding another fragment on list_item_click inside Sports_Fragment

@Override
    public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
        // TODO Auto-generated method stub

        FragmentTransaction ft = getFragmentManager().beginTransaction();
        Entertainment_Fragment enFragment = new Entertainment_Fragment();
        ft.replace(android.R.id.tabcontent, enFragment);
        ft.commit();
    }

Here is the snapshot :

Any ideas/help with explanation would be highly appreciated.

Thanks!!

Answer 1

First of all, I think it's worth mentioning...

"You cannot replace a fragment defined statically in the layout file. You can only replace fragments that you added dynamically via a FragmentTransaction"

Please see

Android: can't replace one fragment with another

How can I show a new Fragment within a single tab?

Here's the solution.

In home_activity.xml, you should leave your tabcontent empty.

    <FrameLayout
        android:id="@+id/tabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

Your Home_Activity

    private FragmentTabHost mHost;

public void changeFragment() {
    FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
    EntertainmentFragment enFragment = new EntertainmentFragment();
    ft.replace(R.id.tabcontent, enFragment);
    ft.commit();
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
    mHost.setup(this, getSupportFragmentManager(), R.id.tabcontent);
    mHost.addTab(mHost.newTabSpec("School")
            .setIndicator("School"), SchoolFragment.class, null);
    mHost.addTab(mHost.newTabSpec("Sport")
            .setIndicator("Sport"), SportsFragment.class, null);
}

In your onIemClick (Sports_Fragment), add this

MainActivity mainAct = (MainActivity)getActivity();
            mainAct.changeFragment();

My full project, which is based on your code, is here.

I haven't had a chance to really check why TabHost doesn't work when I tested your code. But FragmentTabHost works fine for me.

Edit: To fix the overlap problem, you can set OnTabChangeListener:

mHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {

        @Override
        public void onTabChanged(String tabId) {
            // TODO Auto-generated method stub
            if (tabId.equalsIgnoreCase("School")) {
                Log.v(TAG, "school");
                FragmentTransaction ft = getSupportFragmentManager()
                        .beginTransaction();
                schoolFrag = new SchoolFragment();
                ft.replace(R.id.tabcontent, schoolFrag);
                ft.commit();
            }
            if (tabId.equalsIgnoreCase("Sport")) {
                Log.v(TAG, "Sport");
                FragmentTransaction ft = getSupportFragmentManager()
                        .beginTransaction();
                SportsFragment sportFrag = new SportsFragment();
                ft.replace(R.id.tabcontent, sportFrag);
                ft.commit();
            }
        }

    });

About the backpress, you can try

ft.addToBackStack(null);