Working with Tab Layout in Mono For Android

Introduction

 
When you want to wrap multiple views in a single window and navigate thought them with a Tab Container, you have to use Tab Layouts. The container object for TabLayout is Android.Widget.TabHost. When the user selects a tab, this object sends a message to the parent container, TabHost, to tell it to switch the displayed page.
 
TabHost is used to navigate through multiple views within the same activity.
 
tabs in android
syntex:
    [Android.Runtime.Register("android/widget/TabWidget")]
    public class TabWidget : LinearLayout, Android.Views.View.IOnFocusChangeListener
 
The Activity of Tab Layout goes like:
 
Activity
-TabHost
  -TabWidget
    -FrameLayout
      -TabsContent
  • First, we create TabHost
  • Than create TabWidget
  • Than Create FrameLayout
  • Last, create the Content for the Tabs
Let's look at an example in which you'll create a tabbed UI that uses a separate an Activity for each tab:
 
Step 1: Start a new Mono for Android Application in Visual Studio 2010 named AndroidTabLayout.
 
Step 2: Add the images to your project Resources/Drawable/ like I add android.png and, and set the Build Action of image to AndroidResource in the property window.
 
image property in android
 
Step 3 : Open the Resources/Layout/Main.axml file and edit the code like below code:
 
Main.axml file:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@android:id/tabh"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent">  
  6.   <LinearLayout  
  7.       android:orientation="vertical"  
  8.       android:layout_width="fill_parent"  
  9.       android:layout_height="fill_parent">  
  10.     <TabWidget  
  11.         android:id="@android:id/alltabs"  
  12.         android:layout_width="fill_parent"  
  13.         android:layout_height="wrap_content" />  
  14.     <FrameLayout  
  15.         android:id="@android:id/tabcontents"  
  16.         android:layout_width="fill_parent"  
  17.         android:layout_height="fill_parent">      
  18.       <ImageView  
  19.         android:id="@+id/imageview1"  
  20.         android:src="@drawable/android"  
  21.         android:layout_width="wrap_content"  
  22.         android:layout_height="wrap_content"/>  
  23.       <TextView  
  24.           android:id="@+id/textview1"  
  25.           android:layout_width="fill_parent"  
  26.           android:layout_height="fill_parent"  
  27.           android:textSize="15px"  
  28.           android:text="ANDROID" />  
  29.       <TextView  
  30.           android:id="@+id/textview2"  
  31.           android:layout_width="fill_parent"  
  32.           android:layout_height="fill_parent"  
  33.           android:textSize="15px"  
  34.           android:text="Android is a software stack for mobile devices that includes an operating system,  
  35.                              middleware and key applications. The Android SDK provides the tools and APIs  
  36.                              necessary to begin developing applications on the Android platform using the Java  
  37.                              programming language." />       
  38.     </FrameLayout>  
  39.   </LinearLayout>  
  40. </TabHost> 
     
In the above code, we first create a TabHost than, as it required, the TabWidget and a FrameLayout both live somewhere within it. To position the TabWidget and FrameLayout vertically, a LinearLayout is used, and inside the FrameLayout we create one ImageView and two TextViews to customize the tabs.
 
Step 4: Now open the Activity1.cs and use the following code:
 
Activity1.cs file
  1. using System;  
  2.    
  3. using Android.App;  
  4. using Android.Content;  
  5. using Android.Runtime;  
  6. using Android.Views;  
  7. using Android.Widget;  
  8. using Android.OS;  
  9.    
  10. namespace AndroidTabLayout  
  11. {  
  12.     [Activity(Label = "AndroidTabLayout", MainLauncher = true)]  
  13.     public class Activity1 : TabActivity  
  14.     {  
  15.    
  16.         protected override void OnCreate(Bundle bundle)  
  17.         {  
  18.             base.OnCreate(bundle);  
  19.    
  20.             // Set our view from the "main" layout resource   
  21.             SetContentView(Resource.Layout.Main);  
  22.    
  23.             TabHost.TabSpec con;  
  24.    
  25.             con = TabHost.NewTabSpec("tab_test1").SetIndicator("IMAGE").SetContent(Resource.Id.imageview1);  
  26.             TabHost.AddTab(con);  
  27.    
  28.    
  29.             con = TabHost.NewTabSpec("tab_test2").SetIndicator("NAME").SetContent(Resource.Id.textview1);  
  30.             TabHost.AddTab(con);  
  31.    
  32.             con = TabHost.NewTabSpec("tab_test3").SetIndicator("DESCRIPTION").SetContent(Resource.Id.textview2);  
  33.             TabHost.AddTab(con);  
  34.    
  35.             TabHost.CurrentTab = 0;   
  36.         }        
  37.     }  
  38.  
In the above code, you see the first we change the base class from Activity to TabActivity, By default, the base class will be set to an Activity. After that we use two methods, SetIndicator() to set the text for the tab button, and SetContent() to define which View we want to associate with the tab and reveal when pressed.
 
Step 5: Run your application.
 
In this application, you see how all the tabs are categorized for different types of information, when you click on a particular tab the related information of the tab will be displayed in the content area.
 
Your application looks like: 
 
By default, the content of the first Tab will be displayed:
 
android tab layout
 
Now click on the second Tab, the name will display:
 
tab layout in android
 
Now click on the third Tab, the description will display:
 
android tab
 
Thank You............


Similar Articles