Pr.Pg Next Pg

Tabs Tutorials

  • Tabs in the action bar make it easy to explore and switch between different views or functional aspects of your app, or to browse categorized data sets.

  • There are two main types of tabs

 

Scrollable Tabs

  • Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate to the next/previous view, swipe left or right.

 

Fixed Tabs

  • Fixed tabs display all items concurrently.

  • To navigate to a different view, touch the tab, or swipe left or right.

  • Fixed tabs are displayed with equal width, based on the width of the widest tab label. If there is insufficient room to display all tabs, the tab labels themselves will be scrollable.

  • For this reason, fixed tabs are best suited for displaying 3 or fewer tabs.

 

 

Anatomy of a Tabbed Application

  • Sometimes, we want to wrap multiple views in a single window and navigate through them with a Tab Container. This can be done in Android using TabHost control.

  • There are two ways to use a TabHost application in Android:

  • Using the TabHost to navigate through multiple views within the same activity.

  • Using the TabHost to navigate through Actual multiple Activities using intents.

  • An activity with a TabHost may look like this:

Description: Tabs1.jpg

The Activity consists of:

  • A TabHost: The root element of the layout.

  • The TabHost wraps a TabWidget which represents the tab bar.

  • The TabHost wraps a FrameLayout which wraps the contents of each tab.

  • There are some rules that we must stick to when using a Tabbed activity:

  • If the activity is of type TabActivity [optional], then the TabHost must have the id @android:id/tabhost.

  • The TabWidget must have the id @android:id/tabs.

  • The FrameLayout must have the id @android:id/tabcontent.

 

Application Example

  • We will now make an application with tabs.

  • The first tab will basically have start and stop button and it will function as a stop watch.

  • The result will be displayed in the TextView in second tab.

  • The third tab is used to add a new tab to our activity.

  • Below is the XML code of the file named tabhost.xml

 

tabhost.xml

 

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

 

<TabHost

android:id="@+id/tabhost"

android:layout_width="match_parent"

android:layout_height="match_parent">

 

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

 

<TabWidget

android:id="@android:id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content">

</TabWidget>

 

<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:orientation="vertical">

 

<Button

android:id="@+id/bStart"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Start" />

 

<Button

android:id="@+id/bStop"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Stop" />

</LinearLayout>

 

<LinearLayout

android:id="@+id/tab2"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

 

<TextView

android:id="@+id/tabTV"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="Text view"/>

</LinearLayout>

 

<LinearLayout

android:id="@+id/tab3"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<Button

android:id="@+id/bAddTab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Add a Tab" />

</LinearLayout>

</FrameLayout>

</LinearLayout>

</TabHost>

 

</LinearLayout>

  • Below is the java code of the File named Tabs.java

 

Tabs.java

 

package com.example.helloandroid;

 

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.TabHost;

import android.widget.TextView;

import android.widget.TabHost.TabSpec;

 

public class Tabs extends Activity implements OnClickListener {

TabHost tabHost;

TextView results;

long start = 0, stop, result;

int count = 3;

TextView showresults;

 

@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.tabhost);

tabHost = (TabHost) findViewById(R.id.tabhost);

Button newTab = (Button) findViewById(R.id.bAddTab);

Button bstart = (Button) findViewById(R.id.bStart);

Button bstop = (Button) findViewById(R.id.bStop);

showresults = (TextView) findViewById(R.id.tabTV);

newTab.setOnClickListener(this);

bstart.setOnClickListener(this);

bstop.setOnClickListener(this);

tabHost.setup();

TabSpec ts = tabHost.newTabSpec("tag1");

ts.setContent(R.id.tab1);

ts.setIndicator("Tab 1");

tabHost.addTab(ts);

ts = tabHost.newTabSpec("tag2");

ts.setContent(R.id.tab2);

ts.setIndicator("Tab 2");

tabHost.addTab(ts);

ts = tabHost.newTabSpec("tag3");

ts.setContent(R.id.tab3);

ts.setIndicator("Tab 3");

tabHost.addTab(ts);

 

}

 

@Override

public void onClick(View arg0) {

// TODO Auto-generated method stub

switch (arg0.getId()) {

case R.id.bAddTab:

TabSpec newSpec = tabHost.newTabSpec("tag");

newSpec.setContent(new TabHost.TabContentFactory() {

 

@Override

public View createTabContent(String tag) {

// TODO Auto-generated method stub

TextView text = new TextView(Tabs.this);

text.setText("This is a new tab");

 

return (text);

}

});

newSpec.setIndicator("Tab " + (++count));

tabHost.addTab(newSpec);

break;

case R.id.bStart:

start = System.currentTimeMillis();

break;

case R.id.bStop:

if (start != 0) {

stop = System.currentTimeMillis();

result = stop - start;

showresults.setText("This is the time elapsed "

+ Long.toString(result));

start=0;

break;

}

}

 

}

}

 

 

 

 

 

 

  • We will now go through the code.

  • We will set the contentView to the layout we just created.

  • Then we make a Tabhost object which is container for a tabbed window view.

  • This object holds two children: a set of tab labels that the user clicks to select a specific tab, and a FrameLayout object that displays the contents of that page.

  • The individual elements are typically controlled using this container object, rather than setting values on the child elements themselves.

  • We then create a new tab using the TabSpec object.

  • We set the content of the tab using the ID ofour LinearLayout in our FrameLayout.

  • We also set the indicator which will be the name displayed for the tab.

  • In this way we create three tabs namely Tab1, Tab2 and Tab3.

  • After creating the tabs we add them to our activity using the add() method of the TabHost.

  • We also set the onClick() method for our respective buttons using the switch case.

  • If the Add New Tab button is clicked a new tab created dynamically.

  • Pay attention to how we have set the Content for this new tab.

  • In this tab we have a TextView which displays a message showing that it is a new tab.

  • The Stop and Start Buttons function as a stopwatch which help us calculate the time elapsed when the start and stop button are pressed.

  • This result is printed in the TextView of the second tab which is in milliseconds.. The result is calculated only if the Start button is pressed before pressing the Stop button.

  • Below are the Screenshots of the application.

 

Pr.Pg border                                              Next Pg