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
************************************