Develop Reference

Android custom tab selection indicator with an image

I am relatively new to android, and I was really wondering if it is possible to customize tab selection as in the image( URL: http://i.stack.imgur.com/Hg5sT.png) . As you see in the image, there is a little triangular shape(an image) pointing downward when a tab is selected. If yes, how can this be achieved xml/java. I tried having a background image in the tab but it didn't appear as expected. I researched a lot online, but couldn't find how to do this.
Thank you for your patience and cooperation.
http://i.stack.imgur.com/Hg5sT.png

If you want to achieve this you must create two images for a single tab . And change them on selection
MainActivity
public class MainActivity extends TabActivity
{
TabHost tabHost;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabHost = getTabHost();
TabSpec spec;
Intent intent;
//Home Tab
View view1 = LayoutInflater.from(MainActivity.this).inflate(R.layout.home, null); // R.layout.home is the home.xml where you have entered two image
intent = new Intent(MainActivity.this, Firstclass.class);
spec = tabHost.newTabSpec("HOME").setIndicator(view1)
.setContent(intent);
tabHost.addTab(spec);
//Calendar Tab
View view2 = LayoutInflater.from(MainActivity.this).inflate(R.layout.calendar_tab, null);
intent = new Intent(MainActivity.this, Calendar.class);
spec = tabHost.newTabSpec("CALENDAR").setIndicator(view2)
.setContent(intent);
tabHost.addTab(spec);
Home.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/home_tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_centerInParent="true"
android:background="#drawable/selector1" />
</RelativeLayout>
#drawable/selector1
selector1.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/home_selected" android:state_selected="true"></item>
<item android:drawable="#drawable/home_unselect" android:state_selected="false"></item>
</selector>
on state_selected the image wil be home_selected but on unselected state the image will be replaced you have to create these two xml files for each tab. And your problem will be solved.

Open child activity in Tab host android

My Tab_Bar.class define define Tabs
How I can open child activity
I am using only one single Tab_bar.class for Tab Host
public class Tab_Bar extends TabActivity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tab);
setTabs() ;
}
void setTabs()
{
addTab("My Profile", R.drawable.home_normal, MyProfile.class);
addTab("Search", R.drawable.search_normal, JobSearch.class);
addTab("Saved Jobs", R.drawable.starred, Saved_jobs.class);
addTab("Job Alert", R.drawable.job_match, JobAlert.class);
}
private void addTab(String labelId, int drawableId, Class<?> c)
{
TabHost tabHost = getTabHost();
Intent intent = new Intent(this, c);
TabHost.TabSpec spec = tabHost.newTabSpec("tab" + labelId);
View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_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);
tabHost.setCurrentTab(1);
}
}
I am using these xml file
TabIndicator.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="55dip"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/tab_indicator"
android:padding="5dp">
<ImageView android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/icon"
/>
<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"
android:textSize="13sp"
/>
and Tab.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" />
</LinearLayout>
</TabHost>
I am using Tab_bar.class and these xml file for Tab host but i can't have any idea about open
tab host child activity .
I am new in android.
Please Help me, How i can open child activity
Any Help is Appreciated
And I am really sorry about my bad English

This is not eaxctly what you need, but might help. I used this setup to create dynamic tabs and then do different things with them.
protected void onCreate(Bundle savedInstanceState) {
...
final TabHost Tabs = (TabHost) findViewById(android.R.id.tabhost);
Tabs.setup();
int count;
for (count =0;count < 2;count++){
...
final int passedTabId = count;
NewTab.setContent(new TabHost.TabContentFactory()
{
public View createTabContent(String tag)
{
...
RelativeLayout layout = new RelativeLayout(getApplicationContext);
android.widget.RelativeLayout.LayoutParams params =
new RelativeLayout.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
layout.setLayoutParams(params);
layout.setId(some ID);
layout.setBackgroundResource(R.drawable.room_background);
TextView dynText = new TextView(getApplicationContext);
...
layout.addView(dynText);
return layout;
// You can set onClickListeners, etc here and then assign them some functions you need
// You can also create different layouts for every tab according to the passedTabId
}
});
Tabs.addTab(NewTab);
}
}
Thing is, you cant just simply set another activity to run in each tab. You need to set some functions you need to the objects you create in that tab, but the main activity remains the same. Good luck :)

