Fragment replace with ChildFragmentManager just puts second fragment over the first

Question

I want to make an app with tabs and in each tab i want to have multiple fragments. I have a MainActivity:

import android.support.v4.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
public class MainActivity extends AppCompatActivity {
    private CarouselFragment carouselFragment;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        if (savedInstanceState == null){
            initScreen();
        }else {
            carouselFragment = (CarouselFragment) getSupportFragmentManager().getFragments().get(0);
        }
    }
    private void initScreen() {
        carouselFragment = new CarouselFragment();
        Log.v("manager", "init " + getSupportFragmentManager().toString());
        final FragmentManager fragmentManager = getSupportFragmentManager();
        fragmentManager.beginTransaction()
                .replace(R.id.container, carouselFragment)
                .commit();
        Log.v("manager", "init " + getSupportFragmentManager().toString());
    }
    @Override
    public void onBackPressed() {
        if (!carouselFragment.onBackPressed()) {
            super.onBackPressed();
        } else {
        }
    }
}

The CarouselFragment class:

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class CarouselFragment extends Fragment {
    protected ViewPager pager;
    private ViewPagerAdapter adapter;
    public CarouselFragment() {
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_carousel, container, false);
        pager = (ViewPager) rootView.findViewById(R.id.vp_pages);
        return rootView;
    }
    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        Log.v("manager", "carousel " + getChildFragmentManager().toString());
        adapter = new ViewPagerAdapter(getResources(), getChildFragmentManager());
        pager.setAdapter(adapter);
        Log.v("manager", "carousel " + getChildFragmentManager().toString());
    }
    public boolean onBackPressed() {
        OnBackPressListener currentFragment = (OnBackPressListener) adapter.getRegisteredFragment(pager.getCurrentItem());
        if (currentFragment != null) {
            return currentFragment.onBackPressed();
        }
        return false;
    }
}

And its xml layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_pages"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

The ViewPagerAdapter class:

import android.content.res.Resources;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.util.SparseArray;
import android.view.ViewGroup;
public class ViewPagerAdapter extends FragmentPagerAdapter {
    private final Resources resources;
    SparseArray<Fragment> registeredFragments = new SparseArray<Fragment>();
    public ViewPagerAdapter(final Resources resources, FragmentManager fm) {
        super(fm);
        this.resources = resources;
    }
    @Override
    public Fragment getItem(int position) {
        final Fragment result;
        switch (position) {
            case 0:
                result = new A1Fragment();
                break;
            case 1:
                result = new B1Fragment();
                break;
            case 2:
                result = new C1Fragment();
                break;
            default:
                result = null;
                break;
        }
        return result;
    }
    @Override
    public int getCount() {
        return 3;
    }
    @Override
    public CharSequence getPageTitle(final int position) {
        switch (position) {
            case 0:
                return "a";
            case 1:
                return "b";
            case 2:
                return "c";
            default:
                return null;
        }
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        Fragment fragment = (Fragment) super.instantiateItem(container, position);
        registeredFragments.put(position, fragment);
        return fragment;
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        registeredFragments.remove(position);
        super.destroyItem(container, position, object);
    }
    public Fragment getRegisteredFragment(int position) {
        return registeredFragments.get(position);
    }
}

The A1Fragment class:

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class A1Fragment extends RootFragment {
    public A1Fragment() {
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_a1, container, false);
        rootView.findViewById(R.id.next_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                enterNextFragment();
            }
        });
        return rootView;
    }
    private void enterNextFragment() {
        A2Fragment a2Fragment = new A2Fragment();
        FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
        transaction.addToBackStack(null);
        transaction.replace(R.id.fragment_mainLayout, a2Fragment).commit();
    }
}

And its xml:

<FrameLayout 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=".frags.A1Fragment"
    android:background="@android:color/white"
    android:id="@+id/fragment_mainLayout">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="a1"
        android:textAppearance="?android:textAppearanceLarge"
        android:textSize="36sp"/>
    <Button
        android:id="@+id/next_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Next fragment"/>
</FrameLayout>

The A2Fragment class:

import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class A2Fragment extends RootFragment {
    public A2Fragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_a2, container, false);
        rootView.findViewById(R.id.next_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                enterNextFragment();
            }
        });
        return rootView;
    }

    private void enterNextFragment() {
        A3Fragment a3Fragment = new A3Fragment();
        FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
        transaction.addToBackStack(null);
        transaction.replace(R.id.fragment_mainLayout, a3Fragment).commit();
    }
}

And its xml:

<FrameLayout 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=".frags.A2Fragment"
    android:background="@android:color/white"
    android:id="@+id/fragment_mainLayout">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="a2"
        android:textAppearance="?android:textAppearanceLarge"
        android:textSize="36sp"/>
    <Button
        android:id="@+id/next_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom"
        android:text="Next fragment"/>
</FrameLayout>

The problem is that when i replace the first fragment with the second the first doesn't disappear. The second just appears over the first.

The button of the first fragment is still visible and clickable. No, the meaning is that the first fragment should be removed and the second added, not just the second added. — Manolis Karamanis, Nov 05 '15 at 13:12
The problem exists because you have a ViewPager, the ViewPager fragment can not be replaced with the FragmentManager, as I recall. You'll need some work around for that. — yennsarah, Nov 05 '15 at 13:15
There are plenty of solutions on doing this available online - like this one. http://stackoverflow.com/a/8149503/4908802 — yennsarah, Nov 05 '15 at 13:39
Possible duplicate of [Replace Fragment inside a ViewPager](http://stackoverflow.com/questions/7723964/replace-fragment-inside-a-viewpager) — yennsarah, Nov 05 '15 at 13:40

score 1 · Accepted Answer · answered Nov 05 '15 at 13:38

I would suggest you to have a look using the Android Device Monitor to the view hierarchy.

Additionally to simplify your code you can:
1) include directly in XML the CarouselFragment
2) Use a FrameLayout to contain your ViewPager and set to the ViewPager height MATCH_PARENT

score 0 · Answer 2 · answered Nov 05 '15 at 13:30

0

Hi you can set background color to your second fragment layout so first one will not appear

answered Nov 05 '15 at 13:30

Akshay Panchal

695
5
15

This isn't a clean way to do it, since the first fragment is still there and still visible, it could 'catch' touch events from the second fragment. – yennsarah Nov 05 '15 at 13:40
So, is there a way to actually replace the first fragment with a second one? – Manolis Karamanis Nov 05 '15 at 14:10

Fragment replace with ChildFragmentManager just puts second fragment over the first

2 Answers2