Add Image or style to each tab

Question

i have app with many tabs, i want to add image or style to each tab , how please?

th = (TabHost) findViewById(R.id.tabhost_template_two_tabs);
th.setup();
//         


        

Answer 1

You can set the image to the tab as below :

tabHost.newTabSpec("All").setIndicator(null,res.getDrawable(R.drawable.icon)).setContent(R.id.tab_template_two_tabs_all);

Or to set the style try this:

 tabHost.newTabSpec("All").setIndicator(null,res.getDrawable(R.style.myStyle)).setContent(R.id.tab_template_two_tabs_all);

Answer 2

Try this : Call this from your OnCreate() method:

 setTabs();

Then put this code

 private void setTabs()
{
    addTab(R.drawable.ic_icon1, Activity.class, "All");
    addTab(R.drawable.ic_icon2, Activity1.class, "Favorite");
}

private void addTab(int drawableId, Class<?> c, String labelId)
{
    final 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);

}

Then Create tab_indicator.xml in drawable folder and put this code.There you can set different colours when it is pressed,focused etc...

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
    android:state_pressed="false" android:drawable="@drawable/tab_unselected" />
<item android:state_focused="false" android:state_selected="true"
    android:state_pressed="false" android:drawable="@drawable/tab_selected" />

<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false"
    android:state_pressed="false" android:drawable="@drawable/tab_focus" />
<item android:state_focused="true" android:state_selected="true"
    android:state_pressed="false" android:drawable="@drawable/tab_focus" />

<!-- Pressed -->
<item android:state_selected="true" android:state_pressed="true"
    android:drawable="@drawable/tab_focus" />
<item android:state_pressed="true" android:drawable="@drawable/tab_press" />
  </selector>

In layouts create tab_indicator.xml and put this code:

<?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"
/>    
     </RelativeLayout>