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.
Related
I'm modifying downloads (for 4.3 Jellybean) and I can't change the colour of the text on the bottom button from black to white. Is it possible to change the text colour without giving the button its own style by adding an item in the app theme? Here is my Styles.xml:
<style name="DownloadListTheme" parent="#android:style/Theme.DeviceDefault.Light.DialogWhenLarge">
<item name="android:textAlignment">viewStart</item>
<item name="android:layoutDirection">locale</item>
<item name="android:actionBarStyle">#android:style/Widget.DeviceDefault.Light.ActionBar.Solid.Inverse</item>
<item name="com.sonyericsson.uxp:extendedLookAndFeel">true</item>
<item name="android:textColor">#android:color/white</item>
</style>
Yes, you can accomplish this pretty easily, just override your theme in styles.xml like this:
<style name="MyButtonStyle"
parent="#android:style/Theme.DeviceDefault.Light.DialogWhenLarge">
<item name="android:textColor">#android:color/white</item>
</style>
For more information, see the documentation.
In my Android application, I'd like to change the color of the buttons in my Actionbar. From what I have seen in other posts, I should add a style for this, but I cannot get it to work. It MIGHT also be due to the fact that the solutions I have seen is to change the text color - but I have icons with images (drawables). These images are Android's standard drawables - for example android:icon="#android:drawable/ic_menu_edit" that I should be able to change color of in some way.
This is the code for my very simple theme:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/my_green</item>
<item name="background">#color/my_green</item>
</style>
</resources>
In earlier posts, they suggest adding this line: <item name="android:actionMenuTextColor">#color/your_color</item> but it doesn't have any effect here. (probably since it's not text)
Grateful for your help!
I want to change the color of text in my actionBar (from black to white), but it seems like nothing's working... somebody has suggestions?
Use custom style (If you are using Actionbarsherlock)
<style name="Widget.Styled.ActionBar" parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
<item name="titleTextStyle">#style/TitleText</item>
<item name="android:titleTextStyle">#style/TitleText</item>
</style>
<style name="TitleText">
<item name="android:textColor">#android:color/white</item>
<item name="android:textSize">17dip</item>
</style>
in the themes.xml file.
Edit
to apply the theme
<style name="Theme.Custom" parent="Theme.Sherlock.Light">
<item name="actionBarStyle">#style/Widget.Styled.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.Styled.ActionBar</item>
</style>
and in your activity/application in manifest
android:theme="#style/Theme.Custom"
probably the easiest way to style the action bar is using the action bar style generator online tool, you can find it here: http://jgilfelt.github.io/android-actionbarstylegenerator .
It will take care of generating all the needed assets and styles.
To have the text white, you can simply select "Dark" or "Light - Dark Actionbar" as base theme, then change the other colors according to your needs.
I followed this Guide to style my ActionBar. I use fixed tabs in my app so I want to theme the tabs too.
(Note: I'm using the appcompat theme to ensure some backwards compatibility)
So I used
<style
name="CustomTheme"
parent="#style/Theme.AppCompat.Light" >
<item name="android:actionBarStyle">#style/CustomActionBar</item>
<item name="actionBarStyle">#style/CustomActionBar</item>
<item name="android:actionBarTabStyle">#style/CustomActionBarTabs</item>
<item name="actionBarTabStyle">#style/CustomActionBarTabs</item>
</style>
as my theme.
I set the ActionBar background without problems, but then I tried theming the tabs with:
<style
name="CustomActionBarTabs"
parent="#style/Widget.AppCompat.ActionBar.TabView" >
<item name="android:background">#drawable/customtheme_actionbar_tab_indicator</item>
<item name="background">#drawable/customtheme_actionbar_tab_indicator</item>
</style>
The background points to a StateList where I set different drawables for different contexts, which works kind of as expected. Except it works just for the tabs. Not for the ActionBar.
The separator and the background of the tab bar is not themed.
How can I theme those ? (The grey part)
Theme Creation Guidelines
I wonder if there are any guidelines for creating a theme that looks good ?
(good = similar to default theme, so the app fits into the android ecosystem)
Because If you look closely at the default themes you can see a small line at the bottom of the ActionBar drawable. (The part which is light green in my theme)
There may be other things which you should consider when creating a theme that looks similar to the default themes, so it would be nice to some guideline.
Also: Should the TabBar always be darker than the ActionBar ?
(If so, how much darker?)
How much brighter/darker than the ActionBar color should the image color (like the color of the overflow button in the image) be ?
Thanks in advance,
Uriel
Add this
<style
name="CustomTheme"
parent="#style/Theme.AppCompat.Light" >
.
.
.
<item name="android:actionBarTabBarStyle">#style/TabBar</item>
</style>
And then
<style name="TabBar" parent="#style/Widget.AppCompat.ActionBar.TabBar">
<item name="android:background">/** Whatever color you want, like #ffff00 **/</item>
</style>
Just incase, it may help somebody
This below worked for me
<style name="Theme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarTabStyle">#style/Theme.MyActionBarTab</item>
<item name="actionBarTabTextStyle">#style/Theme.MyActionBarTabText</item>
</style>
<style name="Theme.MyActionBarTab" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#color/gray_mask</item>
</style>
<style name="Theme.MyActionBarTabText" parent="Widget.AppCompat.Light.ActionBar.TabText">
<item name="android:textColor">#color/black</item>
<item name="android:textSize">#dimen/size_28</item>
<item name="android:gravity">center</item>
<item name="textAllCaps">false</item>
</style>
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>