The traditional way to implement ActionBar tabs has now been deprecated. So I have now implemented my tabs with this guide github tabs.
However I have a problem with styling the tabs with this guide. It seems you can only style the tabs through java code like this:
slidingTabLayout
.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
#Override
public int getIndicatorColor(int position) {
return Color.RED;
}
});
This will only change the color of the indicator, but I want to change the background of the tabs in both selected, deselected and pressed states. The tradional way was to change the theme and make a XML file like this:
<?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/tab_unselected" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/tab_selected" />
<!-- 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/tab_unselected_focused" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/tab_selected_focused" />
<!-- STATES WHEN BUTTON IS 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 (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/tab_unselected_pressed" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="true"
android:drawable="#drawable/tab_selected_pressed" />
</selector>
How can I do the same with the new way of doing tabs without having to install 3rd party librarys like this github?
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 have an activity with action bar and action bar tabs. I am using appcompat for action bar. I have attached the screen shots. on emulator 4.4 and htc 4.1.1 tabs widths id correct but on nexus 4, 4.4 it adds some margin due to which it looks ugly.
Edit
how i am adding tabs.
ActionBar ab = getSupportActionBar();
ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
ab.setTitle("Purchase media");
ab.setSubtitle("To share with members");
ab.addTab(ab.newTab().setText("Audios").setTabListener(this));
ab.addTab(ab.newTab().setText("Videos").setTabListener(this));
my style for tabs is as follow
<style name="ActionBarTabStyle.Example" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_example</item>
</style>
and tab indicator selector is as follow
<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" />
how it looks.
how it should be
anybody have any idea about this behavior?
I'm trying to create a custom Tabs. I implemented the indicator color with 9.png with Android Action Bar Style Generator. But now I want to change the background color for each Tab programmatically. How I can do? Thank you.
JAVA
TabWidget tw = (TabWidget)tabs.findViewById(android.R.id.tabs);
View tabView = tw.getChildTabViewAt(0);
tabView.setBackgroundResource(R.drawable.tab_indicator_blanco);
View tabView2 = tw.getChildTabViewAt(1);
tabView2.setBackgroundResource(R.drawable.tab_indicator_blanco);
tab_indicator_blanco.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_blanco" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_blanco" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_unselected_focused_blanco" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_focused_blanco" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed_blanco" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_blanco" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed_blanco" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_blanco" />
</selector>
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"
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.