Android TabLayout с использованием наложения фрагментов android.support.v7.app.ActionBar и android.support.v4.app.Fragment

Я новичок в программировании для Android, но я сделаю все возможное, чтобы предоставить всю необходимую информацию. Я использую новые android.support.v7.app.ActionBarActivity и android.support.v4.app.Fragment для отображения макета вкладки для Android API с 8 по 17. У меня возникла проблема с правильным отображением двух моих фрагментов в моей деятельности, потому что они накладываются друг на друга после того, как я выбираю один из них. Итак, это мой основной код активности:

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;
        }
    }

}

И это два моих фрагмента (оба используют свой собственный макет xml). Первый:

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;

    }
}

и второй:

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;

    }
}

и, в результате, если я выбираю вторую вкладку, представления помещаются друг над другом! Я нашел аналогичный вопрос здесь Вкладки с использованием android.support.v7.app.ActionBar, но принятое решение, похоже, не работай на меня. Фактически, в моей основной деятельности вы можете видеть, что я получаю идентификатор контента с помощью

    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;
    }

но содержимое фрагментов по-прежнему накладывается (я не могу загружать изображения из-за моей почти нулевой репутации). Где я не прав?

Обновление: в моей деятельности используется android:theme="@style/Theme.AppCompat.Light". Я тестирую Nexus i9250 с Android 4.2.1.