Fragment showing contet twice

Question

I'll explain the structure of my app :

Activity --> Fragment A (Inside that fragment (A) i have 3 Fragments (B, C, D) (viewpager)) --> Inside the first fragment(B) it contains a listview. Every item from that list launches a fragment E.

So i'm facing an issue here.

When i first launch my application Everything looks fine.

But when Fragment E get's visible to the screen the tabs gets all weird and be like :

Yeap! they got duplicated. When i click on the listview, i commit the transition between the 2 fragments from a callback in the Activity :

    transaction = getSupportFragmentManager().beginTransaction();
    transaction.replace(R.id.content_frame, PF);
    transaction.addToBackStack(null);
    transaction.commit();

When i want to go back to the previous fragment:

        getFragmentManager().popBackStack();

Is the previous fragment getting recreated? And what can i do to solve it?

UPDATE --CODES: Activity :

public class MainActivity extends FragmentActivity implements
        IslamToolsFragment.OnToolsSelectedListener {
    FragmentTransaction transaction;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        if (findViewById(R.id.content_frame) != null) {
            if (savedInstanceState != null) {
                return;
            }

            PagerActivity firstFragment = new PagerActivity();

            getSupportFragmentManager().beginTransaction()
                    .add(R.id.content_frame, firstFragment).commit();
        }
    }

    @Override
    public void OnToolSelected(int position) {
        // TODO Auto-generated method stub
        switch (position) {
        case 0:
            PrayerFragment PF = new PrayerFragment();
            transaction = getSupportFragmentManager().beginTransaction();
            transaction.replace(R.id.content_frame, PF);
            transaction.addToBackStack(null);
            transaction.commit();
            break;
        case 1:
            QiblaFragment QF = new QiblaFragment();
            transaction = getSupportFragmentManager().beginTransaction();
            transaction.replace(R.id.content_frame, QF);
            transaction.addToBackStack(null);
            transaction.commit();
            break;
        }
    }

Fragment A (Which contains 3 fragments):

public class PagerActivity extends Fragment implements ActionBar.TabListener {
    int NUM_PAGES = 5;
    ActionBar actionBar;
    private ViewPager mPager;
    AppSectionsPagerAdapter mAppSectionsPagerAdapter;

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        mPager.setAdapter(null);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
        if (savedInstanceState != null) {
            return;
        } else {

            actionBar = this.getActivity().getActionBar();
            actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
            actionBar.setDisplayShowHomeEnabled(false);
            actionBar.setDisplayShowTitleEnabled(false);
            mAppSectionsPagerAdapter = new AppSectionsPagerAdapter(
                    getChildFragmentManager());
            mPager.setAdapter(mAppSectionsPagerAdapter);
            int icons[] = { R.drawable.ic_action_storage,
                    R.drawable.ic_action_overflow, R.drawable.ic_action_person };
            mPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {

                    actionBar.setSelectedNavigationItem(position);
                }
            });

            for (int i = 0; i < mAppSectionsPagerAdapter.getCount(); i++) {

                actionBar.addTab(actionBar.newTab().setIcon(icons[i])
                        .setTabListener(this));

            }
        }
    }

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        View tabsview = inflater.inflate(R.layout.pager_activity, container,
                false);
        mPager = (ViewPager) tabsview.findViewById(R.id.pager);

        return tabsview;

    }

Fragnent B:

public class IslamToolsFragment extends Fragment {
    OnToolsSelectedListener mCallback;

    ListView islamtools;
    Fragment PF = new PrayerFragment();

    public interface OnToolsSelectedListener {
        public void OnToolSelected(int position);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View islamtoolsview = inflater.inflate(R.layout.lvislamtools,
                container, false);
        if (savedInstanceState != null) {
            return islamtoolsview;
        }
        islamtools = (ListView) islamtoolsview.findViewById(R.id.lvislamtools);
        String[] title = { "Prayer Times", "Qibla", "Ahadith", "Quran",
                "Hijri Calendar", "99 Names" };
        IslamToolsAdapter ITA = new IslamToolsAdapter(this.getActivity(), title);
        islamtools.setAdapter(ITA);
        islamtools.setOnItemClickListener(new OnItemClickListener() {

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

        });
        return islamtoolsview;
    }

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        try {
            mCallback = (OnToolsSelectedListener) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString()
                    + " must implement OnHeadlineSelectedListener");
        }

    }

Thanks! is it something related to the savedinstancestate?

Answer 1

Your code design is a little bit wrong, fragments are actually pieces of activities, it does not make sense to me to create a fragment with more fragments inside in this situations, what you should do is create an activity for the viewpager and put into that activity your 3 fragments.

I have a similar app and this is how i handle the navigation between tabs:

pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            actionBar.setSelectedNavigationItem(position);
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }

The above code changes the item selected of the action bar BUT does not change the view below the view pager tabs, you need to implement the following to do this:

     @Override
     public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
    pager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

}

@Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {

}