Android Project

Android Project
Android Project

Monday, September 19, 2011

Customize the tab in Android

I had attached two tab examples






First we are going to see about First example


CustomTabActivity.java

package com.customs.tabs;

import com.customs.tabs.R;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

public class CustomTabActivity extends TabActivity{
private TabHost tabHost;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
setTabs();
}

private void setTabs() {
tabHost = getTabHost();

addTab(R.string.tab_1, R.drawable.info);
addTab(R.string.tab_2, R.drawable.info);
addTab(R.string.tab_3, R.drawable.info);
}

private void addTab(int labelId, int drawableId) {
Intent intent = new Intent(this, TabAct.class);
TabHost.TabSpec spec = tabHost.newTabSpec("tab" + labelId);

View tabIndicator = LayoutInflater.from(this).inflate(R.layout.indicator, getTabWidget(), false);

TextView title = (TextView) tabIndicator.findViewById(R.id.title);
title.setText(labelId);
ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
icon.setImageResource(drawableId);

spec.setIndicator(tabIndicator);
spec.setContent(intent);
tabHost.addTab(spec);

}
}


The class extends TabActivity and the header of the tab is provided in seperate activity which is called on the addTab method. The selection / unselection / active colors are mentioned in the indicator xml file in the layout



indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="64dip"
android:layout_weight="1"
android:orientation="vertical"
android:background="@drawable/indicator"
android:padding="5dp">

<ImageView android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
/>

<TextView android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
style="?android:attr/tabWidgetStyle"
/>
</RelativeLayout>


Now we can see the Second example of Tab

Here we are not going to extend the tabactivity, instead of that we can set the tab headers through setting background images or colors using xml and without using xml


CustomTabs.java

package com.customized.tabs;

import com.customized.tabs.R;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;
import android.widget.TabHost.TabContentFactory;
import android.widget.TabHost.TabSpec;

public class CustomTabs extends Activity {

private TabHost mTabHost;
private TextView mTabLayout;

private void setupTabHost() {
mTabHost = (TabHost) findViewById(android.R.id.tabhost);
mTabHost.setup();
mTabLayout = (TextView) findViewById(R.id.taber);
mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {

@Override
public void onTabChanged(String tabId) {
mTabHost.getTabWidget().getChildAt(0)
.setBackgroundResource(R.drawable.m2);
if ("Tab 1".equals(tabId)) {
mTabHost.getTabWidget().getChildAt(0)
.setBackgroundResource(R.drawable.m1);
mTabLayout.setText("This is Tab 1");
} else if("Tab 2".equals(tabId)) {
mTabLayout.setText("This is Tab 2");
} else {
mTabLayout.setText("This is Tab 3");
}
}
});
}

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// construct the tabhost
setContentView(R.layout.main);

setupTabHost();

//mTabHost.getTabWidget().setDividerDrawable(R.drawable.divider);

setupTab(new TextView(this), "Tab 1");
setupTab(new TextView(this), "Tab 2");
setupTab(new TextView(this), "Tab 3");
}

private void setupTab(final View view, final String tag) {
View tabview = createTabView(mTabHost.getContext(), tag);

TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview).setContent(new TabContentFactory() {
public View createTabContent(String tag) {return view;}
});
mTabHost.addTab(setContent);
if ("Tab 1".equals(tag))
mTabHost.getTabWidget().getChildAt(0).setBackgroundResource(
R.drawable.m1);


}

private static View createTabView(final Context context, final String text) {
View view = LayoutInflater.from(context).inflate(R.layout.bg, null);
TextView tv = (TextView) view.findViewById(R.id.tabsText);
tv.setText(text);
return view;
}
}


In the above code i had commented the divider between each header, if you need means you can uncomment and i had set a different image for the Tab 1 alone, if you need you can set different images for each tab like that. Then in the bg_selector.xml i had commented the xml files for background color and i had set images for that

You can download the full source code


Download source


Have a good day.

1 comment:



  1. A very interesting article. The insights are really helpful and informative. Thanks for posting.



    Custom Phone Cases

    ReplyDelete

Sponser