Tab Control

15

This is a sample activity which shows How to create Tab Layout at bottom of the screen in android.

Underlying Algorithm:

Basic description of algorithm in step by step form:
1.) Create a project TabSample.
2.) Put the following code snippet in 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">
    <RelativeLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="3dp">
       <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1" />
       <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom = "@android:id/tabcontent"
            />
    </RelativeLayout>
</TabHost>

3.) To create tab layout at bottom of the screen use the following in TabWidget in main.xml:

android:layout_alignBottom = "@android:id/tabcontent"

4.) For tab content create two more activities first OptionsActivity.java and second EditActivity.java.
5.) OptionsActivity.java will look like following:

package app.tabsample;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.TextView;

public class OptionsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView t = new TextView(this);
        t.setText("text");
        setContentView(t);
    }
}

6.) EditActivity.java will look like following:

package app.tabsample;

import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.AdapterView.OnItemClickListener;

public class EditActivity extends ListActivity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setListAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, mListContent));   
    }
    private static String[] mListContent={"Item 1", "Item 2", "Item 3","Item 1", "Item 2", "Item 3","Item 1", "Item 2", "Item 3","Item 1", "Item 2", "Item 3"};
}

7.) You must need to register these activities into your manifest file.Your manifest file will look like below:

<application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:label="@string/app_name" android:name=".TabSample">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".OptionsActivity"></activity>
        <activity android:name=".EditActivity"></activity>
 </application>

8.) Run the Application.

Steps to Create:

1.) Open Eclipse. Use the New Project Wizard and select Android Project Give the respective project name i.e. TabSample. Enter following information:
Project name: TabSample
Build Target: Google APIs
Application name: TabSample
Package name: app.TabSample
Create Activity: TabSample

On Clicking Finish TabSample code structure is generated with the necessary Android Packages being imported along with TabSample.java. TabSample class will look like following:

package app.tabsample;
import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.content.Intent;

public class TabSample extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        TabHost tabHost = getTabHost();       
      
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("TEXT").setContent(new Intent(this, OptionsActivity.class)));
      
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("LIST").setContent(new Intent(this, EditActivity.class)));
        tabHost.setCurrentTab(1); 
    }
}

Output –The final output:

Did you enjoy this article?
Share
the
Love
Get Free Updates
  • http://www.edumobile.org/android/android-beginner-tutorials/tab-control/ KevinMN

    When I use the above code I get two errors. 1 is with setListAdapter . The second one is with getTabHost(); Both of these errors suggest Creating a Method named getTabHost and one named setListAdapter. New android programmer, can you help? Thanks!

  • http://edumobile.org Sushant

    You must need to extend your activity with ListActivity and TabActivity instead of Activity to fix setListAdapter and getTabHost() errors respectivily as shown in the above code. If you will use exact same code there is no chance of any error. If you have still got some error please share your code here.

  • Smith

    text and list button does not appear when the run the above code

  • http://edumobile.org Sushant

    Those are Tabs and not buttons… Can you share your code?

  • Sunny

    Hi guys,

    I need your help regarding add 6 tabs on screen with 2 rows, i meant 3 tabs should display on 1st row and other 3 tabs display in 2nd row , Currently when i added 6 tabs, all tabs display in one row that seem awkward….

    Thanks in advance

  • Joshua

    here is my EditActivity.Java

    package com.TabSample.com;

    import android.app.ListActivity;
    import android.content.Intent;
    import android.os.Bundle;
    import android.view.KeyEvent;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.ListView;
    import android.widget.AdapterView.OnItemClickListener;

    public class EditActivity extends ListActivity {
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setListAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1, mListContent));
    }
    private static String[] mListContent={“Item 1″, “Item 2″, “Item 3″,”Item 1″, “Item 2″, “Item 3″,”Item 1″, “Item 2″, “Item 3″,”Item 1″, “Item 2″, “Item 3″};
    }

    here is OptionsActivity.Java

    package com.TabSample.com;

    import android.app.Activity;
    import android.content.Intent;
    import android.os.Bundle;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.View.OnTouchListener;
    import android.widget.Button;
    import android.widget.TextView;

    public class OptionsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    TextView t = new TextView(this);
    t.setText(“text”);
    setContentView(t);
    }
    }

    here is my TabSampleActivity.Java

    package com.TabSample.com;

    import android.app.TabActivity;
    import android.os.Bundle;
    import android.widget.TabHost;
    import android.content.Intent;

    public class TabSampleActivity extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    TabHost tabHost = getTabHost();
    tabHost.addTab(tabHost.newTabSpec(“tab1″).setIndicator(“TEXT”).setContent(new Intent(this, OptionsActivity.class)));

    tabHost.addTab(tabHost.newTabSpec(“tab2″).setIndicator(“LIST”).setContent(new Intent(this, EditActivity.class)));
    tabHost.setCurrentTab(1);
    }
    }

    here is my main

    As you can see it’s just copy/paste, but I am not getting any display on android emulator

    The application TabSample(process com.TabSample.com) has stopped unexpectedly. Please try again.

    Any reason why ?
    I am using android 2.1 API level 7. I am not sure where the issue could be?? any ideas?
    Thanks

  • http://edumobile.org Sushant

    Joshua,

    There could be two possibilities for the error you r getting.

    1.) You have not defined any “TabHost” in your main.xml file. which causes instance not found exception. Use the main.xml code as given above in the post.

    or

    2.) you have not register OptionActivity and EditActivity into your manifest file. Write below two lines into your manifest and try again.


  • Joshua

    Yes that took care of it, thanks Sushant :)

  • Joshua

    yes indeed that took care of it, Thanks Sushant :)

  • http://edumobile.org Sushant

    Sunny,

    You can not have multiple row tab control in android. If you want to do so you have to either create custom tab control or you will have to use options menu. Tab controls are meant for that they can scroll horizontally in one row only. there is nothing awkward.

    Thanks.

  • mario

    awesome! thank u so much, BEST TUTORIAL for tabs ON THE WEB!

  • Dharmesh Garg

    Hi,

    I need to have tabs throughout my application.

    Initially there are only three tabs and 3 related activity ,need to carry these tabs when i move from any of these activity to other activities apart from these 3.

  • andrew

    The tab works fine, but does not see anything in the textview activity…any clue? thanks…

  • Nirav

    Hi,

    I am creating a tab control in my application where I need to create upto 6 tabs, which do not fit in screen.
    So I need it to be scrollable so that I can scroll tabs and select any tab I want.

    So any idea how it can be done?

    Thanks…..

  • NK

    Hi

    I am creating a tab control in my application where it may contain upto 6 tabs and wont fit in the screen.

    So I want it to be scrollable so that I can scroll and select any tab I want.

    Any idea how it can be done?

    Thanks….

Proudly designed by Theme Junkie.