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

Answer 1

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>

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

Answer 3

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>

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);
...
}