So I am having great difficultly styling tab widgets using xml. Everywhere I have searched seem's to either suggest solutions to do this programmatically, or refers to the actionBarTab style >:|
What I am trying to achieve is a customised tab from the tabwidget drawables that was generated using http://android-holo-colors.com/
I manage to get the
So in my custom theme I have this code:
<style name="RR.App.Theme" parent="android:Theme.Holo.Light">
...
<item name="android:tabWidgetStyle">#style/RR.Tab.Widget</item>
...
</style>
This is the RR.Tab.Widget style: (none of these seem to make such difference)
<style name="RR.Tab.Widget" parent="android:Widget.Holo.Light.TabWidget">
<item name="android:background">#drawable/rrtheme_tab_indicator_holo</item>
<item name="android:tabStripEnabled">false</item>
<item name="android:tabStripLeft">#null</item>
<item name="android:tabStripRight">#null</item>
</style>
This is the generated drawable:
<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/rrtheme_tab_unselected_holo" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/rrtheme_tab_selected_holo" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/rrtheme_tab_unselected_focused_holo" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/rrtheme_tab_selected_focused_holo" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/rrtheme_tab_unselected_pressed_holo" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/rrtheme_tab_selected_pressed_holo" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/rrtheme_tab_unselected_pressed_holo" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/rrtheme_tab_selected_pressed_holo" />
</selector>
This is what it currently looks like:
All I'm trying to do is change this blue color to green!
Many thanks for your help in advance :)
I recommend you to take a look at this:
Customize Tab indicator (dead link)
Also to have your tab customized use Android Action Bar Style Generator. I always use it to have my Tabs in the color I want.
Hope I helped you
Related
I'm a newbie in Android development. I'm following the tutorial on this page, and trying to get an actionbar with tabs. http://developer.android.com/training/basics/actionbar/styling.html
My code seems to be exactly same as the sample in the page, except for the "android:drawable" in actionbar_tab_indicator.xml.
I used #color/blablabla rather than the #drawable/blablabla in the sample in that web page. But based on my knowledge, #color and #drawable are replaceable of each other.
Yet, I'm not getting any tab when I run the application. Only an activity with an actionbar. And the whole background is black(blank?).
Here is my themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- the theme applied to the application or activity -->
<style name="TabTheme" parent="#style/Theme.AppCompat">
<item name="android:actionBarTabStyle">#style/MyActionBarTabs</item>
<!-- android support library compatibility -->
<item name="actionBarTabStyle">#style/MyActionBarTabs</item>
</style>
<!-- ActionBar tabs styles -->
<style name="MyActionBarTabs"
parent="#style/Widget.AppCompat.ActionBar.TabView">
<!-- tab indicator -->
<item name="android:background">#drawable/actionbar_tab_indicator</item>
<!-- Support library compatibility -->
<item name="background">#drawable/actionbar_tab_indicator</item>
</style>
</resources>
And here is my 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="#color/gold" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false"
android:drawable="#color/articlecolor" />
<!-- 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="#color/gold" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false"
android:drawable="#color/articlecolor" />
<!-- STATES WHEN BUTTON IS PRESSED -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="true"
android:drawable="#color/black" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="true"
android:drawable="#color/blue" />
<!-- 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="#color/black" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="true"
android:drawable="#color/blue" />
</selector >
I'm so confused; any help is appreciated. I'm using support compat library by the way
use android:background="#drawable/actionbar_tab_indicator" to set the background color of the xml.
Also to use your theme, make sure you set android:theme="#style/TabTheme"
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'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/
So I just want to change the blue line color of tab widget in the app. I searched online and the found solutions to changing the whole background of the tabs but i just want to change the blue line color of the tab widget to another color like black. Can that be done?
You can try this style:
<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_holo" />
<item android:state_focused="true"
android:state_selected="true"
android:state_pressed="true"
android:drawable="#drawable/tab_selected_pressed_holo" />
</selector>
You can visit This Link also.
Hope it will help you.
Make a separate Style for your tabwidget in your custom theme.
Try out as below:
<item name="android:tabWidgetStyle">#android:style/Widget.TabWidget</item>
and
<style name="Widget.TabWidget">
<item name="android:textAppearance">#style/TextAppearance.Widget.TabWidget</item>
<item name="android:ellipsize">marquee</item>
<item name="android:singleLine">true</item>
</style>
<style name="TextAppearance.Widget.TabWidget">
<item name="android:textSize">14sp</item>
<item name="android:textStyle">normal</item>
<item name="android:textColor">#android:color/tab_indicator_text</item>
</style>
I hope this will be helpfull to you.
How can I change the colour of the line that appears under the highlighted Action Bar Sherlocks tab.
It's default is an electric blue.
Here an implementation based on the google i/o app implementation:
Set the theme style:
<style name="Theme.Styled" parent="Theme.Sherlock.Light">
<item name="android:actionBarTabBarStyle">#style/Widget.Styled.TabBar</item>
<item name="actionBarTabBarStyle">#style/Widget.Styled.TabBar</item>
</style>
<style name="Widget.Styled.TabView" parent="Widget.Sherlock.Light.ActionBar.TabView">
<item name="android:background">#drawable/tab_white_ab</item>
</style>
Create a drawable like this - notice that in the google I/O app the non focused state is transparent - in the example below I changed transparent to green:
<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_green_unselected"
/>
<!-- android:drawable="#android:color/transparent"-->
<item android:state_focused="false"
android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/tab_white_selected" />
<!-- Focused states -->
<item android:state_focused="true"
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/item_focused" />
<item android:state_focused="true"
android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/tab_white_selected_focused" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false"
android:state_selected="false"
android:state_pressed="true"
android:drawable="#drawable/item_pressed" />
<item android:state_focused="false"
android:state_selected="true"
android:state_pressed="true"
android:drawable="#drawable/tab_white_selected_pressed" />
<!-- Focused states -->
<item android:state_focused="true"
android:state_selected="false"
android:state_pressed="true"
android:drawable="#drawable/item_focused" />
<item android:state_focused="true"
android:state_selected="true"
android:state_pressed="true"
android:drawable="#drawable/tab_white_selected_pressed" />
Hope this helps.