Android TabHost appears in Front of Fragments

Question

I have not been able to find a solution to this issue on any other stack posts or Android documentation. For some reason in a FragmentActivity using the support.v4 library fragments appear behind the tabhost as demonstrated in this screenshot:

MainActivity.java:

public class MainActivity extends FragmentActivity {
    // Declare Variables
    private FragmentTabHost mTabHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Set the view from main_fragment.xml
        setContentView(R.layout.main_fragment);

        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); //locks screen orientation to portrait       

        // Locate android.R.id.tabhost in main_fragment.xml
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);

        // Create the tabs in main_fragment.xml
        mTabHost.setup(this, getSupportFragmentManager(), R.id.tabcontent);

        // Create Tab1 with a custom image in res folder
        mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator("Tab 1"), 
                FragmentTab1.class, null);

        // Create Tab2
        mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator("Tab 2"), 
                FragmentTab2.class, null);

        // Create Tab2
        mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator("Tab 3"), 
                FragmentTab3.class, null);
        }

main_fragment.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <FrameLayout
            android:id="@+id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
        />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

Any ideas how to resolve this issue and have the content of the fragment appear below the tabs?

Thanks

Answer 1

it's simple :) You can use this in [main_fragment.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">

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.app.FragmentTabHost>

    <FrameLayout
        android:id="@+id/tabcontent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

Or : [Use Margin]

<?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.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <FrameLayout
                android:id="@+id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="55dp"/>

        </RelativeLayout>

    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

Good Luck.