Firstly try using Fragment for creating tabs.
Feature which you are using is deprecated by now.
I have posted complete post over Dynamically changing the fragments inside a fragment tab host?
Please check that out and let me know if you have any concern.
Simply fallow each of defined steps one by one.
CONCEPT
I am putting simple example for clarifying you that exactly how this fragment works.
Take simple scenario of your bed. Your bed consist of several things such as pillow, bed sheet etc.
Now consider a case that your bed sheet is dirty. So what you will do by now. You will simply replace that sheet with a new one and then you will have a tight sleep :)
Similarly when you need to change your UI... then this fragment is replaced with a new one.
That's it. Now you are good to go with my post.
Thanks!

How can i change the background color for tabs in android?

i have working with tabs. i want to change the background color or theme for tab. when i click on the tab appears in default color as grey but i want to display that tab in custom color.
here my code:
<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"
android:orientation="vertical"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-30dp"
android:background="#FF0000"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</FrameLayout>
</LinearLayout>
</TabHost>
class file is
public class AndroidtabActivity extends TabActivity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// View title = getWindow().findViewById(android.R.id.title);
// View titleBar = (View) title.getParent();
// titleBar.setBackgroundResource(R.drawable.top_bar2);
Resources res = getResources();
TabHost tabHost = getTabHost();
//tabHost = (TabHost) findViewById(R.id.tabhost);
tabHost.setup();
//tabHost.setBackgroundResource(R.drawable.pink);
TabHost.TabSpec spec;
//tabHost.getTabWidget().setDividerDrawable(R.drawable.top_bar);
Intent in;
in = new Intent().setClass(this, MainActivity.class);
spec=tabHost.newTabSpec("calc").setIndicator("calculate").setContent(in);
tabHost.addTab(spec);
in = new Intent().setClass(this, TutorialZoomActivity1.class);
spec=tabHost.newTabSpec("help").setIndicator("help").setContent(in);
tabHost.addTab(spec);
tabHost.setCurrentTab(2);
// spec1.setIndicator("Tab 1",getResources().getDrawable(R.drawable.flash));
}
}
please tell me how can i change the background color for tabs.

Maybe you should create your custom tab.
Let say.. create another custom_tab.xml (linearlayout and textview)
in the linearlayout, set android:background to another xml file in the drawable (#drawable/tab_selector)
Create new xml file in the drawable just mention above. ex. tab_selector.xml. in this file, you can set state (focused, pressed, selected etc) good luck

You can change tab background color by
for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
tabHost.getTabWidget().getChildAt(i).
setBackgroundResource(R.drawable.hans_layout_nblue);
}

Customized Tabs/Views - TabHost or ActivityGroup?

I am building a tabbed application. Things work wonderfully with TabHost. Unfortunately, my team lead does not like the look of the tabs. He doesn't like the tiny icon and the gaps between the tabs. So, I either need to modify TabHost or use an ActivityGroup.
My first attempt was at changing TabHost.
Here is the drawable for one of my tabs:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/ic_tab_timeline_grey"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/ic_tab_timeline_white" />
<!-- This is a state-list drawable, which you will apply as the tab image. When the tab state changes, the tab icon will automatically switch between the images defined here. -->
</selector>
I initialize the tab in my main activity:
// Initialize a TabSpec for each tab and add it to the TabHost
intent = new Intent().setClass(this, TimelineActivity.class);
spec = tabHost.newTabSpec("timeline") .setIndicator("",
res.getDrawable(R.drawable.ic_tab_timeline))
.setContent(intent);
tabHost.addTab(spec);
(Note that I set the Indicator to blanks.)
Then, I set the background image:
TabWidget tw = getTabWidget();
//changeTabWidgetStyle(tw);
View tempView = tabHost.getTabWidget().getChildAt(0);
tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.timeline_on));
This successfully sets the background to my desired image. However, my tab still has the tiny icon, which overlays my background image. How can I get rid of the icon? I tried setting the Drawable to null when I initialize the tab, but this causes my app to crash.
Even if I can get this to work, it looks like I will still have spaces between the tabs. How can I get rid of those?
If this doesn't work, I may have to go with an ActivityGroup. I would rather not, though, because that seems more complicated.
I'm using this example: android: using ActivityGroup to embed activities
LocalActivityManager mgr = getLocalActivityManager();
Intent i = new Intent(this, SomeActivity.class);
Window w = mgr.startActivity("unique_per_activity_string", i);
View wd = w != null ? w.getDecorView() : null;
if(wd != null) {
mSomeContainer.addView(wd);
}
I can get the "tabs" to change and inflate layouts, but I can't add the local activity. I'm not sure what sort of "container" to add the view to. What should my xml layout look like?

