Having problems with the Fragment Tab Host - It doesn't work

Question

What I am trying to do is to create three tabs in my main xml file. and then load up the fragments based on the tabs which has been pressed.

I have having problems with the Fragment Tab Host. I have this XML which has ;

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#369742"
android:gravity="start|end"
android:longClickable="true">

<FragmentTabHost
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/tabHost"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:clickable="false">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:clickable="false"
        android:background="#5DAD68">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:clickable="false"
        android:background="#5DAD68"
        android:weightSum="1">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="270dp"
            android:layout_height="wrap_content"
            android:background="#5DAD68"
            android:clickable="false"
            android:measureWithLargestChild="true"
            android:orientation="horizontal"
            android:layout_weight="1.04"
            android:longClickable="false"
            android:paddingTop="10dp"
            android:paddingLeft="30dp"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="40dp"></TabWidget>

        <ImageButton
            android:layout_width="62dp"
            android:layout_height="40dp"
            android:id="@+id/horsePointer"
            android:backgroundTintMode="src_atop"
            android:src="@drawable/ic_horse"

            android:layout_toRightOf="@android:id/tabs"
            android:background="#5DAD68"
            android:layout_gravity="center_vertical" />
    </LinearLayout>
        <FrameLayout
            android:id="@+id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:clickable="false">

            <LinearLayout
                android:id="@+id/tab2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:clickable="false"
                android:background="#FFFFFF"
                android:weightSum="1">


            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:clickable="true"
                android:weightSum="1"
                android:background="#FFFFFF"
                android:layout_gravity="bottom">

            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:clickable="false"
                android:background="#FFFFFF">

            </LinearLayout>

        </FrameLayout>

    </LinearLayout>
</FragmentTabHost>

In My Main activity I have got this code ;

public class MainActivity extends ActionBarActivity {

private FragmentTabHost tabHost;
private TextView click;


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


    // Refactor at your will.
    tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);

    tabHost.setup(this, getSupportFragmentManager(), R.id.tabcontent);

    tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("", getResources().getDrawable(R.drawable.ic_tab1)),
            tab1Fragment.class, null);

    tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("", getResources().getDrawable(R.drawable.tab2)),
            tab2Fragment.class, null);

    tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("", getResources().getDrawable(R.drawable.ic_tab3)),
            tab3Fragment.class, null);
}

When I run this program it says "Unfortunately, Example Project has stopped."

This is the Logcat I get ; Logcat

Answer 1

You have used a TabHost in your XML layout and a FragmentTabHost in your Activity code. The two classes are different, and you can use only one of them at a time, not both together.

Your XML layout needs to be defined like this:

<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >

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

    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"/>

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

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