Develop Reference

How to change style of PreferenceThemeOverlay / PreferenceFragmentCompat

I worked myself thru the AndroidFundamtentals Tutorial 09.2 (App Settings) but I couldn't find a working solution for my problem.
I want to change the style (backgroundcolor) of the Settings-Fragment in my app.
That's what I have coded in the styles.xml so far:
<style name="AppThemeWithActionBar" parent="Theme.AppCompat.DayNight.DarkActionBar">
<item name="colorPrimary">#color/cr_blue_dark2</item>
<item name="colorPrimaryDark">#color/cr_blue_dark</item>
<item name="colorAccent">#color/cr_green</item>
<!-- more styles-->
<item name="preferenceTheme">#style/AppTheme.SettingsScreen</item>
</style>
<style name="AppTheme.SettingsScreen" parent="PreferenceThemeOverlay">
<item name="backgroundColor">#color/cr_black</item>
<item name="background">#color/cr_black</item> <!--one of these should make the background black-->
</style>
This code does not change the background color of the Settings fragment.
If you need more code just write an comment. :)

I just found the solution / mistake.
The parent of the style AppThemeWithActionBar is wrong.
It changes the background to light.
Change the title of the style like this:
<style name="AppThemeWithActionBar" parent="Theme.MaterialComponents">
Also change the theme of the activity in the Manifest.xml file.

ListPreference text color

I'm having a hard time trying to style a ListPreference.
I've applied a main theme which declares a preferenceTheme and both of them link to a dialogTheme (and alertDialogTheme respectively). It works except that the text color of the items doesn't change - but the color of all other texts does. I cannot rely on a workaround because I'm using the v7 preferences and thus cannot override the dialog methods in a custom class.
For me it looks like the rows ignore the text color value, but maybe someone else has a solution for this. Otherwise this might be a bug?
Main style:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- [...] -->
<!-- Some color values -->
<item name="android:dialogTheme">#style/DialogTheme</item>
<item name="android:alertDialogTheme">#style/DialogTheme</item>
<item name="dialogTheme">#style/DialogTheme</item>
<item name="alertDialogTheme">#style/DialogTheme</item>
<item name="preferenceTheme">#style/PreferenceTheme</item>
</style>
PreferenceTheme:
<style name="PreferenceTheme" parent="PreferenceThemeOverlay.v14.Material">
<!-- [...] -->
<!-- Some color values -->
<item name="android:textColor">#color/preference_primary_color</item>
<item name="android:textColorPrimary">#color/preference_primary_color</item>
<item name="android:textColorSecondary">#color/preference_primary_color</item>
<item name="android:textColorHighlight">#color/preference_primary_color</item>
<item name="android:editTextColor">#color/preference_primary_color</item>
<item name="android:dialogTheme">#style/DialogTheme</item>
<item name="android:alertDialogTheme">#style/DialogTheme</item>
<item name="preferenceTheme">#style/PreferenceTheme</item>
</style>
DialogTheme:
<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:textColor">#EEEEEE</item>
<item name="android:textColorPrimary">#EEEEEE</item>
<item name="android:textColorSecondary">#EEEEEE</item>
<item name="android:textColorHighlight">#EEEEEE</item>
<item name="android:textColorTertiary">#EEEEEE</item>
<item name="android:textColorAlertDialogListItem">#EEEEEE</item>
<item name="android:editTextColor">#EEEEEE</item>
<item name="color">#EEEEEE</item>
</style>
This is how it looks.The text should be #EEEEEE. I've snipped it but the text colors are applied in each of the given styles.

You did everything right, except one thing: do not use the android prefix when overriding textColorAlertDialogListItem because this is not the framework version of AlertDialog.
This statement is generally true for almost all attributes that belong to the support widgets / views. The reason is pretty straightforward: not all attributes are available on the older platforms. Such example is android:colorControlActivated which was introduced in API 21. The AppCompat lib declares its own colorControlActivated so it's available on older API levels, too. In this case the developer should not use the android prefix when defining the style in the theme as that would point to the platform version of the attribute instead of the AppCompat one.
TL;DR: Do not use the android prefix for support widgets unless you have to (i.e. you get compilation error).
P.S.: I have created a fix / extension to the support preferences-v7 lib's annoying things that you might want to check out.

