Question

I have 4 tabs. Each tab is represented by a button. Those buttons are used to select the currently displayed tab. Each button has an icon and text.

I’d like to highlight the currently selected tab by changing background color and text label color of the corresponding button. I’d like to do it using Theme and Resource Editor.

I created theme and specified unselected, selected and pressed styles for UIID “Tab”. My tabs look great in Sun WTK! Fine! But I found that on a real phone the tabs always look like unselected. I tried on Nokia 5800 XPressMusic and C7. Why the difference?

After some experiments I found out the reason – the buttons may be only in 2 states: unselected and pressed. They never be in the selected state. On the emulator when I move to a button using navi keys, it becomes selected.

So, what should I do to mark the current tab?

Answer 1

I implemented what I needed. Thanks to Shai and his example.

I didn’t use theme properties and made all customizations in the code. I did so because I didn’t catch how setting unique UIID can help me, since the problem is not in the identifying the UIID for which the props have to be changed, but in identifying the button’s style to be changed.

Below some important notes of my solution.

1. Call addActionListener for the buttons AFTER they have added to the tabs.
2. When any tab button is pressed, update UNSELECTED styles of the tab buttons. Also you can change their icons.
3. Call form’s repaint() after step 2.