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