Monday, 28 January 2013

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

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

5 comments: