Android TabLayout using android.support.v7.app.ActionBar and android.support.v4.app.Fragment fragments overlay

Question

I'm quite new to Android programming but I'll do my best to give all the information needed. I'm using the new android.support.v7.app.ActionBarActivity and android.support.v4.app.Fragment to display a Tab Layout for Android API from 8 to 17. I'm facing a problem showing my two fragments correctly in my activity because they overlay each other after I select one of them. So, this is my main activity code:

package it.koopa.scank;

import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.Menu;

public class MainActivity extends ActionBarActivity {

    private final static String TAG = "MainActivity";

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

        //have to use getSupportActionBar from android.support.v7.app
        ActionBar actionBar = getSupportActionBar();

        //hello tab
        Tab tab = actionBar.newTab()
                .setText(R.string.tab_hello)
                .setTabListener(new TabListener<HelloFragment>(this, "hello", HelloFragment.class));
        actionBar.addTab(tab);

        //handle content tab
        tab = actionBar.newTab()
                .setText(R.string.tab_send)
                .setTabListener(new TabListener<HandleContentFragment>(this, "handle", HandleContentFragment.class));
        actionBar.addTab(tab);

        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    }

    @Override
    protected void onStart() {
        super.onStart();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.scank, menu);
        return true;
    }

    public static class TabListener<T extends Fragment> implements ActionBar.TabListener {
        private Fragment mFragment;
        private final ActionBarActivity 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 TabListener(ActionBarActivity activity, String tag, Class<T> clz) {
            mActivity = activity;
            mTag = tag;
            mClass = clz;
        }

        @Override
        public void onTabSelected(Tab tab, FragmentTransaction ft) {
            mFragment = mActivity.getSupportFragmentManager().findFragmentByTag(mTag);

            // 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(getCorrectActionBarId(), mFragment, mTag);
                Log.i(TAG, "FragID " + mFragment.getId() + ", FragTAG=" + mFragment.getTag() + " ADDED!!!");
            } else {
                // If it exists, simply attach it in order to show it
                ft.attach(mFragment);
                Log.i(TAG, "FragID " + mFragment.getId() + ", FragTAG=" + mFragment.getTag() + " attached.");
            }
        }

        @Override
        public void onTabUnselected(Tab tab, FragmentTransaction ft) {
            if (mFragment != null) {
                // Detach the fragment, because another one is being attached
                ft.detach(mFragment);
                Log.i(TAG, "FragID " + mFragment.getId() + ", FragTAG=" + mFragment.getTag() + " detached.");
            }
        }

        @Override
        public void onTabReselected(Tab tab, FragmentTransaction ft) {
            // User selected the already selected tab. Usually do nothing.
        }
    }

    /**
     * Returns the correct id of the action bar
     * @return
     */
    public static int getCorrectActionBarId () {
        int androidVersion = Build.VERSION.SDK_INT;
        if (androidVersion >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
            return android.R.id.content;
        } else {
            return R.id.action_bar_activity_content;
        }
    }

}

And these are my two fragments (both use their own xml layout). First one:

package it.koopa.scank;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HelloFragment extends Fragment {
    private int index;

    public void onCreate(Bundle savedInstanceState) {        
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View v = inflater.inflate(R.layout.hello, container, false);
        Log.i("HelloFragment","I'm " + HelloFragment.class);

        return v;

    }
}

and second one:

package it.koopa.scank;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HandleContentFragment extends Fragment {
    private int index;

    public void onCreate(Bundle savedInstanceState) {        
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View v = inflater.inflate(R.layout.handle_content, container, false);
        Log.i("HandleContentFragment","I'm " + HandleContentFragment.class);

        return v;

    }
}

and, as a result, if I select the second tab, the views are put one over another! I found a similar question here Tabs using android.support.v7.app.ActionBar but the accepted solution doesn't seem to work for me. In fact, in my main activity you can see I get the content id with

    int androidVersion = Build.VERSION.SDK_INT;
    if (androidVersion >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
        return android.R.id.content;
    } else {
        return R.id.action_bar_activity_content;
    }

but fragments content is still overlaied (I can't upload images because of my almost-zero reputation). Where am I wrong?

Update: My activity uses android:theme="@style/Theme.AppCompat.Light". I'm testing on a Nexus i9250 with Android 4.2.1

Answer 1

Just call ft.show(mfragment) method in onTabSelected and ft.hide(mfragment) method in onTabUnselected.

Look below

public void onTabReselected(Tab tab, FragmentTransaction ft) {
  // TODO Auto-generated method stub
}

public void onTabSelected(Tab tab, FragmentTransaction ft) {
  ft.show(mfragment);
}

public void onTabUnselected(Tab tab, FragmentTransaction ft) {
  ft.hide(mfragment);       
}

Answer 2

This is a known bug. You can find a workaround here:

https://code.google.com/p/android/issues/detail?id=58602

Answer 3

Have every Fragment implement ActionBar.TabListener. Add these methods below along with the other code in your fragment

@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
     mFragment = new MyFragment();
     ft.add(android.R.id.content, mFragment);
     ft.attach(mFragment);      
}

@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    ft.remove(mFragment);
}

@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
    // TODO Auto-generated method stub

}

You can remove the tab listener from your main activity. This handles all of it.