I'm struggling with styling the ActionBar. My app has an ActionBar with three tabs. I'm trying to get the selected tab to have a background color, and the unselected tabs to show a different color. I'm following this reference: Customizing Action Bar. But all the TABs are showing the Selected color.
My styles.xml file is as follows:
<style name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabBar">
<item name="android:background">#drawable/tab_background</item>
<item name="android:paddingLeft">32dp</item>
<item name="android:paddingRight">32dp</item>
</style>
<style name="MyActionBarTabBarStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabBar">
<item name="android:background">#drawable/red</item>
</style>
<style name="AppTheme.Light" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar.Light</item>
<item name="android:actionBarTabStyle">#style/MyActionBarTabStyle</item>
<item name="android:actionBarTabBarStyle">#style/MyActionBarTabBarStyle</item>
</style>
tab_background is just a 9 patch. I'm also not sure if I'm inheriting the action bar tab from the correct parent (parent="android:style/Widget.Holo.Light.ActionBar.TabBar). I've looked through the references & find it very difficult to understand the style hierarchy
Why wont my tabs show selected or no? Thanks in advance for your assistance.
I solved my problem. I didn't use State List Drawables initially. I used the background image directly instead of going via the StateListDrawable. Using StateListDrawable, you can set a different background based on whether the tag is selected or not.
So I added the file tab_background_select.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#drawable/tab_background" />
</selector>
and I referenced this from my styles.xml:
<item name="android:background">#drawable/tab_background_select</item>
Related
I'm having trouble making ActionBarToggleButton having custom selector.
I got app that works for mobile and tablet devices, and now I have to make it usable for TV devices.
To do that I have to add some custom focus selector, that is more visible then default one.
App uses NavigationView for drawer and has toggle button in action bar that opens it. Also there are other items in action bar.
I have managed to change selectors for all action bar items except toggle button via:
<item name="android:actionBarItemBackground">#drawable/selectable_selector</item>
Is there a way to customize ActionToggleButton.
I dont need to change arrow drawable, but only color of the default selector.
Thanks
In API 21 and more you only need to write this item in style.xml, in your Toolbar theme:
<item name="colorControlHighlight">#color/xxx</item>
But in lower APIs, First you should write this style in your styles.xml:
<style name="MyToolbarTheme.Navigation" parent="#android:style/Widget">
<item name="android:background">#drawable/selector_items</item>
<item name="android:scaleType">center</item>
<item name="android:minWidth">56.0dip</item>
</style>
then add this items to your toolbar theme:
<item name="actionBarItemBackground">#drawable/selector_appbar</item>
<item name="toolbarNavigationButtonStyle">#style/MyToolbarTheme.Navigation</item>
Example:
<style name="MyToolbarTheme" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:textColorPrimary">#ffffff</item>
<item name="android:textColorSecondary">#ffffff</item>
<item name="actionBarItemBackground">#drawable/selector_appbar</item>
<item name="toolbarNavigationButtonStyle">#style/MyToolbarTheme.Navigation</item>
</style>
(Sorry for my weak English)
I styled my actionbar like so, which results in a normal spinner and not an action bar spinner (without the line on the bottom). But I do want it to be white and prefer to not user my own drawables for this and use the android's spinner style. (See below what the result is).
<style name="AppTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionOverflowButtonStyle">#style/AppTheme.OverFlow</item>
<item name="android:actionDropDownStyle">#style/AppTheme.actionBarDropDown</item>
<item name="android:spinnerDropDownItemStyle">#style/DropDownList</item>
<item name="android:actionBarSize">48dp</item>
<item name="actionBarSize">48dp</item>
</style>
<style name="AppTheme.actionBarDropDown" parent="android:style/Widget.Holo.Spinner">
<!--<item name="android:background">#android:style/ab</item>-->
</style>
<style name="DropDownList" parent="#android:style/Widget.Holo.Light.ListView.DropDown">
<!-- background of the list menu -->
<item name="background">#android:color/background_light</item>
<item name="android:background">#android:color/background_light</item>
<item name="android:popupBackground">#android:color/background_light</item>
<!-- dividers -->
<item name="android:divider">#color/border_color</item>
<item name="android:dividerHeight">1dip</item>
<!-- item selected -->
<!--<item name="android:dropDownSelector">#android:color/holo_blue_dark</item>-->
<!--<item name="android:listSelector">#android:color/holo_blue_dark</item>-->
</style>
as you see the line breaks my design of the title.
Does anyone know what I could change to use a normal actionbar spinner drawable?
I can't seem to find this anywhere on stack.
Check the comments of the question, it's based on resources which don't have a white arrow, it's grey and it's not for the actionbar. So the best option is to use the generator
I have my style defined as follows:
<style name="actionBarTheme" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/button_style</item>
<item name="android:titleTextStyle">#style/actionBarTitleText</item>
</style>
And the actionBar is actually of the color defined in button_style (correctly working in other parts of the code). The problem is that the items are not working correctly (the background color is too light).
Any idea on how to solve this? Thanks
EDIT:
In the picture there is the touch-feedback that I have now. The button_style has another touch effect (a darker one) since this is almost invisible.
You can have this affect with actionButtonStyle
<style name="appTheme">
<item name="android:actionBarStyle">#style/actionBarTheme</item>
<item name="android:actionButtonStyle">#style/actionButtonTheme</item>
</style>
and then place your button style as the background of that.
<style name="actionButtonTheme">
<item name="android:background">#drawable/button_style</item>
</style>
You will still need to set the background of your action bar but this only needs to be a colour or drawable image as that is all that will actually be used.
I'm working on an android app and I am using ActionBarSherlock for compatibility. Everything works great so far, except the fact that I want to change the text color of the overflow menu items.
Here's the way they currently look:
Now, the reason for this is that I am usign Holo.Light.DarkActionBar as the Base theme since that way the icons are white, the text is white on the ActionBar's Title and SubTitle, and some other things.
To my knowledge, and per this question, I should be able to simply change the following:
<!-- For Values -->
<style name="Theme.Laprensa_compat_holo_light_dark_action_bar" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="spinnerItemStyle">#style/SpinnerItemStyle</item>
<!-- For Values-v14 -->
<style name="Theme.Laprensa_compat_holo_light_dark_action_bar" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:spinnerItemStyle">#style/SpinnerItemStyle</item>
And the SpinnerItemStyle is:
<style name="SpinnerItemStyle" parent="Widget.Sherlock.TextView.SpinnerItem">
<item name="android:textColor">#android:color/black</item>
</style>
Now, that doesn't seem to be working, so I added
<item name="spinnerItemStyle">#style/SpinnerItemStyle</item>
To the children theme too:
<style name="ActionBar.Solid.Laprensa_compat_holo_light_dark_action_bar" parent="#style/Widget.Sherlock.Light.ActionBar.Solid.Inverse">
It's still a no-go.
The Answer I referenced stated that i should make sure that I am using the correct adapter layout, but in reality, I am not inflating any code myself manually, it's the regular onCreateOptionsMenu implementation.
Any ideas on what could I change to make the text black? And you should know that changing actionMenuTextColor is for items hosted on the action bar itself, and doesn't change the overflow menu items
EDIT As per Matthias' answer, I tried the following style:
<style name="TextAppearance.Styled.Widget.PopupMenu.Large" parent="TextAppearance.Sherlock.Widget.PopupMenu.Large">
<item name="android:textColor">#android:color/black</item>
</style>
and used it on the main theme:
<style name="Theme.Laprensa_compat_holo_light_dark_action_bar" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="textAppearanceLargePopupMenu">#style/TextAppearance.Styled.Widget.PopupMenu.Large</item>
</style>
But the text is still non-visible.
<style name="AppTheme" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:textAppearanceLargePopupMenu">
#style/TextAppearance.Styled.Widget.PopupMenu.Large</item>
</style>
<style name="TextAppearance.Styled.Widget.PopupMenu.Large"
parent="TextAppearance.Sherlock.Widget.PopupMenu.Large">
<item name="android:textColor">?attr/textColorPrimaryInverse</item>
</style>
I'm using a custom theme that inherits from DarkActionBar and I want to customize dropdown menu to be white like when using Light Holo theme.
I've been able to change the background to white using:
<style name="MyTheme" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/MyDropDownNav</item>
</style>
<style name="MyDropDownNav">
<item name="android:background">#drawable/spinner_background_white</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_whyite</item>
<item name="android:dropDownSelector">#drawable/selectable_background_white</item>
</style>
But I haven't any clue of how to change the text color to black. Because after setting white drawable the problem is that text isn't visible because is white on white background.
I answer myself after some investigation.
In addition to question's styling you need to:
Customize android:spinnerDropDownItemStyle for actionBarWidgetTheme changing it's text appearance.
Also don't forget that dropdown list is managed by the adapter you use. Then if you used the standard one (simple_dropdown_item_1line) there's no problem. But if you used a custom one like me (to be able to add an icon) don't forget to apply style="?attr/spinnerDropDownItemStyle" in your layout TextView.
Then final custom style is:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.myapp" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/myapp_DropDownNav</item>
<item name="android:actionBarWidgetTheme">#style/myapp.actionBarWidgetTheme</item>
</style>
<style name="myapp.actionBarWidgetTheme" parent="#style/Theme.">
<item name="android:spinnerDropDownItemStyle">#style/myapp.Widget.DropDownItem.Spinner</item>
</style>
<style name="myapp_DropDownNav" parent="#style/Widget.Spinner.DropDown.ActionBar">
<item name="background">#drawable/spinner_background_ab_myapp</item>
<item name="android:background">#drawable/spinner_background_ab_myapp</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_myapp</item>
<item name="android:dropDownSelector">#drawable/selectable_background_myapp</item>
</style>
<style name="myapp.Widget.DropDownItem.Spinner" parent="Widget.DropDownItem.Spinner">
<item name="android:textAppearance">#style/myapp.TextAppearance.Widget.DropDownItem</item>
</style>
<style name="myapp.TextAppearance.Widget.DropDownItem" parent="TextAppearance.Widget.DropDownItem">
<item name="android:textColor">#color/black</item>
</style>
Where drawables in myapp_DropDownNav are white background ones that you can generate with ActionBar Style generator in Android Asset Studio
Try setting itemTextAppearance. That should achieve what you want.
I have stumbled on what may be the simplest way to do this. I was working with the AppCompat library.
<style name="ApplicationTheme" parent="#style/Theme.AppCompat">
<item name="android:actionBarWidgetTheme">#style/Theme.AppCompat.Light</item>
<item name="actionBarWidgetTheme">#style/Theme.AppCompat.Light</item>
</style>
My advice is to simply inherit from the Sherlock.Light theme and change the applicable fields to the Dark values. For my app, we wanted a white "up" icon, and white text for the action labels. I don't provide dark versions of my actionbar icons, so they are all white anyway. So after several hours messing around with it and following different people's suggestions, I finally found what I was looking for in the ABS themes file.
I inherit from Sherlock.Light (well, technically HoloEverywhereLight.Sherlock but...) and change:
<item name="android:actionMenuTextColor">#color/White</item>
<item name="actionMenuTextColor">#color/White</item>
<item name="android:homeAsUpIndicator">#drawable/abs__ic_ab_back_holo_dark</item>
<item name="homeAsUpIndicator">#drawable/abs__ic_ab_back_holo_dark</item>
<item name="android:dividerVertical">#drawable/abs__list_divider_holo_dark</item>
<item name="dividerVertical">#drawable/abs__list_divider_holo_dark</item>
That's it. It's way simpler and easier than trying to extend classes, restyle things in code, etc.