Android Tab View

                      Creating Android TabView Application

This article will walk through creating a tabbed UI in Android.Android using the TabHost API. This is an older API that is available in all versions of Android. This example will create an application with five tabs, with the logic for each tab being encapsulated in an Activity. The following screenshot is an example of the application that we will create:

Creating the Application:

1. First lets create the activity_main.xml file. that will host the tabs.

<?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:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </LinearLayout>
</TabHost>

The TabHost must have two child views inside it: a TabWidget and a FrameLayout. To position the TabWidget and FrameLayout vertically inside the TabHost, a LinearLayout is used. The FrameLayout is where the content for each tab goes, which is empty because the TabHost will automatically embed each Activity at runtime.
There are several rules that must be observed when it comes to creating the layout for tabbed user interfaces:

1. The TabHost must have the id @android:id/tabhost.
2. The TabWidget must have the id @android:id/tabs.
3. The FrameLayout must have the id @android:id/tabcontent.
4. TabHost requires any activity it manages to inherit from TabActivity. Therefore, it is important to subclass TabActivity here - a regular Activity will not work.
   
   now creat the MainActivity.java file .
   
   

   MainActivity.java

   import android.app.TabActivity;
   import android.content.Intent;
   import android.content.res.Resources;
   import android.os.Bundle;
   import android.view.Menu;
   import android.widget.TabHost;
   import android.widget.TabHost.TabSpec;
   
   public class MainActivity extends TabActivity
   {
   
       @Override
       public void onCreate(Bundle savedInstanceState)
       {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
          
           Resources ressources = getResources();
          
           TabHost tabHost = getTabHost();
         
           // Android tab
           Intent intentAndroid = new Intent(this, AnimalA.class);
           TabSpec tabSpecAndroid = tabHost
               .newTabSpec("Animal A")
               .setIndicator("Animal A", ressources.getDrawable(R.drawable.a))
               .setContent(intentAndroid);
   
           // Apple tab
           Intent intentApple = new Intent(this, AnimalB.class);
           TabSpec tabSpecApple = tabHost
               .newTabSpec("Animal")
               .setIndicator("Animal", ressources.getDrawable(R.drawable.b))
               .setContent(intentApple);
         
           // Windows tab
           Intent intentWindows = new Intent(this, AnimalD.class);
           TabSpec tabSpecWindows = tabHost
               .newTabSpec("Animal")
               .setIndicator("", ressources.getDrawable(R.drawable.d))
               .setContent(intentWindows);
         
           // Blackberry tab
           Intent intentBerry = new Intent(this, AnimalC.class);
           TabSpec tabSpecBerry = tabHost
               .newTabSpec("Animal")
               .setIndicator("", ressources.getDrawable(R.drawable.e))
               .setContent(intentBerry);
         
           Intent intentBerry1 = new Intent(this, AnimalC.class);
           TabSpec tabSpecBerry1 = tabHost
               .newTabSpec("Animal")
               .setIndicator("", ressources.getDrawable(R.drawable.f))
               .setContent(intentBerry1);
      
           // add all tabs
           tabHost.addTab(tabSpecAndroid);
           tabHost.addTab(tabSpecApple);
           tabHost.addTab(tabSpecWindows);
           tabHost.addTab(tabSpecBerry);
           tabHost.addTab(tabSpecBerry1);
         
           //set Windows tab as default (zero based)
           tabHost.setCurrentTab(3);
       }
   
       @Override
       public boolean onCreateOptionsMenu(Menu menu) {
           getMenuInflater().inflate(R.menu.activity_main, menu);
           return true;
       }
   }
   
   
   Now, all you need to do is create a FragmentActivity to accommodate your tabs fragment.
   
   Here I will give you  the first tab as AnimalA.java activity and deer.xml . you need to make all other  activities for each tab.
   
   following class shows first tab activity.
   
   AnimalA.java
   import android.app.Activity;
   import android.os.Bundle;
   
   public class AnimalA extends Activity
   {
       public void onCreate(Bundle savedInstanceState)
       {
           super.onCreate(savedInstanceState);
          
           setContentView(R.layout.deer);
       }
   }
   
   deer.xml
   
   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:orientation="vertical"
       android:background="#ffffff"
       android:gravity="center" >
      
       <ImageView
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:src="@drawable/deer"
           >
       </ImageView>
   </LinearLayout>
   
   follow same for remaining tab so you will get all tabs Activity by doing above same.
   
   With that, your job is pretty much done. You can see  in the screenshot the result.

 

stay tune for next session happy coding :)