Have Tabs under a Tab in android

Question

I want to place tabs under a tab. Basically i have a parent tabs say Tab1 and Tab2. Under Tab1 i want 2 more tabs: Tab1a and Tab1b and similarly 2 tabs below Tab2. I have following xml file structure:

<?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="@+id/tabHost"
android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen">

<TabWidget 
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@android:id/tabs"
android:tabStripEnabled="false"     
android:background="@drawable/tabwstyle"/>

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


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:paddingTop="60dp"
    android:id="@+id/tab1">     

    <TabHost 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/tabHost_pb">

        <TabWidget 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs"
            android:tabStripEnabled="false"     
            android:background="@drawable/tabwstyle"/>

        <LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical" 
            android:paddingTop="60dp"
            android:id="@+id/tab1a">


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

                <ListView
                    android:id="@+id/listview"
                    android:layout_width="fill_parent"    
                    android:layout_height="wrap_content" 
                    android:divider="@drawable/divider"
                    android:dividerHeight="10dp" 
                    android:paddingTop="15dp"
                    android:smoothScrollbar="true"/>

                </FrameLayout>

                <FrameLayout 
                    android:id="@+id/frame2"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:visibility="gone">
                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="50dp"
                    android:text="@string/testtxt"
                    android:id="@+id/frame2text"/>
                </FrameLayout>

        </LinearLayout>    


        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:paddingTop="60dp"
            android:id="@+id/tab1b">

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="50dp"
                android:text="@string/testtxt"
                android:id="@+id/tab1btext"/>

        </LinearLayout>

    </TabHost>


</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:paddingTop="60dp"
    android:id="@+id/tab2">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:text="@string/testtxt"
        android:id="@+id/tab2text"/>

</LinearLayout>

 </FrameLayout>
 </TabHost>

My java code where i want to do work:

 TabHost tabhost=(TabHost) findViewById(R.id.tabHost);
    tabhost.setup();                     

    tabhost.getTabWidget().setDividerDrawable(R.drawable.divider2);             

    TabSpec spec1=tabhost.newTabSpec("Tab 1");
    spec1.setContent(R.id.tab1);
    spec1.setIndicator("Pain Box");

    TabSpec spec2=tabhost.newTabSpec("Tab 2");
    spec2.setIndicator("Pain List");
    spec2.setContent(R.id.tab2);

    tabhost.addTab(spec1);
    tabhost.addTab(spec2);             

    //Keep below after Add spec or crash 
    tabhost.getTabWidget().getChildTabViewAt(0).setBackgroundDrawable(null);
    tabhost.getTabWidget().getChildTabViewAt(1).setBackgroundDrawable(null);

    TabHost tabhost_pb=(TabHost) findViewById(R.id.tabHost_pb);
    tabhost_pb.setup();

    tabhost_pb.getTabWidget().setDividerDrawable(R.drawable.divider2);

    TabSpec spec_pb1=tabhost_pb.newTabSpec("Tab1a");
    spec_pb1.setContent(R.id.tab1a);
    spec_pb1.setIndicator("All");

    TabSpec spec_pb2=tabhost_pb.newTabSpec("Tab1b");
    spec_pb2.setContent(R.id.tab1b);
    spec_pb2.setIndicator("Followers");

    tabhost_pb.addTab(spec_pb1);
    tabhost_pb.addTab(spec_pb2);

    tabhost_pb.getTabWidget().getChildTabViewAt(0).setBackgroundDrawable(null);
    tabhost_pb.getTabWidget().getChildTabViewAt(1).setBackgroundDrawable(null);

Now the code works fine when i comment all the part below the 1st tab ie. commenting all the lines which start from : TabHost tabhost_pb=(TabHost) findViewById(R.id.tabHost_pb);

So when i comment my tabs arent rendered under Tab1 but they leave a space

Answer 1

There is a similar issue about nested tabs posted on Stackoverflow.. Here is the link .. May be this might help.