Android World: Android Tab Layout

As we know Tab-Activity is now depreciated in Android, but some time we use it for create simple Tab pages in our application. So today I am going to share tutorial for Tab Host Activity in android. It is a simple tab activity demo, group child activity and pager tab example I will share soon. Hope my blog help you. Please follow step by step my blog for create simple Tab Layout-

1)Create a new project, name TabHostDemo.

2)Create an TabHostActivity and extend it to TabActivity.

3)Create 3 other activity name-Homeactivity, AboutActivity, ContactActivity.

4)Create layout activity_tab_host.xml .

5)Create another 3 layout for Home, About, Contact Activity, name activity_home, activity_about, activity_contact.

6)Do optional activity for change tab images on selection.Create ic_tab_home, ic_tab_about, ic_tab_contact.

Note-this step is not must, you can direct put your images in your TabHostActivity-

// Create an Intent to launch an Activity for the tab (to be reused)

intent = new Intent().setClass(this, HomeActivity.class);
spec = tabHost.newTabSpec("home")
.setIndicator("HOME", res.getDrawable(R.drawable.home))//set here
.setContent(intent);
tabHost.addTab(spec);
7)Add images - home.png, about.png, contact.png in drawable download below images-

Read more: http://www.androidhub4you.com/2013/04/android-tabactivity-tab-layout-demo-tab.html#ixzz3II8r9MFe

8)Add activity in manifest.xml
9)Run your project and enjoy :)

My Code:

1)TabHostActivity.java-

package com.manish.tabdemo;

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

public class TabHostActivity extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_host);

Resources res = getResources(); // Resource object to get Drawables
TabHost tabHost = getTabHost(); // The activity TabHost
TabHost.TabSpec spec; // Reusable TabSpec for each tab
Intent intent; // Reusable Intent for each tab

// Create an Intent to launch an Activity for the tab (to be reused)
intent = new Intent().setClass(this, HomeActivity.class);
spec = tabHost.newTabSpec("home")
.setIndicator("HOME", res.getDrawable(R.drawable.ic_tab_home))
.setContent(intent);
tabHost.addTab(spec);

// Do the same for the other tabs

intent = new Intent().setClass(this, AboutActivity.class);
spec = tabHost.newTabSpec("about")
.setIndicator("ABOUT", res.getDrawable(R.drawable.ic_tab_about))
.setContent(intent);
tabHost.addTab(spec);

intent = new Intent().setClass(this, ContactActivity.class);
spec = tabHost
.newTabSpec("contact")
.setIndicator("CONTACT",
res.getDrawable(R.drawable.ic_tab_contact))
.setContent(intent);
tabHost.addTab(spec);

//set tab which one you want open first time 0 or 1 or 2
tabHost.setCurrentTab(0);

}

}

2)HomeActivity.java-

package com.manish.tabdemo;

import android.app.Activity;
import android.os.Bundle;

public class HomeActivity extends Activity{
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
}
}

3)AboutActivity.java-

package com.manish.tabdemo;

import android.app.Activity;
import android.os.Bundle;

public class AboutActivity extends Activity{
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_about);
}
}

4)ContactActivity.java-

package com.manish.tabdemo;

import android.app.Activity;
import android.os.Bundle;

public class ContactActivity extends Activity{
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_contact);
}
}

5)activity_tab_host.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">

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"/>

<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_marginBottom="-4dp"/>

</LinearLayout>

</TabHost>

6)activity_home.xml-

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

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

android:layout_width="fill_parent"

android:background="#0099CC"

android:layout_height="fill_parent" >

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:text="Home Tab"

android:textSize="35sp"

android:textColor="#ffffff" />

</RelativeLayout>

7)activity_about.xml

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

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

android:layout_width="fill_parent"

android:background="#808080"

android:layout_height="fill_parent" >

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:text="About Tab"

android:textSize="35sp"

android:textColor="#ffffff" />

</RelativeLayout>

8)activity_contact.xml-

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

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

android:layout_width="fill_parent"

android:background="#ffdddd"

android:layout_height="fill_parent" >

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

android:layout_centerVertical="true"

android:text="Contact Tab"

android:textSize="35sp"

android:textColor="#000000" />

</RelativeLayout>

now put selector for tabs images in drawable folder-

9)ic_tab_home.xml-

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

<item android:drawable="@drawable/home"

android:state_selected="true" />

</selector>

10)ic_tab_about.xml-

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

<item android:drawable="@drawable/about"

android:state_selected="true" />

</selector>

11)ic_tab_contact.xml-

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

<item android:drawable="@drawable/contact"

android:state_selected="true" />

</selector>

12)AndroidManifest.xml-

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

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

package="com.manish.tabdemo"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="16" />

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="com.manish.tabdemo.TabHostActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

Android World

Saturday, 1 November 2014

Android Tab Layout

No comments:

Post a Comment