Android tabwidget selected tab with border line at bottom

Question

i have a tabhost with the layout below.

https://drive.google.com/file/d/0B8nQOFcSOOboNkRFV091VVhzanc/view?usp=sharing (sorry im unable to post photo as im a new user)

I need to have the light blue color border for the selected tab. How i can have my selected tab with the light blue color border?

Please help me, thanks.

Answer 1

first, you need to make a 9 patch PNG with the border line at the bottom. The fastest way I know is through : http://romannurik.github.io/AndroidAssetStudio/nine-patches.html

Then you would make a selector xml on your drawable folder like this one tabs_backgrounds.xml :

<!-- Non focused states -->
<item android:drawable="@color/xlight_grey" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@color/white_back" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>

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

<!-- Pressed -->
<!-- Non focused states -->
<item android:drawable="@color/light_grey_color" android:state_focused="false" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@color/light_grey_color" android:state_focused="false" android:state_pressed="true" android:state_selected="true"/>

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

For me, I just used simple colors already defined in @color but that doesn't matter, you can use any picture from @drawable, or color from @color. Or in YOUR case, the 9 patch that you should make with the border on the bottom.

Then you need to define a style for tabs on your @style like this :

<style name="ThemeTabs" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionBarTabStyle">@style/ActionBarTabStyle.Myactionbar</item>
</style>
<style name="ActionBarTabStyle.Myactionbar"    parent="@android:style/Widget.Holo.Light.ActionBar.TabView">
    <item name="android:background">@drawable/tabs_backgrounds</item>
</style>

The on your manifest.xml, you just add this theme for the activity that has the tabs. Something like this :

<activity
....
android:theme="@style/ThemeTabs"
.... >
</activity>

I find that this is the best way to customize the tabs, you can choose a color or a drawable for each state (focused, clicked ...)

I hope this could help :)