I'm trying to customize my ActionBar's tab indicator following this reference, however I'm getting the error:
Error retrieving parent for item: No resource found that matches the given name '#style/Widget.Holo.ActionBar.TabView'.
Minimum SDK is set to 14, target SDK = 18. Any ideas?
EDIT:
I already have the following styles which work:
<style name="sMain" parent="#android:style/Theme.Holo">
<item name="android:icon">#android:color/transparent</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarDivider">#null</item>
</style>
<style name="MyActionBar" parent="android:Widget.Holo.ActionBar">
<item name="android:actionBarDivider">#null</item>
</style>
You should be referencing
#android:style/Widget.Holo.ActionBar.TabView
Typo in the docs - they left off the android:.
This is what you need to do:
Create a Style for your app:
Here I am customizing the Tab Bar and it's text (I am using a base compatibility theme but you can use HOLO or anything you like):
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarTabTextStyle">#style/TabTextStyle</item>
<item name="android:actionBarTabStyle">#style/TabBarStyle</item>
<!-- Support library compatibility (ActionBarCompat) -->
<item name="actionBarTabTextStyle">#style/TabTextStyle</item>
<item name="actionBarTabStyle">#style/TabBarStyle</item>
</style>
Create those styles:
<style name="TabTextStyle" parent="#style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">#color/ab_tab_txt</item>
</style>
<style name="TabBarStyle" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator</item>
</style>
For the color and drawables, you can create a selector that allows the tab to change based on clicks and selection:
File: res/color/ab_tab_txt (I am using the color file from res/values to set my constants, but you can place the color like so: #FFF)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#color/ab_tab_txt_selected"/>
<item android:color="#color/ab_tab_txt_unselected"/>
</selector>
File res/drawable/tab_indicator
<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="#android:color/transparent" />
<item android:state_focused="false"
android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/tab_selected_example" />
<!-- Focused states -->
<item android:state_focused="true"
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/tab_unselected_focused_example" />
<item android:state_focused="true"
android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/tab_selected_focused_example" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false"
android:state_selected="false"
android:state_pressed="true"
android:drawable="#drawable/tab_unselected_pressed_example" />
<item android:state_focused="false"
android:state_selected="true"
android:state_pressed="true"
android:drawable="#drawable/tab_selected_pressed_example" />
<!-- Focused states -->
<item android:state_focused="true"
android:state_selected="false"
android:state_pressed="true"
android:drawable="#drawable/tab_unselected_pressed_example" />
<item android:state_focused="true"
android:state_selected="true"
android:state_pressed="true"
android:drawable="#drawable/tab_selected_pressed_example" />
</selector>
My drawable files are NinePatches that I create using this useful tool:
http://jgilfelt.github.io/android-actionbarstylegenerator/
Related
I want to make simple TabPagerIndicator, but It doesn't show a underline, I use xml to change the style. This is my xml style file:
<!-- Application theme. -->
<style name="AppTheme" parent="#style/Theme.AppCompat.Light">
<item name="vpiTitlePageIndicatorStyle">#style/CustomTitlePageIndicator</item>
<item name="vpiUnderlinePageIndicatorStyle">#style/CustomUnderlinePageIndicator</item>
<item name="vpiTabPageIndicatorStyle">#style/CustomTabPageIndicator</item>
</style>
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">#color/fondo_activity</item>
<item name="android:textAppearance">#style/CustomTabPageIndicator.Text</item>
<item name="android:textColor">#FF555555</item>
<item name="android:textSize">14sp</item>
<item name="android:dividerPadding">10dp</item>
<item name="showDividers">middle</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
</style>
<style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
<item name="android:typeface">monospace</item>
</style>
<style name="CustomUnderlinePageIndicator">
<item name="selectedColor">#FFCC0000</item>
<item name="android:background">#FFCCCCCC</item>
<item name="fadeLength">1000</item>
<item name="fadeDelay">1000</item>
</style>
<style name="CustomTitlePageIndicator">
<item name="android:background">#18FF0000</item>
<item name="footerColor">#FFAA2222</item>
<item name="footerLineHeight">1dp</item>
<item name="footerIndicatorHeight">3dp</item>
<item name="footerIndicatorStyle">underline</item>
<item name="android:textColor">#AA000000</item>
<item name="selectedColor">#FF000000</item>
<item name="selectedBold">true</item>
</style>
In this picture you can see how it is shown (the red line on the top is part of the action bar)
Does anyone knows where is the error and How can I solve it?
Best.
You can set the underline with the background property. Set it to an XML drawable that defines which drawables/9-patches are used to draw the different states.
<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/vpi__tab_unselected_holo" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/vpi__tab_selected_holo" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/vpi__tab_unselected_focused_holo" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/vpi__tab_selected_focused_holo" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/vpi__tab_unselected_pressed_holo" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/vpi__tab_selected_pressed_holo" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/vpi__tab_unselected_pressed_holo" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/vpi__tab_selected_pressed_holo" />
</selector>
I've a TabWidget, independently of the ÀctionBar, in aFragmentTabHost`.
I want to customize the look and feel of the TabWidget but I don't get it. My intention is to change the text color and the selector color, as you can see in the image I can change the background of the TabWidget. I don't want to use a custom TextViewfor the tabs because the tabs must be with the Holo look and feel.
I've tried to put a style to the TabWidgetbut it doesn't work. In this way:
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
style="#style/MyTabs"
/>
and with the style
<style name="MyTabs">
<item name="android:textColor">#color/white</item>
<item name="android:background">#drawable/tabs</item>
<item name="android:backgroundStacked">#color/red_action_bar</item>
</style>
I've tried to add the style from a theme.xml using theparent="android:Widget.Holo.TabWidget", but nothing happens.
I finally find a way to do that. Using this code in the onCreateViewmethod of the Fragment
for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
View v = tabHost.getTabWidget().getChildAt(i);
v.setBackgroundResource(R.drawable.tabs);
TextView tv = (TextView) tabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.title);
tv.setTextColor(getResources().getColor(R.color.white));
}
And setting the bakcground color of the TabWidgetto red
I have not changed the tabs themselves, but I would assume that you can do it with these styles from styles.xml...
<style name="Widget.Holo.TabWidget" parent="Widget.TabWidget">
<item name="android:tabStripLeft">#null</item>
<item name="android:tabStripRight">#null</item>
<item name="android:tabStripEnabled">false</item>
<item name="android:divider">?android:attr/dividerVertical</item>
<item name="android:showDividers">middle</item>
<item name="android:dividerPadding">8dip</item>
<item name="android:measureWithLargestChild">true</item>
<item name="android:tabLayout">#android:layout/tab_indicator_holo</item>
</style>
with tab_indicator_holo.xml
<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_holo" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_holo" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_unselected_focused_holo" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_focused_holo" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed_holo" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_holo" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed_focused_holo" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_focused_holo" />
</selector>
Or you may also try
<style name="Widget.Holo.ActionBar.TabView" parent="Widget.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_holo</item>
<item name="android:paddingLeft">16dip</item>
<item name="android:paddingRight">16dip</item>
</style>
and tab_indicator_ab_holo.xml
<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="#color/transparent" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_holo" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/list_focused_holo" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_focused_holo" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/list_pressed_holo_dark" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_holo" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed_holo" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_holo" />
</selector>
Finally using the two png-9 drawables: tab_selected_holo and tab_unselected_holo. They look like the two thicker and thinner blue lines you are talking about.
Or do you mean the minitabs?
<style name="Widget.ActionBar.TabView" parent="Widget">
<item name="android:gravity">center_horizontal</item>
<item name="android:background">#drawable/minitab_lt</item>
<item name="android:paddingLeft">4dip</item>
<item name="android:paddingRight">4dip</item>
</style>
with in minitab_lt.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:state_selected="true"
android:drawable="#drawable/minitab_lt_press" />
<item android:state_selected="true"
android:drawable="#drawable/minitab_lt_selected" />
<item android:state_pressed="true"
android:drawable="#drawable/minitab_lt_unselected_press" />
<item android:drawable="#drawable/minitab_lt_unselected" />
</selector>
If you need another definition just search for TabWidget in here: https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml
Then as usual define your own style with all the required attributes and drawables...
Try this:
1.Create a new style:
<style name="TabText">
<item name="android:textColor">#color/YOUR_COLOR</item>
</style>
2.On Tab Host, set theme:
<TabHost android:theme="#style/TabText">
3.The background you can set normally on TabWidget
<TabWidget android:background="#FFF"/>
As I answered here, this can actually be done using XML themes. The TabWidget uses android:textPrimaryColor for the selected tab and android:textSecondaryColor for the unselected ones. The accent color is determined by colorAccent and the background color by colorPrimary Thus, you can achieve the desired customization like this:
In styles.xml:
<style name="TabWidgetTheme" parent="AppTheme">
<item name="colorPrimary">#color/your_primary_color</item>
<item name="colorAccent">#color/your_accent_color</item>
<item name="android:textPrimaryColor">#color/your_primary_color</item>
<item name="android:textSecondaryColor">#color/your_secondary_color</item>
</style>
In your layout:
<TabHost
android:layout_height="match_parent"
android:layout_width="match_parent"
android:theme="#style/TabWidgetTheme"/>
Note that the android:theme should not be directly in the TabWidget itself, but rather the containing TabHost or similar.
I am making a small program in which i am using Fragment Tabs with swipe, to make it stylish i used Style Generator, and my experience was good with that.
Now i wanna do a small change in existing look of my Tabs, this time i am talking about Tab Text style.
first view screen shot of my simple stylish ActionBar
Like we can see all Tab's text are looking equivalent, so here i need your help, in my case text style for selected Tab will remain same white as bold as it is looking, but want to change text style for others as normal (i mean those are not selected like:- IOS and WINDOWS)
styles.xml:
<resources>
<style name="Theme.Compatstyle4" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarItemBackground">#drawable/selectable_background_compatstyle4</item>
<item name="popupMenuStyle">#style/PopupMenu.Compatstyle4</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Compatstyle4</item>
<item name="actionBarTabStyle">#style/ActionBarTabStyle.Compatstyle4</item>
<item name="actionDropDownStyle">#style/DropDownNav.Compatstyle4</item>
<item name="actionBarStyle">#style/ActionBar.Solid.Compatstyle4</item>
<item name="actionModeBackground">#drawable/cab_background_top_compatstyle4</item>
<item name="actionModeSplitBackground">#drawable/cab_background_bottom_compatstyle4</item>
<item name="actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Compatstyle4</item>
<!-- Light.DarkActionBar specific -->
<item name="actionBarWidgetTheme">#style/Theme.Compatstyle4.Widget</item>
</style>
<style name="ActionBar.Solid.Compatstyle4" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/ab_solid_compatstyle4</item>
<item name="backgroundStacked">#drawable/ab_stacked_solid_compatstyle4</item>
<item name="backgroundSplit">#drawable/ab_bottom_solid_compatstyle4</item>
<item name="progressBarStyle">#style/ProgressBar.Compatstyle4</item>
</style>
<style name="ActionBar.Transparent.Compatstyle4" parent="#style/Widget.AppCompat.ActionBar">
<item name="background">#drawable/ab_transparent_compatstyle4</item>
<item name="progressBarStyle">#style/ProgressBar.Compatstyle4</item>
</style>
<style name="PopupMenu.Compatstyle4" parent="#style/Widget.AppCompat.PopupMenu">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_compatstyle4</item>
</style>
<style name="DropDownListView.Compatstyle4" parent="#style/Widget.AppCompat.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_compatstyle4</item>
</style>
<style name="ActionBarTabStyle.Compatstyle4" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_compatstyle4</item>
</style>
<style name="DropDownNav.Compatstyle4" parent="#style/Widget.AppCompat.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/spinner_background_ab_compatstyle4</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_compatstyle4</item>
<item name="android:dropDownSelector">#drawable/selectable_background_compatstyle4</item>
</style>
<style name="ProgressBar.Compatstyle4" parent="#style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_compatstyle4</item>
</style>
<style name="ActionButton.CloseMode.Compatstyle4" parent="#style/Widget.AppCompat.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_compatstyle4</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Compatstyle4.Widget" parent="#style/Theme.AppCompat">
<item name="popupMenuStyle">#style/PopupMenu.Compatstyle4</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Compatstyle4</item>
</style>
</resources>
Like: I want to show text color as default for selected tab and gray for others
You will need to do settings in three places.
Your ActionBAr theme, where I set my tabstyle as a custom one defined below.
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="actionBarTabStyle">#style/CustomActionBarTabs</item>
<item name="actionBarTabTextStyle">#style/CustomActionBarTabs_TextColor</item>
My custom tab style which refers to a drawable selector for various states.
<!-- action bar tab styles -->
<style name="CustomActionBarTabs" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_custom_actionbar_style</item>
<item name="android:textColor">#666666</item>
</style>
My selector, set this as per your requirement.
<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="#android:color/transparent" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_custom_actionbar_style" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_unselected_focused_custom_actionbar_style" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_focused_custom_actionbar_style" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed_custom_actionbar_style" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_custom_actionbar_style" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed_custom_actionbar_style" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_custom_actionbar_style" />
</selector>
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_unselected_focused_holo" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_focused_holo" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed_holo" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_holo" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed_holo" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_holo" />
I need to change the color of the indicator of the tab but I didn't manage to do this.
Do anyone know how to do?
This is my stiles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarTabTextStyle">#style/MyCustomTabView</item>
<item name="android:ratingBarStyleIndicator">#style/indicator_color</item>
<item name="android:actionBarTabStyle">#style/CustomActionBarTheme</item>
</style>
<style name="MyCustomTabView" parent="Theme.AppCompat.Light">
<item name="android:actionBarItemBackground">#style/indicator_color</item>
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">12dp</item>
<item name="android:textStyle">bold</item>
<item name="android:backgroundStacked">#ffffff</item>
</style>
<style name="indicator_color">
<item name="android:background">#ffffff</item>
</style>
<style name="CustomActionBarTheme"
parent="Theme.">
<item name="android:actionBarTabStyle">#style/MyActionBarTabs</item>
</style>
<!-- ActionBar tabs styles -->
<style name="MyActionBarTabs"
parent="Theme.AppCompat.Light">
<!-- tab indicator -->
<item name="android:background">#drawable/actionbar_tab_indicator</item>
</style>
and this is actionbar_tab_indicator.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- STATES WHEN BUTTON IS NOT PRESSED -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/abc_ab_bottom_solid_light_holo" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/abc_ab_bottom_solid_light_holo" />
<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/abc_ab_bottom_solid_light_holo" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/abc_ab_bottom_solid_light_holo" />
<!-- STATES WHEN BUTTON IS PRESSED -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="true"
android:drawable="#drawable/abc_ab_bottom_solid_light_holo" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="true"
android:drawable="#drawable/abc_ab_bottom_solid_light_holo" />
<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="true"
android:drawable="#drawable/abc_ab_bottom_solid_light_holo" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="true"
android:drawable="#drawable/abc_ab_bottom_solid_light_holo" />
</selector>
Thanks in advance.
To change the indicator used for the navigation tabs, create an activity theme that overrides the actionBarTabStyle property. This property points to another style resource in which you override the background property that should specify a state-list drawable.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#style/Theme.Holo">
<item name="android:actionBarTabStyle">#style/MyActionBarTabs</item>
</style>
<!-- ActionBar tabs styles -->
<style name="MyActionBarTabs"
parent="#style/Widget.Holo.ActionBar.TabView">
<!-- tab indicator -->
<item name="android:background">#drawable/actionbar_tab_indicator</item>
</style>
</resources>
Read more here.
You can change background of TabWidget(this is possibly what you are saying) like this:
If this is your style:
<style name="indicator_color">
<item name="android:background">#android:color/black</item>
</style>
Use it like this:
<TabWidget
style="#style/indicator_color"
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</TabWidget>
Also note that #ffffff is white color. So you may not see the effect.
Ok i'm loosing more sanity then ever. I can't find/understand how to style the damn thing.
I managed to change the background of the tab itself but I can't cahnge the color of the bar under the selected tab.
How to change it from blue to something.
My styles.xml unfortunately I have very bad understanding of how it works
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Styled" parent="Theme.Sherlock.Light">
<item name="actionBarTabStyle">#style/Widget.Styled.ActionBarTab</item>
<item name="android:actionBarTabStyle">#style/Widget.Styled.ActionBarTab</item>
<item name="actionBarTabBarStyle">#style/Widget.Styled.ActionBarTabBar</item>
<item name="android:actionBarTabBarStyle">#style/Widget.Styled.ActionBarTabBar</item>
<item name="actionBarTabTextStyle">#style/myText</item>
<item name="android:actionBarTabTextStyle">#style/myText</item>
</style>
<style name="Widget.Styled.ActionBarTab" parent="Widget.Sherlock.Light.ActionBar.TabView">
<!-- <item name="background">#drawable/startbcg</item>
<item name="android:background">#drawable/startbcg</item>
<item name="backgroundSplit">#drawable/bg_striped_split</item>
<item name="android:backgroundSplit">#drawable/bg_striped_split</item>
-->
</style>
<style name="Widget.Styled.ActionBarTabBar" parent="Widget.Sherlock.Light.ActionBar.TabBar">
<item name="background">#drawable/startbcg</item>
<item name="android:background">#drawable/startbcg</item>
<item name="backgroundSplit">#drawable/bg_striped_split</item>
<item name="android:backgroundSplit">#drawable/bg_striped_split</item>
</style>
<style name="myText" parent="Widget.Sherlock.Light.ActionBar.TabText">
<item name="android:textAppearance">#android:style/TextAppearance.Medium</item>
<item name="android:textColor">#android:color/primary_text_dark</item>
<item name="android:textSize">10sp</item>
</style>
<style name="myTextInv" parent="Widget.Sherlock.Light.ActionBar.TabText.Inverse">
<item name="android:textAppearance">#android:style/TextAppearance.Medium</item>
<item name="android:textColor">#android:color/primary_text_dark</item>
<item name="android:textSize">10sp</item>
</style>
</resources>
Bonus question: where I can find what properties (like background) certain stuff has.
Use ActionbarStyleGenerator to style the Actionbar. This is by far the simplest and most intuitive way.
How to:
Use the UI to select colors for different items
Once done click on "DOWNLOAD .ZIP"
The ZIP file contains resource files that you have to copy in your project res/layout and
res/drawableXXXX folders
I found that for the background it's better to copy the drawables (9 patches and xml) found on the Android SDK res directory and change it to have the color you like.
They use a background with the bottom bar included, so I don't think it's possible to change the bottom bar alone.
Here's what I have, working with green color for the bottom bar:
<style name="customTabStyle" parent="Widget.Sherlock.ActionBar.TabView">
<item name="android:showDividers">none</item>
<item name="android:measureWithLargestChild">true</item>
<!-- This was a copy from the sdk drawable -->
<item name="android:background">#drawable/tab_indicator</item>
<item name="background">#drawable/tab_indicator</item>
<item name="android:gravity">center</item>
<item name="android:textStyle">normal</item>
</style>
<style name="customTabBar" parent="Widget.Sherlock.ActionBar.TabBar">
<item name="android:showDividers">middle</item>
<item name="android:divider">#drawable/tab_divider</item>
<item name="divider">#drawable/tab_divider</item>
<item name="android:dividerPadding">10dip</item>
<item name="android:background">#drawable/tab_bg</item>
</style>
The tab indicator looks like this:
<?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_unselected_focused" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_focused" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed" />
</selector>
I hope it helps!