Here is the method i used to successfully successfully create completely custom looking tabs on a recent project.
The idea is to use a hidden TabWidget in your layout and control it with a customized LinearLayout containing Buttons. This way, you can more easily customize the buttons to look however you'd like. You'll control the actual TabWidget in your Activity within each button's OnClick.
Create your layout with both the TabWidget and the Buttons:
<?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:gravity="bottom">
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:visibility="gone" />
<LinearLayout android:id="#+id/tabbar"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:id="#+id/firstButton"
android:layout_alignParentTop="true" android:background="#drawable/btn_first_on"
android:layout_width="100dp" android:layout_height="43dp"
android:clickable="true"></Button>
<Button android:id="#+id/secondButton"
android:layout_alignParentTop="true" android:background="#drawable/btn_second_off"
android:layout_height="43dp" android:layout_width="100dp"
android:clickable="true"></Button>
<Button android:id="#+id/thirdButton"
android:layout_alignParentTop="true" android:background="#drawable/btn_third_off"
android:layout_height="43dp" android:layout_width="100dp"
android:clickable="true"></Button>
<Button android:id="#+id/forthButton"
android:layout_alignParentTop="true" android:background="#drawable/btn_forth_off"
android:layout_height="43dp" android:layout_width="100dp"
android:clickable="true"></Button>
</LinearLayout>
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_below="#+id/tabbar" />
</RelativeLayout>
</TabHost>
Set up the onCreate of your activity to handle using the buttons for adjusting the tab views:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// tabs
firstButton = (Button) findViewById(R.id.firstButton);
secondButton = (Button) findViewById(R.id.secondButton);
thirdButton = (Button) findViewById(R.id.thirdButton);
forthButton = (Button) findViewById(R.id.forthButton);
Resources res = getResources(); // Resource object to get Drawables
final TabHost tabHost = getTabHost(); // The activity TabHost
TabHost.TabSpec spec; // Resusable TabSpec for each tab
Intent intent; // Reusable Intent for each tab
intent = new Intent().setClass(this, FirstGroupActivity.class);
spec = tabHost.newTabSpec("first").setIndicator("First").setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, SecondGroupActivity.class);
spec = tabHost.newTabSpec("second").setIndicator("Second").setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, ThirdGroupActivity.class);
spec = tabHost.newTabSpec("third").setIndicator("Third").setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, ForthActivity.class);
spec = tabHost.newTabSpec("forth").setIndicator("Forth").setContent(intent);
tabHost.addTab(spec);
tabHost.setCurrentTab(0);
firstButton.setOnClickListener(new OnClickListener() {
public void onClick(View v)
{
tabHost.setCurrentTab(0);
firstButton.setBackgroundResource(R.drawable.btn_first_on);
secondButton.setBackgroundResource(R.drawable.btn_second_off);
thirdButton.setBackgroundResource(R.drawable.btn_third_off);
forthButton.setBackgroundResource(R.drawable.btn_forth_off);
}
});
secondButton.setOnClickListener(new OnClickListener() {
public void onClick(View v)
{
tabHost.setCurrentTab(1);
firstButton.setBackgroundResource(R.drawable.btn_first_off);
secondButton.setBackgroundResource(R.drawable.btn_second_on);
thirdButton.setBackgroundResource(R.drawable.btn_third_off);
forthButton.setBackgroundResource(R.drawable.btn_forth_off);
}
});
thirdButton.setOnClickListener(new OnClickListener() {
public void onClick(View v)
{
tabHost.setCurrentTab(3);
firstButton.setBackgroundResource(R.drawable.btn_first_off);
secondButton.setBackgroundResource(R.drawable.btn_second_off);
thirdButton.setBackgroundResource(R.drawable.btn_third_on);
forthButton.setBackgroundResource(R.drawable.btn_forth_off);
}
});
forthButton.setOnClickListener(new OnClickListener() {
public void onClick(View v)
{
tabHost.setCurrentTab(4);
firstButton.setBackgroundResource(R.drawable.btn_first_off);
secondButton.setBackgroundResource(R.drawable.btn_second_off);
thirdButton.setBackgroundResource(R.drawable.btn_third_off);
forthButton.setBackgroundResource(R.drawable.btn_forth_on);
}
});
}
As you can see, I'm using drawables for the images of the buttons on and off. Using this technique, you're not limited to the options available when simply just trying to customize the look of the TabWidget's tabs and you can create a completely custom look to your tabs.
Also, as a rule of thumb, it's a bad idea to use an ActivityGroup in android tabs. That approach eats up a lot of system resources. A better approach and one that I've also implemented on this project is to keep track of the views through an array of views and then swap them out as needed.

