6

I have an application that targets the 1.5 framework and uses the default light theme. When using a tab widget with this theme, the tab images are barely visible, and the tab captions are quite impossible to discern, except for the currently active tab.

In the default dark theme these tabs come through quite clearly, but this is not a solution I'd be very happy with. Is there a simple setting I can set, that sets up the tab widget for better visibility in light themes, or would I have to tamper with images and text styles manually?

David Hedlund
  • 128,221
  • 31
  • 203
  • 222

4 Answers4

10

it's not pretty, but you can try this in your tab activity.

// light theme support
final TabHost tabHost = getTabHost();
tabHost.setBackgroundColor(Color.WHITE);
tabHost.getTabWidget().setBackgroundColor(Color.BLACK);

// hack to set font size
LinearLayout ll = (LinearLayout) tabHost.getChildAt(0);
TabWidget tw = (TabWidget) ll.getChildAt(0);

// first tab
RelativeLayout rllf = (RelativeLayout) tw.getChildAt(0);
lf = (TextView) rllf.getChildAt(1);
lf.setTextSize(21);
lf.setPadding(0, 0, 0, 6);

// second tab
RelativeLayout rlrf = (RelativeLayout) tw.getChildAt(1);
rf = (TextView) rlrf.getChildAt(1);
rf.setTextSize(21);
rf.setPadding(0, 0, 0, 6);

/res/values/colors.xml should have 

<resources>
    <drawable name="black">#ff000000</drawable>
    <drawable name="white">#ffffffff</drawable>
</resources>

AndroidManiest.xml should have

<application android:theme="@android:style/Theme.Light">

if you want to do something crazier, try http://ezmobile.wordpress.com/2009/02/02/customized-android-tabs/

yanokwa
  • 1,408
  • 1
  • 12
  • 23
  • 1
    yes, this will have to do. i want to maintain a look that is as native as possible, so i won't venture into custom graphics. essentially, setting the tabwidget's background color to black was all that it took to make the tabs visible. the rest is white-ish from the application's main theme already, so i didn't make any further configurations. As for resources/colors; how come you're defining your own colors here? Isn't that the same black as in `android.graphics.Color.BLACK`? or do you just not want to import that entire library, for just two colors? – David Hedlund Jan 05 '10 at 10:48
  • i have more colors in my colors file -- i wanted to make the post cleaner :) – yanokwa Jan 05 '10 at 15:58
  • I have tried this solution but in eclipse the GlobalConstants are underlined in red. the error reads., "GlobalConstants cannot be resolved". Do I need to declare GlobalConstants or import it? – Kevin Bradshaw Aug 17 '10 at 13:06
  • GlobalConstants is something you create. i'll update the snippet to make this clearer. – yanokwa Aug 19 '10 at 13:39
  • @yanokwa really helpful to me...!! – Paresh Mayani Sep 13 '10 at 10:33
  • +1 Ugly indeed... but it totally worked. And just about everything I've done using TabHosts and TabWidgets ends up being ugly. They just aren't very mature APIs. – Kenny Wyland Feb 18 '11 at 19:56
2

This is a bug; can you report it in the the issue tracker?

AFAIK, your workaround of customizing the text and image styles sounds right.

It's also noteworthy that the tab widget in 2.0 doesn't seem to have a light style.

Roman Nurik
  • 29,665
  • 7
  • 84
  • 82
2

By using the hierarchyviewer tool I found the android id for the textview in the tab. A better way to change the text properties (including color) is by doing the following...

TabWidget tw = (TabWidget)tabHost.findViewById(android.R.id.tabs);
View tabView = tw.getChildTabViewAt(0);
TextView tv = (TextView)tabView.findViewById(android.R.id.title);
tv.setTextSize(20);
Brady Kroupa
  • 241
  • 3
  • 4
2

A very simple way to solve the color/contrast problem in the layout:

<TabWidget
   android:id="@android:id/tabs"
   android:background="#FF000000"
   android:padding="2dp"

This sets the background of the TabWidget to black and adds a little padding so you have contrast with the tabs against the black background. Its not perfect, but works in 1.5, 2.2, light and dark theme.

Lucy
  • 684
  • 1
  • 8
  • 15