Programmable tab layout in Android

Question

I need to create a tab layout in an Android app, which would look like this:

I have 2 requirements:

1. The ability to populate the layout programatically, not only from an XML.
2. Stylization (I want to stylize ot to get the effect presented above).

Is there something Android provides or some external library I could use?

Answer 1

You can setup your tabs programatically. Something like this:

    TabHost host = (TabHost) root.findViewById(R.id.tab_host);
    host.setup();

    //First tab
    TabSpec spec = host.newTabSpec("Tab One");
    spec.setContent(R.id.tab_one_container);
    spec.setIndicator("One");
    host.addTab(spec);

    //Second tab
    spec = host.newTabSpec("Tab Two");
    spec.setContent(R.id.tab_two_container);
    spec.setIndicator("Two");
    host.addTab(spec);

    //Third tab
    spec = host.newTabSpec("Tab Three");
    spec.setContent(R.id.tab_three_container);
    spec.setIndicator("Three");
    host.addTab(spec);

    //etc...

            //Set the default tab to the first one
    host.setCurrentTab(0);

And in your xml you need to set the tabs up, too. Like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp" >

<TabHost
    android:id="@+id/tab_host"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="25dp" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

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

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

            <LinearLayout
                android:id="@+id/tab_one_container"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:text="One" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_marginLeft="20dp"
                    android:text="Test1" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_two_container"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:text="Two" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_marginLeft="20dp"
                    android:text="Test2" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_three_container"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:text="Three" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_marginLeft="20dp"
                    android:text="Test3" />
            </LinearLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

</LinearLayout>

This should set up your tabs.

With regards to styling, I'm sure there are a lot of custom libraries out there, but to get exactly what you want you can create a custom style of your own. Please refer to here as a starting point - http://developer.android.com/guide/topics/ui/themes.html