Further to SBerg413's answer you can set the button images for your new tab buttons to transparent images. Then add an ImageView to display under the buttons (use RelativeLayout to get the ImageView to appear in the same space as the buttons) and simply switch the image displayed there depending on which button is pressed.
This way you can have tab buttons of different shapes and generally more freedom of design for the tab bar and use the buttons as a basic hit box for each tab button.

Why do I get an error while trying to set the content of a tabspec in android?

I have an android activity in which I'm using tabs.
public class UnitActivity extends TabActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.unit_view);
TabHost tabHost = getTabHost();
TabSpec spec;
spec = tabHost.newTabSpec("controls");
spec.setIndicator("Control");
spec.setContent(R.layout.unit_control);
tabHost.addTab(spec);
spec = tabHost.newTabSpec("data");
spec.setIndicator("Data");
spec.setContent(R.layout.unit_data);
tabHost.addTab(spec);
}
}
However when I run the program it crashes with the error:
"Could not create tab content because could not find view with id 2130903042". I don't understand what the problem is because R.layout.unit_data refers to a layout file in my resource directory (res/layout/unit_data.xml)
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableLayout
android:stretchColumns="*"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Spinner android:id="#+id/unit_num"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:prompt="#string/choose_unit"/>
<TableRow android:padding="2dp">
<TextView
android:gravity="right"
android:padding="5dp"
android:text="#string/Power"/>
<TextView android:id="#+id/unit_power"
android:layout_span="3"
android:gravity="center"
android:padding="5dp"
android:background="#android:color/white"
android:textColor="#android:color/black"
android:text="AUTO"/>
</TableRow>
...
</TableLayout>
</ScrollView>
as far as I can tell unit_data.xml is well formed and I've even referenced it successfully in another activity
class UnitData extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.unit_data);
Toast.makeText(this, "Hi from UnitData.onCreate", 5);
}
}
which does not give an error and renders the layout just fine.
What's going on? Why can't I reference this layout when creating a tab?

While Activity.setContentView takes an id of a Layout, TabSpec.setContent takes an id of a View. This means you need to pass an id that looks like R.id.something and not R.layout.something.
To solve your particular problem, give the top level view in your layout a view id:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/unit_data"> <!-- NOTE THE CHANGE -->
...
</ScrollView>
and update your source:
public class UnitActivity extends TabActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.unit_view);
TabHost tabHost = getTabHost();
TabSpec spec;
spec = tabHost.newTabSpec("controls");
spec.setIndicator("Control");
spec.setContent(R.id.unit_control); // NOTE THE CHANGE
tabHost.addTab(spec);
spec = tabHost.newTabSpec("data");
spec.setIndicator("Data");
spec.setContent(R.id.unit_data); // NOTE THE CHANGE
tabHost.addTab(spec);
}
}
For more information, see the tab examples in the ApiDemos:

If you have your tab layout in a different file, you have to inflate the XML.
spec = tabHost.newTabSpec("data");
spec.setIndicator("Data");
// Add the layout to your tab view
getLayoutInflater().inflate(R.layout.unit_data, tabHost.getTabContentView(), true);
spec.setContent(R.id.unit_data);
tabHost.addTab(spec);

You also have to use LayoutInflater after TabHost
LayoutInflater.from(this).inflate(R.layout.unit_data, tabHost.getTabContentView(), true);
I also got stuck with this and finally figure it out.