I have a TabWidget for which I have enabled and set the stripLeft and stripRight...
mTabHost.getTabWidget().setStripEnabled(true);
mTabHost.getTabWidget().setRightStripDrawable(R.drawable.redline);
mTabHost.getTabWidget().setLeftStripDrawable(R.drawable.redline);
As you can see in the image below, this does not change the bottom line color of the currently selected tab (TAB 2).
How can I change the bottom line color of the currently selected tab which is defaulted to blue at the moment? (I am guessing the blue color is being set in the default AppTheme style in styles.xml.)
I looked at this answer but it does not say how to change the color...
The color of the tab indicator is being set by a selector drawable which can be found here and looks like this:
<!-- AOSP copyright notice can be found at the above link -->
<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>
The drawables that the selector uses are all colored in that light blue. You can replace those drawables with your own recolored versions. The originals look like this (originals are small, links included):
tab_unselected_holo
tab_selected_holo
tab_unselected_focused_holo
tab_selected_focused_holo
tab_unselected_pressed_holo
tab_selected_pressed_holo
You'll want to copy the above selector into your own project along with the drawables. Then you'll want to recolor the drawables to whatever color you want them to be. Then you'll want to set your selector as the background for your tab indicators. You can do that like this (after setting up your tabs):
TabHost host = (TabHost)view.findViewById(R.id.tab_host);
TabWidget widget = host.getTabWidget();
for(int i = 0; i < widget.getChildCount(); i++) {
View v = widget.getChildAt(i);
// Look for the title view to ensure this is an indicator and not a divider.
TextView tv = (TextView)v.findViewById(android.R.id.title);
if(tv == null) {
continue;
}
v.setBackgroundResource(R.drawable.your_tab_selector_drawable);
}
There might be an easier way to do this by setting your own customer indicator layout with a background selector but this is what worked easiest for me.
You can use app:tabIndicatorColor for this purpose. It will change the selected tab indicator line color according to your requirement.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/white"
app:tabMode="fixed" />
This is how I changed my tabs,
private void changetabs(TabWidget tabWidget) {
// Change background
for(int i=0; i < tabWidget.getChildCount(); i++)
tabWidget.getChildAt(i).setBackgroundResource(R.drawable.tab_selector);
}
and my tab_selector.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_holo" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_holo" />
Hope it will help some one.
Incase some one stumbles on it, There is online tool to quickly build the drawables (9 patch) for the tabs. Just select the color and press the button Here you go ...
Thanks to Jeff Gilfelt
The Android Action Bar Style Generator allows you to easily create a simple, attractive and seamless custom action bar style for your Android application. It will generate all necessary nine patch assets plus associated XML drawables and styles which you can copy straight into your project.
http://jgilfelt.github.io/android-actionbarstylegenerator/
You can use a filter,
This will be applied to the region that isn't transparent
tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).getBackground().setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY);
One line of code - no need to change states.
Accent color is used by default as active tab color.
You can set/change it in style.xml file:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorAccent">#color/myAccentColor</item>
</style>
My way to solve this problem is using setBackgroundResource.
First, you have to create the exactly same backgroud
line_label_1_pressed.xml
<item android:top="-6dp" android:left="-6dp" android:right="-6dp">
<shape>
<size android:height="50dp"/>
<solid android:color="#android:color/transparent"/>
<stroke android:color="#color/myColor" android:width="6dp"/>
</shape>
</item>
line_label_1.xml
<item>
<shape>
<solid android:color="#android:color/transparent" />
</shape>
</item>
and then create tab_selector.xml as follow
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/line_label_1_pressed" android:state_selected="true"/>
<item android:drawable="#drawable/line_label_1"/>
then setbackgroudResource using tab_selector.xml
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/tab_selector"
android:gravity="center_horizontal|center_vertical" />
I found other solution, open styles.xml and change one line:
res -> values -> styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#android:color/holo_orange_light</item> <!-- set the color in this line -->
<item name="windowNoTitle">true</item>
</style>
Just use something like
tabHost.setSelectedTabIndicatorColor(Color.WHITE);
Related
Normally there's nothing but one selector for tabs: either it is selected or not. I need to add an attribute to put a small mark on certain tabs depending on their fragments' content. For tabs I use SmartTabLayout library.
Any ideas if it is possible and how? What means can I use to put a mark below tab text and its background?
Use Tabs 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="#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_focus" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_focus" />
<!-- Pressed -->
<item android:state_pressed="true" android:drawable="#drawable/tab_press" />
</selector>
And check
android:state_pressed="true"
I used astuetz library and implemented PagerSlidingTabStrip for my android application, it's working find. Now I want to change pressing effect, I tried:
android:background="#drawable/tab_selecor"
Code for tab selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/darkGreen" android:state_focused="true" android:state_pressed="true" />
<item android:drawable="#color/darkGreen" android:state_focused="false" android:state_pressed="true" />
<item android:drawable="#color/green" />
</selector>
The press colour suppose to be changed to dark green but as you see it does not change, it still looks like this even if I use another colour like red, yellow, .... .
Make use of setIndicatorColor() for setting the color of indicator and setIndicatorHeight() for setting the height
And make use of setTabBackground() method to set the background to tab
Use this drawable for tab background
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Active tab -->
<item
android:state_selected="true"
android:state_focused="false"
android:state_pressed="false"
android:drawable="#color/red" /> <!-- Inactive tab -->
<item
android:state_selected="false"
android:state_focused="false"
android:state_pressed="false"
android:drawable="#android:color/black" />
<!-- Pressed tab -->
<item
android:state_pressed="true"
android:drawable="#android:color/transparent" />
<!-- Selected tab (using d-pad) -->
<item
android:state_focused="true"
android:state_selected="true"
android:state_pressed="false"
android:drawable="#android:color/transparent" />
</selector>
So ,I suppose the title says it all.
I gave my action bar a color using this code and I want to change the color of the tab indicator ,yet there seems to be no method implemented and pretty much everything I found so far ,is way too complicated for a simple default color change.
actionBar.setStackedBackgroundDrawable(new ColorDrawable(Color.GREEN));
Can anyone guide me through this thing ,please?
My best guess is that I have to change the default color (It's some lightish blue) ,to whatever I need, but I have no clue where the XML file for this specific thing is.
Any other solution is highly appreciated ,but please don't send me "Android Action Bar Style Generator" ,I really hate so called generated things and stuff like this.I want to do everything as low level as possible.
If any other information is needed ,leave a comment, I will respond asap.
I think the indicator color use this
<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>
Simply change the drawable and set it to what you like. Note that those are 9 patch drawable. you can also use ColorFilter to change the color of them programmatically.
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"
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