How to change tab style in Android?

Question

I'd like to my Android tabs to look flat and simple like the ones in the official TWitter app. How can I override the default (light) theme and change the background images for the tabs using style/theme definitions?

Answer 1

You could adjust the tabs via code - here's an excerpt from my application, but you could also assign themes instead of the background image directly. (I haven't used a way via xml attributes yet, not sure if that's available as well somehow).

private void initTabs() {
    tabs = (TabHost) findViewById(R.id.tabhost);
    tabs.setup();
    tabs.setBackgroundResource(R.drawable.bg_midgray);

   TabHost.TabSpec spec;

   // Location info
   txtTabInfo = new TextView(this);
   txtTabInfo.setText("INFO");
   txtTabInfo.setPadding(0, 5, 0, 0);
   txtTabInfo.setTextSize(11);

   txtTabInfo.setBackgroundResource(R.drawable.bg_tab_left_active_right_inactive);
   txtTabInfo.setTextColor(Color.DKGRAY);
   txtTabInfo.setGravity(Gravity.CENTER_HORIZONTAL);
   txtTabInfo.setHeight(39);
   spec = tabs.newTabSpec("tabInfo");
   spec.setContent(R.id.tabInfo);
   spec.setIndicator(txtTabInfo);
   tabs.addTab(spec);
   ...
}

Answer 2

I used the following definition of my drawable, tab_background.xml

   <selector xmlns:android="http://schemas.android.com/apk/res/android" >
        <item android:state_selected="true" android:drawable="@drawable/tab_bg_selected" />
        <item android:drawable="@drawable/tab_bg_normal" /> 
   </selector>

Then iterate over the tabs to set them.

TabWidget tabWidget = tabHost.getTabWidget();

for(int i=0; i<tabWidget.getChildCount(); i++)
  tabWidget.getChildAt(i).setBackgroundResource(R.drawable.tab_background);

Answer 3

You could also do it via XML and create/define a global theme for all tabs in your app. There's more info on creating widget themes here: http://developer.android.com/guide/topics/ui/themes.html