Saturday, 29 March 2014

TabWidget HorizontalScrollView Functionality Using TabHost in Android Applications


In android applications TabWidget functionality is very useful feature. It help to quick tab navigation using HorizontalScrollView and display tab relevant screen.


main.xml


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >



    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:text="Simple TabWidget Functionality"
        android:textColor="#336633"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TabHost
        android:id="@+id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="20dp" >

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

            <!-- To view tab widget in horizontal scroll keep TabWidget xml code within HorizontalScrollView -->

            <HorizontalScrollView
                android:id="@+id/horizontalScrollView1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:fillViewport="true" >

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" >
                </TabWidget>
            </HorizontalScrollView>

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

                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="60dp"
                    android:orientation="vertical" >

                    <AnalogClock
                        android:id="@+id/analogClock1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="160dp"
                    android:orientation="vertical" >

                    <Chronometer
                        android:id="@+id/chronometer1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:text="Chronometer" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="160dp"
                    android:orientation="vertical" >

                    <DigitalClock
                        android:id="@+id/digitalClock1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:text="DigitalClock" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab4"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="60dp"
                    android:orientation="vertical" >

                    <TimePicker
                        android:id="@+id/timepicker"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab5"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="60dp"
                    android:orientation="vertical" >

                    <DatePicker
                        android:id="@+id/datepicker"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab6"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="40dp"
                    android:orientation="vertical" >

                    <CalendarView
                        android:id="@+id/calenderview"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center" />
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>

TabWidgetActivity.java


package com.rakesh.tiwari.tabwidget;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class TabWidgetActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

TabHost tabHost = (TabHost) findViewById(R.id.tabhost);
tabHost.setup();
TabSpec tSpec = tabHost.newTabSpec("tag1");
tSpec.setContent(R.id.tab1);
tSpec.setIndicator("Analog Clock");
tabHost.addTab(tSpec);

tSpec = tabHost.newTabSpec("tag2");
tSpec.setContent(R.id.tab2);
tSpec.setIndicator("Chronometer");
tabHost.addTab(tSpec);

tSpec = tabHost.newTabSpec("tag3");
tSpec.setContent(R.id.tab3);
tSpec.setIndicator("Digital Clock");
tabHost.addTab(tSpec);

tSpec = tabHost.newTabSpec("tag4");
tSpec.setContent(R.id.tab4);
tSpec.setIndicator("Time Picker");
tabHost.addTab(tSpec);

tSpec = tabHost.newTabSpec("tag5");
tSpec.setContent(R.id.tab5);
tSpec.setIndicator("Date Picker");
tabHost.addTab(tSpec);

tSpec = tabHost.newTabSpec("tag6");
tSpec.setContent(R.id.tab6);
tSpec.setIndicator("Calender View");
tabHost.addTab(tSpec);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.tab_widget, menu);
return true;
}

}


AndroidManifesr.xml


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.rakesh.tiwari.tabwidget"
    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="com.rakesh.tiwari.tabwidget.TabWidgetActivity"
            android:label="@string/app_name"
            android:screenOrientation="portrait" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 TabWidget HorizontalScrollView
 TabWidget HorizontalScrollView

TabWidget TabHost HorizontalScrollView
 TabWidget TabHost HorizontalScrollView

TabWidget Functionality
TabWidget Functionality

TabWidget Creation
TabWidget Creation

TabWidget TabHost
TabWidget TabHost 

TabWidget TabHost HorizontalScrollView
TabWidget TabHost HorizontalScrollView