Also for radio buttons color add <item name="colorAccent">#000000</item> to your style.
Be careful, it's not android:colorAccent but colorAccent

Styling the popup menu in Android 5.0

I'm making my app ready for Android 5.0, I'm using the latest compatibility library, here is what my style looks like.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
</style>
</resources>
(The ActionBar color is being set programmatically.)
Now, I want the overflow/popup menu to have the dark background like it had in the holo implementation, but I can't get it to work, here is what it looks like:
I have tried setting the popupMenuStyle but it didn't work.
How can I make the popup menu darker?

Stop using the ActionBar. If you want a ToolBar to be set up like an ActionBar, follow this guide on the android-developers blog.
It actually mentions your use case at Dark Action Bar and provides this code:
<android.support.v7.widget.Toolbar
android:layout_height=”wrap_content”
android:layout_width=”match_parent”
android:minHeight=”#dimen/triple_height_toolbar”
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />

Not a full answer but what I found so far:
In past versions you needed to specify a drawable (Check https://github.com/StylingAndroid/StylingActionBar code and tutorials)
Apparently, now that is a color. To modify it you need to do specify the following theme:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:actionBarPopupTheme">#style/popupNew</item>
</style>
<style name="popupNew" parent="android:ThemeOverlay.Material.Light">
<item name="android:colorBackground">#color/red</item>
</style>
</resources>
This works correctly if the theme applied to the app is just this.
If I add android:actionBarPopupTheme to my existing theme, it doesn't work. I am trying to figure out why.

Solved my problem by using this style:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
<item name="actionBarStyle">#style/AbStyle</item>
<item name="actionModeBackground">#color/actionmode_bg</item>
</style>
<style name="AbStyle" parent="Widget.AppCompat.Toolbar">
<item name="elevation">2dp</item>
<item name="displayOptions">homeAsUp|showTitle</item>
<!--showHome-->
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorAccent">#color/theme_accent_secondary</item>
<item name="actionBarStyle">#style/AbStyle</item>
</style>
I had to use Widget.AppCompat.Toolbar as the parent actionBarStyle

Add the property popupTheme to your toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_primary"
app:theme="#style/Theme.AppCompat.Light"
app:popupTheme="#style/Theme.AppCompat" />
Or define a new style for your toolbar:
<style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/green</item>
<item name="popupTheme">#style/Theme.AppCompat.Light</item>
<item name="theme">#style/Theme.AppCompat</item>
</style>

This question has already been answered for styling via XML, but I'm adding an explanation here of how to work out the solution to this and similar styling questions yourself.
First, this is the solution when using AppCompat. To your App's style.xml add actionBarPopupTheme to your theme:
<style name="Theme.MyTheme" parent="#style/Base.Theme.AppCompat.Light.DarkActionBar">
...other stuff here
<item name="actionBarPopupTheme">#style/Theme.MyTheme.ActionBarPopupTheme</item>
</style>
<style name="Theme.MyTheme.ActionBarPopupTheme" parent="#style/ThemeOverlay.AppCompat.Light">
<item name="android:textColor">#android:color/white</item>
<item name="android:background">#android:color/black</item>
</style>
Here's the steps I took to arrive at this solution (it takes a bit of detective work as the Android documentation is poor):
Open your App's style.xml in Android Studio
On the line where you App's theme is defined, put your screen cursor in the parent theme (e.g. click in #style/Base.Theme.AppCompat.Light.DarkActionBar) then press F4. This should take you to the source code for the style in the appcompat library.
Within this style I saw this line:
< item name="actionBarPopupTheme">#style/ThemeOverlay.AppCompat.Light< /item>
This looked like a possible place to change the theme of the popup. I searched for "actionBarPopupTheme" in the poor
Android developers documentation and found "Reference to a theme that should be used to
inflate popups shown by widgets in the action bar". So this was worth playing with.
I copied the appcompat line containing "actionBarPopupTheme" to my style.xml then in this line replaced the item's theme reference (the bit in bold above) with Theme.MyTheme.ActionBarPopupTheme.
In my style.xml I created my new style named Theme.MyTheme.ActionBarPopupTheme. I used the same parent that was used in the style I copied from the appcompat source (the bit in bold above).
To ensure my new popup style was working, I changed the parent style to ThemeOverlay.AppCompat.Dark then ran and tested the code on a device. The popup style changed, so now I knew my overriding of actionBarPopupTheme was the correct thing to do. Then I changed back to ThemeOverlay.AppCompat.Light.
The next challenge is to work out what item names to override in Theme.MyTheme.ActionBarPopupTheme. I changed the text and background colours. To find the correct item names that change the style of something can be tricky in some cases. One way to find less obvious style item names is to look through the style definitions in the appcompat xml file (the one you opened when pressing F4 in the 2nd step above), continually descending into parent styles (F4 again!) until you find something that may do what you want. Google searches will help here too.

Change the line color used in listSeparatorTextViewStyle

I have the following code
<TextView
android:text="#string/hello"
style="?android:attr/listSeparatorTextViewStyle" />
and I will get the following effect.
However, I am not happy with the color line. I would like to have something like
I would like it to have blue color line as in holo. I try the following custom style.
<style name="MyOwnListSeperatorTextViewStyle">
<item name="android:background">#android:drawable/list_section_divider_holo_light</item>
<item name="android:textAllCaps">true</item>
<!-- Copy from Widget.TextView.ListSeparator -->
<item name="android:background">#android:drawable/dark_header_dither</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">?textColorSecondary</item>
<item name="android:textSize">14sp</item>
<item name="android:gravity">center_vertical</item>
<item name="android:paddingLeft">8dip</item>
</style>
But it won't work, as I get the following error.
error: Error: Resource is not public. (at 'android:background' with value '#android:drawable/dark_header_dither').
Have idea how can I change the line color used in listSeparatorTextViewStyle?

I needed to do this to override the typical Holo Spinner style (I didn't want the underlined item - i just wanted the arrow), and I think this can be overridden in precisely the same manner:
First off, you want to find the item you wish to override in the android styles source. There is an incredibly useful SO answer that contains all of the styles (and the names to override them) right here: Set Dialog theme to parent Theme in Android
I believe yours is the following line:
<item name="listSeparatorTextViewStyle">#android:style/Widget.Holo.Light.TextView.ListSeparator</item>
This takes us on a journey to find the style Widget.Holo.Light.TextView.ListSeparator which should live somewhere on your very own computer! But I'll make it easy and just c&p it:
<style name="Widget.Holo.Light.TextView.ListSeparator" parent="Widget.TextView.ListSeparator">
<item name="android:background">#android:drawable/list_section_divider_holo_light</item>
</style>
Now, you probably want to leave well enough alone, and just look at that background drawable. You will find it is a grey 9patch file that looks like the sinister grey line you seek to avoid.
We need to override this. I am sure there are a number of ways to do this, but I do so by customizing the theme of the application. Here is the themes.xml file:
<style name="AppTheme" parent="#android:style/Theme.Holo.Light.NoActionBar">
<item name="android:listSeparatorTextViewStyle">#style/MyOwnListSeperatorTextViewStyle</item>
</style>
<style name="MyOwnListSeperatorTextViewStyle" parent="Widget.TextView.ListSeparator">
<item name="android:background">#drawable/make_your_own_blue_9_patch_here</item>
</style>
Notice how we used the listSeparatorTextViewStyle from that previous SO post? And the parent of the custom style is the Widget.TextView.ListSeparator from android's style source? All very important.
Now you just need to apply this theme to your app, but I am assuming you have a theme already. If you haven't already, you will need to make your own 9patch but I would just look at the list_section_divider_holo_light.9.png file on your computer, and make the grey parts blue, and then make a copy and place it into your own drawables folder.
Hope this works and is helpful!

Styling ActionBar dropdown menu

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.