Theming DialogPreferences

Question

I'm using a theme to customize the look and feel of a settings dialog. The preferences are defined in XML and inflated by a PreferenceFragment. The way of attaching the fragment is basically as described in the developer guide.

It works totally fine customizing the first screen via a custom theme applied to the hosting activity:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setTheme(R.style.Theme_Preferences_Dialog);
    ...

With the style:

<style name="Theme.Preferences.Dialog" parent="@android:style/Theme.Holo.Light.Dialog">
    <item name="android:colorBackground">#fff0f0f0</item>
    <item name="android:background">#fff0f0f0</item>
    <item name="android:divider">#ffe0e0e0</item>
    <item name="android:textColorPrimary">#ff555555</item>
    <item name="android:textColorSecondary">#ff808080</item>
    <item name="android:textAppearanceLarge">@style/preferences_large_text</item>
    <item name="android:textAppearanceMedium">@style/preferences_medium_text</item>
</style>

And some preferences defined like:

<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
android:title="@string/pref_title" >
...
<ListPreference
    android:enabled="false"
    android:key="@string/pref_change_workspace_key"
    android:persistent="true"
    android:summary="@string/pref_change_workspace_summary_singel"
    android:title="@string/pref_change_workspace_title" />
...
</PreferenceScreen>

The trouble is that all preferences that are opening up a dialog (like a ListPreference), have a different style than the rest of the dialog.

The first level of the settings fragment looks ok:

But clicking on one of the elements produces the wrong result:

Answer 1

values => styles.xml

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:dialogTheme">@style/MyDialogStyle</item>
        <item name="android:alertDialogTheme">@style/MyDialogStyle</item>

    </style>


    <style name="MyDialogStyle" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>

</resources>

values-v21 => styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:dialogTheme">@style/MyDialogStyle</item>
    <item name="android:alertDialogTheme">@style/MyDialogStyle</item>

</style>


<style name="MyDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:background">#fff0f0f0</item>
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

Answer 2

and windowbackground attribute to transparent

<item name="android:windowBackground">@android:color/transparent</item>

Answer 3

The problem seen above results from the line

<item name="android:background">#fff0f0f0</item>

in the defined style. Apparently this setting is used for the spawned dialog as well. Deleting this line yields the expected result.

Answer 4

You should try to override android:alertDialogTheme (supported starting from API 11) style property to style preference dialogs (and not only preference but alert dialogs in general too):

<style name="AppTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">        
    <item name="android:alertDialogTheme">@style/Theme.MyDialog</item>
</style>

<style name="Theme.MyDialog" parent="@style/Theme.AppCompat.Light.Dialog">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>