How to change the style of a ListPreference popup dialog?

Question

I am trying to change the style of the popup dialog of a ListPreference like I saw in this answer. For example I want a different background colour for the dialog.

So far I tried to apply my custom style with:

<item name="android:dialogTheme">@style/AlertDialogStyle</item>
<item name="android:alertDialogTheme">@style/AlertDialogStyle</item>
<item name="android:alertDialogStyle">@style/AlertDialogStyle</item>
<item name="android:dialogPreferenceStyle">@style/AlertDialogStyle</item>


<style name="AlertDialogStyle" parent="AlertDialog.AppCompat">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textColor">@color/lightGrey</item>
    <item name="android:background">@color/cardBackground</item>
    <item name="android:popupBackground">@color/cardBackground</item>
    <item name="android:windowBackground">@color/cardBackground</item>
    <item name="android:itemBackground">@color/cardBackground</item>
</style>

But my style is still not applied/background colour is unchanged.

This is how the popup dialog of my ListPreference looks at the moment:

And this is the color theme I want to archive (basically the same theme I use for my other dialogs):

---

To quickly reproduce my issue -> my project is on github

Overthrust

Have you considered simply taking a custom view? – Terrellterrena

I considered it but I am not sure if thats the right way for 'just' changing the background colour and text colour? – Overthrust

Answer 1

Answering my own question. In the end it was as simple as replacing:

<item name="android:alertDialogTheme">@style/AlertDialogStyle</item>

with

<item name="alertDialogTheme">@style/AlertDialogStyle</item>

Overthrust

and add proper appcompat items – Linnlinnaeus

Replacing it where? – Chiquita

Answer 2

I think you are mixing the things in your markup. alertDialogStyle and alertDialogTheme both are different.

Customizing the alert dialog theme you should create your Dialog theme, a theme that should probably extend @android:style/Theme.Dialog.Alert

<item name="android:dialogTheme">@style/dialogAlertTheme</item>
<item name="android:alertDialogTheme">@style/dialogAlertTheme</item>
<item name="android:alertDialogStyle">@style/AlertDialogStyle</item>
<item name="android:dialogPreferenceStyle">@style/AlertDialogStyle</item>

<style name="dialogAlertTheme" parent="@android:style/Theme.Dialog.Alert">
    <item name="android:windowBackground">[...]</item>
    [...]
</style>

<style name="AlertDialogStyle" parent="AlertDialog.AppCompat">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textColor">@color/lightGrey</item>
    <item name="android:background">@color/cardBackground</item>
    <item name="android:popupBackground">@color/cardBackground</item>
    <item name="android:windowBackground">@color/cardBackground</item>
    <item name="android:itemBackground">@color/cardBackground</item>
</style>

Note-1. Customizing the alert dialog style is limited to providing (background) drawables.

Note-2. Customizing the alert dialog theme opens a method to provide attributes such as windowBackground, windowTitleStyle and such, but you need an Android version which supports the alertDialogThem attribute/item for themes

Explanation for your Answer: why it is working if you remove the android: from android:alertDialogTheme

<item name="alertDialogTheme">@style/AlertDialogStyle</item>

Now it is the standard way of overriding AlertDialog styles. It was part of the lib as the AlertDialog wouldn't use the accent color from the main theme, but has been removed since in v24.2.0.0 because the Android team fixed this behavior.

Issue Refrence: https://github.com/Gericop/Android-Support-Preference-V7-Fix/issues/52#issuecomment-255759293

Change Refrence: https://github.com/Gericop/Android-Support-Preference-V7-Fix/commit/a6082cb0a508f5e0305a626c9a2a841e943ef8f6#diff-483bbb12192b1b74adadc9b4076b203b

Mcallister

If you extend your answer with an explanation why to use alertDialogTheme instead of android:alertDialogTheme I will reward you the bounty. – Overthrust

thanks for the update I know I mixed some stuff up here. But the root cause of my issue was that its unclear to me why I needed to remove the android: from android:alertDialogTheme (Like shown in my answer). Can you point to some documentation which describes that? – Overthrust

Answer 3

Use this in styles.xml and add this in the base theme. This style replaces the alert dialog with material dialog.

    <style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">
        <item name="alertDialogTheme">@style/MaterialDialogAlert</item>
        <item name="materialAlertDialogTheme">@style/MaterialDialogAlert</item>
    </style>

    <style name="MaterialDialogAlert" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="android:textColorPrimary">?colorPrimary</item>
        <item name="android:background">?colorSurface</item>
        <item name="buttonBarPositiveButtonStyle">@style/AlertButtonStyle</item>
        <item name="buttonBarNegativeButtonStyle">@style/AlertButtonStyle</item>
        <item name="buttonBarNeutralButtonStyle">@style/AlertButtonStyle</item>
    </style>

Ned

Answer 4

Depend on how many time/place will you call this, you can create a DialogFragment to handle this.

DialogFragment can be as simple:

public Dialog onCreateDialog(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mText = getArguments().getString("remark");
        // Use the Builder class for convenient dialog construction
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        //builder.setTitle("Remarks");
        builder.setMessage(mText);
        builder.setPositiveButton("Cancel", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                dialog.dismiss();
            }
        });
        return builder.create();
    }

this will auto create a simple dialog with cancel button. To add in style:, add below after super.onCreate:

setStyle(DialogFragment.STYLE_NO_TITLE, R.style.AlertDialogStyle);

Or you can do as more custom, by creating your own layout: fragment_dialogfragment_alert.xml then inside the class, using onCreateView instead of onCreateDialog

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_dialogfragment_alert, container, false);
...
}

Lummox

1) so you suggest to create a custom ListPreference where I override onCreateDialog to set my DialogStyle? – Overthrust

2) You write Depend on how many time/place will you call this. Can you describe why its important how many times/places I call this ? – Overthrust

@Overthrust 1 )I prefer DialogFragment over ListPreference, because ListPreference does not provide enough custom change for my dialog 2) because it provides more flexible dialog to changes, you can reuse the dialog by passing different data to fragment. Of course it doesn't affect if you only use one – Lummox

but I cant use a DialogFragment inside a PreferenceScreen right? So I dont see how your solution helps me :/ – Overthrust