How to create a tabhost in android programming using XML and rename every tab?

Question

I know that my question is really basic, but believe me, I can't find a reliable tutorial that will teach me on how to use TabHost in android programming step by step for a beginner like me.

My problem is I dragged a tabhost in Eclipse to my layout, and I inserted a textview on every linearlayout but when I installed it on my phone, only the textview of the second tab is visible on the application. I don't know if there is a compatibility issue but here is my code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:android1="http://schemas.android.com/apk/res/android"
    android:id="@+id/sel"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android1:id="@+id/activityhead"
        android1:layout_width="match_parent"
        android1:layout_height="74dp"
        android1:text="TextView" />

    <LinearLayout
        android1:layout_width="match_parent"
        android1:layout_height="129dp"
        android1:orientation="vertical" >

        <ImageButton
            android1:id="@+id/imageButton1"
            android1:layout_width="124dp"
            android1:layout_height="match_parent"
            android1:scaleType="fitStart"
            android1:src="@drawable/button1" />

    </LinearLayout>

    <TabHost
        android1:id="@android:id/tabhost"
        android1:layout_width="match_parent"
        android1:layout_height="match_parent" >

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

            <TabWidget
                android1:id="@android:id/tabs"
                android1:layout_width="match_parent"
                android1:layout_height="wrap_content"

                 >

            </TabWidget>

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

                <LinearLayout
                    android1:id="@+id/tab1"
                    android1:orientation="vertical"
                    android1:layout_width="match_parent"
                    android1:layout_height="match_parent" >

                    <TextView
                        android1:id="@+id/textv1"
                        android1:layout_width="match_parent"
                        android1:layout_height="80dp"
                        android1:text="Sample Text 1"
                        >
                     </TextView>
                </LinearLayout>

                <LinearLayout
                    android1:id="@+id/tab2"
                    android1:orientation="vertical"
                    android1:layout_width="match_parent"
                    android1:layout_height="match_parent" >

                     <TextView
                        android1:id="@+id/textv2"
                        android1:layout_width="match_parent"
                        android1:layout_height="80dp"
                        android1:text="Sample Text 2"
                        >
                     </TextView>
                </LinearLayout>


            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>

Also, I don't know how to change the name of the tabs in tabhost.

Answer 1

I suggest you use SlidingTabLayout instead of TabHost. Its easy to implement and it provides you with swipe-able function easily, [link].(https://github.com/google/iosched/blob/master/android/src/main/java/com/google/samples/apps/iosched/ui/widget/SlidingTabLayout.java)

Please follow this tutorial, for more details.

Answer 2

private void initialiseTabHost() {
    mTabHost = (TabHost) findViewById(android.R.id.tabhost);
    mTabHost.setup();
    mTabHost.setBackgroundColor(Color.rgb(13, 62, 68));

    // TODO Put here your Tabs
    MainActivity.AddTab(this, MainActivity.mTabHost,
            MainActivity.mTabHost.newTabSpec("ButtonTab").setIndicator("Home"));

    MainActivity.AddTab(this, MainActivity.mTabHost,
            MainActivity.mTabHost.newTabSpec("ImageTab").setIndicator("Battery"));

    MainActivity.AddTab(this, MainActivity.mTabHost,
            MainActivity.mTabHost.newTabSpec("TextTab").setIndicator("Profile"));

    MainActivity.AddTab(this, MainActivity.mTabHost,
            MainActivity.mTabHost.newTabSpec("Buttons1").setIndicator("Settings"));

    mTabHost.setOnTabChangedListener(this);


    }

}

Answer 3

I suggest you to use TabLayout..to use it follow this tutorial..

And for TabHost follow this way

XML

<?xml version="1.0" encoding="utf-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
          android:id="@android:id/tabhost">

        <LinearLayout
                android:id="@+id/LinearLayout01"
                android:orientation="vertical"
                android:layout_height="fill_parent"
                android:layout_width="fill_parent">

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

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

        </LinearLayout>

</TabHost>

MainActivity.java

public class MainActivity extends TabActivity
{
            /** Called when the activity is first created. */
            @Override
            public void onCreate(Bundle savedInstanceState)
            {
                    super.onCreate(savedInstanceState);
                    setContentView(R.layout.main);

                    // create the TabHost that will contain the Tabs
                    TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);


                    TabSpec tab1 = tabHost.newTabSpec("First Tab");
                    TabSpec tab2 = tabHost.newTabSpec("Second Tab");
                    TabSpec tab3 = tabHost.newTabSpec("Third tab");

                   // Set the Tab name and Activity
                   // that will be opened when particular Tab will be selected
                    tab1.setIndicator("Tab1");
                    tab1.setContent(new Intent(this,Tab1Activity.class));

                    tab2.setIndicator("Tab2");
                    tab2.setContent(new Intent(this,Tab2Activity.class));

                    tab3.setIndicator("Tab3");
                    tab3.setContent(new Intent(this,Tab3Activity.class));

                    /** Add the tabs  to the TabHost to display. */
                    tabHost.addTab(tab1);
                    tabHost.addTab(tab2);
                    tabHost.addTab(tab3);

            }
}

TAB1

public class Tab1Activity  extends Activity
{
        @Override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);

            TextView  tv=new TextView(this);
            tv.setTextSize(25);
            tv.setGravity(Gravity.CENTER_VERTICAL);
            tv.setText("This Is Tab1 Activity");

            setContentView(tv);
        }
}

TAB2

public class Tab2Activity  extends Activity
{
        @Override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);

            TextView  tv=new TextView(this);
            tv.setTextSize(25);
            tv.setGravity(Gravity.CENTER_VERTICAL);
            tv.setText("This Is Tab2 Activity");

            setContentView(tv);
        }
}

TAB3

public class Tab3Activity  extends Activity
{
        @Override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);

            TextView  tv=new TextView(this);
            tv.setTextSize(25);
            tv.setGravity(Gravity.CENTER_VERTICAL);
            tv.setText("This Is Tab3 Activity");

            setContentView(tv);
        }
}