Vertical Tabs in Android

Screen Shots:

1. activity_main.xml

<?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:baselineAligned="false"

        android:orientation="horizontal" >

        <FrameLayout

            android:layout_width="0dip"

            android:layout_height="fill_parent"

            android:layout_weight="0.3" >

            <TabWidget

                android:id="@android:id/tabs"

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:visibility="invisible" />

            <ScrollView

                android:layout_width="fill_parent"

                android:layout_height="fill_parent" >

                <LinearLayout

                    android:layout_width="fill_parent"

                    android:layout_height="fill_parent"

                    android:orientation="vertical" >

                    <Button

                        android:id="@+id/artist_id"

                        android:layout_width="fill_parent"

                        android:layout_height="wrap_content"

                        android:onClick="tabHandler"

                        android:text="Tab1" />

                    <Button

                        android:id="@+id/album_id"

                        android:layout_width="fill_parent"

                        android:layout_height="wrap_content"

                        android:onClick="tabHandler"

                        android:text="Tab2" />

                    <Button

                        android:id="@+id/song_id"

                        android:layout_width="fill_parent"

                        android:layout_height="wrap_content"

                        android:onClick="tabHandler"

                        android:text="Tab3" />

                    <Button

                        android:id="@+id/tab4_id"

                        android:layout_width="fill_parent"

                        android:layout_height="wrap_content"

                        android:onClick="tabHandler"

                        android:text="Tab4" />

                    <Button

                        android:id="@+id/tab5_id"

                        android:layout_width="fill_parent"

                        android:layout_height="wrap_content"

                        android:onClick="tabHandler"

                        android:text="Tab5" />

                    <Button

                        android:id="@+id/tab6_id"

                        android:layout_width="fill_parent"

                        android:layout_height="wrap_content"

                        android:onClick="tabHandler"

                        android:text="Tab6" />

                    <Button

                        android:id="@+id/tab7_id"

                        android:layout_width="fill_parent"

                        android:layout_height="wrap_content"

                        android:onClick="tabHandler"

                        android:text="Tab7" />

                    <Button

                        android:id="@+id/tab8_id"

                        android:layout_width="fill_parent"

                        android:layout_height="wrap_content"

                        android:onClick="tabHandler"

                        android:text="Tab8" />

                    <Button

                        android:id="@+id/tab9_id"

                        android:layout_width="fill_parent"

                        android:layout_height="wrap_content"

                        android:onClick="tabHandler"

                        android:text="Tab9" />

                    <Button

                        android:id="@+id/tab10_id"

                        android:layout_width="fill_parent"

                        android:layout_height="wrap_content"

                        android:onClick="tabHandler"

                        android:text="Tab10" />

                </LinearLayout>

            </ScrollView>

        </FrameLayout>

        <FrameLayout

            android:id="@android:id/tabcontent"

            android:layout_width="0dip"

            android:layout_height="fill_parent"

            android:layout_weight="0.7" />

    </LinearLayout>

</TabHost>

2. MainActivity

public class MainActivity extends TabActivity {

          Button artistButton, songButton, videosButton;

          TabHost tabHost;

          @Override

          public void onCreate(Bundle savedInstanceState) {

                    super.onCreate(savedInstanceState);

                   setContentView(R.layout.activity_main);

                   // Buttons referencing

                   artistButton = (Button) findViewById(R.id.artist_id);

                   songButton = (Button) findViewById(R.id.song_id);

                   videosButton = (Button) findViewById(R.id.album_id);

                   // getting TabHost

                   tabHost = getTabHost();

                   // Tab for Photos

                   TabSpec photospec = tabHost.newTabSpec("Photos");

                   // setting indicator

                   photospec.setIndicator("Photos");

                   Intent photosIntent = new Intent(this, Tab1Activity.class);

                    photospec.setContent(photosIntent);

                   // Tab for Songs

                   TabSpec songspec = tabHost.newTabSpec("Songs");

                   songspec.setIndicator("Songs");

                   Intent songsIntent = new Intent(this, Tab2Activity.class);

                   songspec.setContent(songsIntent);

                   // Tab for Videos

                   TabSpec videospec = tabHost.newTabSpec("Videos");

                   videospec.setIndicator("Videos");

                   Intent videosIntent = new Intent(this, Tab3Activity.class);

                   videospec.setContent(videosIntent);

                   // Adding all TabSpec to TabHost

                   tabHost.addTab(photospec); // Adding photos tab

                   tabHost.addTab(songspec); // Adding songs tab

                   tabHost.addTab(videospec); // Adding videos tab

          }

          public void tabHandler(View target) {

                   artistButton.setSelected(false);

                   videosButton.setSelected(false);

                   songButton.setSelected(false);

                   if (target.getId() == R.id.artist_id) {

                             tabHost.setCurrentTab(0);

                             artistButton.setSelected(true);

                   } else if (target.getId() == R.id.album_id) {

                             tabHost.setCurrentTab(1);

                             videosButton.setSelected(true);

                   } else if (target.getId() == R.id.song_id) {

                             tabHost.setCurrentTab(2);

                             songButton.setSelected(true);

                   }

          };

}

3.1. Tab1Activity

public class Tab1Activity extends Activity {

          @Override

          public void onCreate(Bundle savedInstanceState) {

                   super.onCreate(savedInstanceState);

                   setContentView(R.layout.tab1_view);

          }

}

3.2. tab1_view.xml

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#0000ff" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:text="Tab 1"

        android:textAllCaps="true"

        android:textColor="#ffffff"

        android:textSize="50dp"

        android:textStyle="bold" />

</RelativeLayout>

4.1. Tab2Activity

public class Tab2Activity extends Activity {

          /** Called when the activity is first created. */

          @Override

          public void onCreate(Bundle savedInstanceState) {

                   super.onCreate(savedInstanceState);

                   setContentView(R.layout.tab2_view);

          }

}

4.2. tab2_view.xml

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#00ffff" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:text="Tab 2"

        android:textAllCaps="true"

        android:textColor="#ffffff"

        android:textSize="50dp"

        android:textStyle="bold" />

</RelativeLayout>

5.1. Tab3Activity

public class Tab3Activity extends Activity {

          @Override

          public void onCreate(Bundle savedInstanceState) {

                   super.onCreate(savedInstanceState);

                   setContentView(R.layout.tab3_view);

          }

}

5.2. tab3_view.xml

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#ff00ff" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:text="Tab 3"

        android:textAllCaps="true"

        android:textColor="#ffffff"

        android:textSize="50dp"

        android:textStyle="bold" />

</RelativeLayout>

6. mainfest.xml

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

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.venkat.verticaltabsdemo"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="18" />

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name=".MainActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

        <activity android:name=".Tab1Activity" />

        <activity android:name=".Tab2Activity" />

        <activity android:name=".Tab3Activity" />

    </application>

</manifest>

************************************

    Download Full Source Code HERE

************************************