Android TabLayout with Activity

Posted: 28/03/2013 in Android

In this tutorial, we will demonstrates the use of TabLayout to render 4 tabs – “Android”, “Windows”, “Apple” and “BlackBerry”, each tab contains a textview to display a simple message.

P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

1. Tab Images

Put 4 tab images in “res/drawable” folder. The tab images used in this tutorial are not follow the Android icon guideline, sorry, i’m just not good at design :).

directory structure

2. Tab Images in XML

Create 4 XM files to tell which image to use for each tab, and put it into the same “res/drawable” folder.

File : icon_android_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, you should use bg with grey -->
    <item android:drawable="@drawable/ic_tab_android"
          android:state_selected="true" />
    <!-- When not selected, you should use bg with white -->
    <item android:drawable="@drawable/ic_tab_android" />
</selector>

File : icon_apple_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/ic_tab_apple"
          android:state_selected="true" />
    <!-- When not selected -->
    <item android:drawable="@drawable/ic_tab_apple" />
</selector>

File : icon_blackberry_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/ic_tab_blackberry"
          android:state_selected="true" />
    <!-- When not selected -->
    <item android:drawable="@drawable/ic_tab_blackberry" />
</selector>

File : icon_windows_config.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/ic_tab_windows"
          android:state_selected="true" />
    <!-- When not selected -->
    <item android:drawable="@drawable/ic_tab_windows" />
</selector>

3. Tab Activity

Create 4 activitiy classes, and tell which activity to use for when tab is clicked. All 4 classes are doing the same thing, display a textview component.

File : AndroidActivity.java

package com.mkyong.android;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class AndroidActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        TextView textview = new TextView(this);
        textview.setText("This is Android tab");
        setContentView(textview);
    }
}

File : AppleActivity.java

package com.mkyong.android;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class AppleActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        TextView textview = new TextView(this);
        textview.setText("This is Apple tab");
        setContentView(textview);
    }
}

File : BlackBerryActivity.java

package com.mkyong.android;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class BlackBerryActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        TextView textview = new TextView(this);
        textview.setText("This is BlackBerry tab");
        setContentView(textview);
    }
}

File : WindowsActivity.java

package com.mkyong.android;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
 
public class WindowsActivity extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        TextView textview = new TextView(this);
        textview.setText("This is Windows mobile tab");
        setContentView(textview);
    }
}

4. Main Activity

Create an entry point, link above 4 tab activity classes with TabHostTabSpec and etc.

package com.mkyong.android;
 
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
 
public class MainActivity extends TabActivity {
 
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
 
		Resources ressources = getResources(); 
		TabHost tabHost = getTabHost(); 
 
		// Android tab
		Intent intentAndroid = new Intent().setClass(this, AndroidActivity.class);
		TabSpec tabSpecAndroid = tabHost
		  .newTabSpec("Android")
		  .setIndicator("", ressources.getDrawable(R.drawable.icon_android_config))
		  .setContent(intentAndroid);
 
		// Apple tab
		Intent intentApple = new Intent().setClass(this, AppleActivity.class);
		TabSpec tabSpecApple = tabHost
		  .newTabSpec("Apple")
		  .setIndicator("", ressources.getDrawable(R.drawable.icon_apple_config))
		  .setContent(intentApple);
 
		// Windows tab
		Intent intentWindows = new Intent().setClass(this, WindowsActivity.class);
		TabSpec tabSpecWindows = tabHost
		  .newTabSpec("Windows")
		  .setIndicator("", ressources.getDrawable(R.drawable.icon_windows_config))
		  .setContent(intentWindows);
 
		// Blackberry tab
		Intent intentBerry = new Intent().setClass(this, BlackBerryActivity.class);
		TabSpec tabSpecBerry = tabHost
		  .newTabSpec("Berry")
		  .setIndicator("", ressources.getDrawable(R.drawable.icon_blackberry_config))
		  .setContent(intentBerry);
 
		// add all tabs 
		tabHost.addTab(tabSpecAndroid);
		tabHost.addTab(tabSpecApple);
		tabHost.addTab(tabSpecWindows);
		tabHost.addTab(tabSpecBerry);
 
		//set Windows tab as default (zero based)
		tabHost.setCurrentTab(2);
	}
 
}

5. Android Layout file

File : res/layout/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">
    <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>

6. Android Manifest

At last, put everything in “AndroidManifest.xml“, defined 4 tab activity classes and set the “MainActivity” as entry point.

File : AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mkyong.android"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk android:minSdkVersion="10" />
 
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
 
        <activity android:name=".AndroidActivity" />
        <activity android:name=".WindowsActivity" />
        <activity android:name=".AppleActivity" />
        <activity android:name=".BlackBerryActivity" />
 
        <activity
            android:label="@string/app_name"
            android:name=".MainActivity"
            android:theme="@android:style/Theme.NoTitleBar" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

7. Demo

By default, Windows tab is selected.

android tab layout example

Click on the Android tab.

android tab layout example

Download Source Code

Download it – Android-TabLayout-Example.zip (23 KB)
Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s