FragmentTabHost tabs transparent when they should be opaque

Question

I recently changed my app from all activities to all fragments. As part of the change I started using fragment tab host which have been acting strangely.

For some reason my tabs are transparent and show there content underneath the tab buttons, but all the tutorials show them as opaque with the content underneath. I haven't done anything special and need to figure out how to make them work as intended. The app "style" is Theme.AppCompat.Light if that makes any difference.

This is how it currently looks on device: https://dl.dropboxusercontent.com/u/70446113/MLP/2015-04-13_10-55-31.png

This is the on host fragment

    @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setHasOptionsMenu(true);

    rootView = inflater.inflate(R.layout.fragment_search, container, false);

    mTabHost = (FragmentTabHost) rootView.findViewById(android.R.id.tabhost);
    mTabHost.setup(getActivity(), getChildFragmentManager(), R.id.realtabcontent);

    mTabHost.addTab(mTabHost.newTabSpec(basicTag).setIndicator("Basic"), BasicSearchFragment.class, null);
    mTabHost.addTab(mTabHost.newTabSpec(advancedTag).setIndicator("Advanced"), AdvancedSearchFragment.class, null);

    return rootView;
}

The fragment layout. The contents layout is a linear layout containing numerous buttons.

    <?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:paddingLeft="8dp"
    android:paddingRight="8dp"
    android:paddingTop="8dp" >

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

        <LinearLayout
            android:id="@+id/realtabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >
        </LinearLayout>
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

Any help would be greatly appreciated

Answer 1

You need to add TabWidget in tab host. See the changes I have done in your layout:

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

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TabWidget
            android:id="@android:id/tabs"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp" />

        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>
</android.support.v4.app.FragmentTabHost>

for more reference see this Question

Hope it will help.