Android Vertical/Horizontal custom Tablayout

In this post we are going to see about Vertical Tab layout (May be you can say custom tab layout by other words.)

Normally we can create tab layout only horizontally. And also it will show some default separator within it. If you follow below method it won’t look like actual Tab layout. But it will do its functionality. 

Main.xml file will be like below.
1.       Normally we will have Tab host to use tab layout So we should have that here also.
2.       As like Tab host we are having Tab Widget.
3.       Then Normal Frame layout to show the  tab activities. 

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal" >

        <FrameLayout
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="0.2" >

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

          

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

                    <Button
                        android:id="@+id/Tab1"
                        android:layout_width="fill_parent"
                        android:layout_height="0dip"
                        android:layout_weight="1.0"
                        android:onClick="tabHandler"
                      
                        android:text="Tab1" />

                    <Button
                        android:id="@+id/Tab2"
                        android:layout_width="fill_parent"
                        android:layout_height="0dip"
                        android:layout_weight="1.0"
                        android:onClick="tabHandler"
                        android:text="Tab2" />

                    <Button
                        android:id="@+id/Tab3"
                        android:layout_width="fill_parent"
                        android:layout_height="0dip"
                        android:layout_weight="1.0"
                        android:onClick="tabHandler"
                        android:text="Tab3" />

                    <Button
                        android:id="@+id/Tab4"
                        android:layout_width="fill_parent"
                        android:layout_height="0dip"
                        android:layout_weight="1.0"
                        android:onClick="tabHandler"
                        android:text="Tab4" />

                    <Button
                        android:id="@+id/Tab5"
                        android:layout_width="fill_parent"
                        android:layout_height="0dip"
                        android:layout_weight="1.0"
                        android:onClick="tabHandler"
                        android:text="Tab5" />
                     
                </LinearLayout>
         
        </FrameLayout>

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

</TabHost>



Activity File :

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class VerticalTabhost extends TabActivity {
       /** Called when the activity is first created. */
       Button Tab1,Tab2,Tab3,Tab4,Tab5;
       TabHost tabHost;
       public static String Tab="";
       @Override
       public void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.main_view);

               tabHost = getTabHost();
            
              Tab1=(Button)findViewById(R.id.Tab1);
              Tab2=(Button)findViewById(R.id.Tab2);
              Tab3=(Button)findViewById(R.id.Tab3);
              Tab4=(Button)findViewById(R.id.Tab4);
              Tab5=(Button)findViewById(R.id.Tab5);

              // Tab for tab1
              TabSpec spec1 = tabHost.newTabSpec("Tab1");
              // setting Title and Icon for the Tab
              spec1.setIndicator("Tab1");
              Intent Intent1 = new Intent(this, Activity1.class);
              spec1.setContent(Intent1);

              // Tab for tab2
              TabSpec spec2 = tabHost.newTabSpec("Tab2");
              // setting Title and Icon for the Tab
              spec2.setIndicator("Tab2");
              Intent Intent2 = new Intent(this, Activity1.class);
              spec2.setContent(Intent2);

              // Tab for tab3
              TabSpec spec3 = tabHost.newTabSpec("Tab3");
              // setting Title and Icon for the Tab
              spec3.setIndicator("Tab3");
              Intent Intent3 = new Intent(this, Activity1.class);
              spec3.setContent(Intent3);

              // Tab for tab4

              TabSpec spec4 = tabHost.newTabSpec("Tab4");
              // setting Title and Icon for the Tab
              spec4.setIndicator("Tab4");
              Intent Intent4 = new Intent(this, Activity1.class);
              spec4.setContent(Intent4);

              // Tab for tab5
              TabSpec spec5 = tabHost.newTabSpec("");
              // setting Title and Icon for the Tab
              spec5.setIndicator("");
              Intent Intent5 = new Intent(this, Activity1.class);
              spec5.setContent(Intent5);
                         
            
              // Adding all TabSpec to TabHost

              tabHost.addTab(spec1); // Adding tab1
              tabHost.addTab(spec2); // Adding tab2

              tabHost.addTab(spec3); // Adding tab3
              tabHost.addTab(spec4); // Adding tab4
              tabHost.addTab(spec5); // Adding tab5
            
            
       }

//======================= click Handling for the tab layout buttons=============
       public void tabHandler(View target) {
              if (target.getId() == R.id.Tab1) {
                     Tab="this is Tab 1";
                     tabHost.setCurrentTab(0);
            
              } else if (target.getId() == R.id.Tab2) {
                     Tab="this is Tab 2";
                   
                   
                     tabHost.setCurrentTab(1);
                   
              } else if (target.getId() == R.id.Tab3) {
                     Tab="this is Tab 3";
                   
                     tabHost.setCurrentTab(2);
                   
              }
              else if (target.getId() == R.id.Tab4) {
                     Tab="this is Tab 4";
                   
                     tabHost.setCurrentTab(3);
                   
              }
              else if (target.getId() == R.id.Tab5) {
                     Tab="this is Tab 5";
                   
                     tabHost.setCurrentTab(4);
                   
              }
       }
}

Vertical Tablayout will be look like below image. 

 If you want to change this for horizontal view your design will be look like below.

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

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

        <FrameLayout
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="0.2" >

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

          

                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:orientation="horizontal" >

                    <Button
                        android:id="@+id/Tab1"
                        android:layout_width="0dip"
                        android:layout_height="fill_parent"
                        android:layout_weight="1.0"
                        android:onClick="tabHandler"
                      
                        android:text="Tab1" />

                    <Button
                        android:id="@+id/Tab2"
                        android:layout_width="0dip"
                        android:layout_height="fill_parent"
                        android:layout_weight="1.0"
                        android:onClick="tabHandler"
                        android:text="Tab2" />

                    <Button
                        android:id="@+id/Tab3"
                        android:layout_width="0dip"
                        android:layout_height="fill_parent"
                        android:layout_weight="1.0"
                        android:onClick="tabHandler"
                        android:text="Tab3" />

                    <Button
                        android:id="@+id/Tab4"
                        android:layout_width="0dip"
                        android:layout_height="fill_parent"
                        android:layout_weight="1.0"
                        android:onClick="tabHandler"
                        android:text="Tab4" />

                    <Button
                        android:id="@+id/Tab5"
                        android:layout_width="0dip"
                        android:layout_height="fill_parent"
                        android:layout_weight="1.0"
                        android:onClick="tabHandler"
                        android:text="Tab5" />
                     
                </LinearLayout>
         
        </FrameLayout>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:background="@android:color/darker_gray"
            android:layout_weight="0.8" />
    </LinearLayout>

</TabHost>

View will be look like below image.

Hope this will help to some peoples.