Instant "duplicate" fragments with actionbar

Question

I have read several posts here about detach and attach. But it should be fine since I'm running API 15.

I get a double list from the beginning like you can see on this picture:

I have the following code: (MainActivity)

   package dk.metnik.fragmentandactionbar;

import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.ActionBar.TabListener;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.os.Bundle;
import dk.metnik.fragmentandactionbar.fragments.DCIMFragment;
import dk.metnik.fragmentandactionbar.fragments.ESSFragment;
import dk.metnik.fragmentandactionbar.fragments.TeamshareFragment;

public class FragAndBarActivity extends Activity {

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

    private void setupTabs() {
        // setup action bar for tabs
        ActionBar actionBar = getActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        actionBar.setDisplayShowTitleEnabled(false);

        Tab tab = actionBar
                .newTab()
                .setText("DCIM")
                .setTabListener(
                        new MyTabListener<DCIMFragment>(this, "DCIM",
                                DCIMFragment.class));
        actionBar.addTab(tab);

        tab = actionBar
                .newTab()
                .setText("ESS")
                .setTabListener(
                        new MyTabListener<ESSFragment>(this, "ESS",
                                ESSFragment.class));
        actionBar.addTab(tab);

        tab = actionBar
                .newTab()
                .setText("TeamShare")
                .setTabListener(
                        new MyTabListener<TeamshareFragment>(this, "TeamShare",
                                TeamshareFragment.class));
        actionBar.addTab(tab);
    }

    public static class MyTabListener<T extends Fragment> implements
            TabListener {
        private Fragment mFragment;
        private final Activity mActivity;
        private final String mTag;
        private final Class<T> mClass;

        /**
         * Constructor used each time a new tab is created.
         * 
         * @param activity
         *            The host Activity, used to instantiate the fragment
         * @param tag
         *            The identifier tag for the fragment
         * @param clz
         *            The fragment's Class, used to instantiate the fragment
         */

        public MyTabListener(Activity activity, String tag, Class<T> clz) {
            mActivity = activity;
            mTag = tag;
            mClass = clz;

            mFragment = mActivity.getFragmentManager().findFragmentByTag(mTag);
            if (mFragment != null) { // && !mFragment.isDetached()) {
                FragmentTransaction ft = mActivity.getFragmentManager()
                        .beginTransaction();
                // ft.detach(mFragment);
                ft.remove(mFragment);
                ft.commit();
            }
        }

        /* The following are each of the ActionBar.TabListener callbacks */

        public void onTabSelected(Tab tab, FragmentTransaction ft) {
            // Check if the fragment is already initialized
            if (mFragment == null) {
                // If not, instantiate and add it to the activity
                mFragment = Fragment.instantiate(mActivity, mClass.getName());
                ft.add(R.id.listFragment, mFragment, mTag);
            } else {
                ft.attach(mFragment);
            }
        }

        public void onTabUnselected(Tab tab, FragmentTransaction ft) {
            if (mFragment != null) {
                ft.detach(mFragment);
            }
        }

        public void onTabReselected(Tab tab, FragmentTransaction ft) {
        }
    }
}

And my main.xml:

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

    <fragment
        android:id="@+id/listFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?android:attr/actionBarSize"/>
</LinearLayout>  

Answer 1

You're instantiating the view with a Fragment via your layout.xml:

<fragment
    android:id="@+id/listFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="?android:attr/actionBarSize"
    class="dk.metnik.fragmentandactionbar.fragments.TeamshareFragment" />

You're then creating a Tab system where the first tab will be selected, adding another Fragment (with a transparent background I'm guessing) ontop.

Remove the class="" and change your <fragment> to a <FrameLayout>. That will stop the initial Fragment loading while giving you a defined View to house your Fragment.

Also, you're adding your new fragments to the Android base View android.R.id.content. This is reasonable depending on your functionality but if you want the Fragment to take the space of the element you should be using its id. Change:

ft.add(android.R.id.content, mFragment, mTag); 

to

ft.add(R.id.listFragment, mFragment, mTag);