[FIXED] Adjust androidx.preference dialogs to follow Material You

Issue

I have two apps containing a preference section, and i'm using the preference library, the latest version available at the time of writing:

    implementation "androidx.preference:preference:1.2.0-rc01"

Now, i themed my app to use and follow the new Material3 (or Material You) theme, but a problem i'm facing is that while the normal dialogs are correctly themed, the dialogs in the preference section are only partially themed (corner radius). They clearly don't use the new styles and this inconsistency is killing me :D

Currently, i didn't find a way to theme them without weird workarounds, so i'll appreciate a suggestion. Here's my styles for dialogs at the moment

<!-- Dialog theme -->
<style name="ThemeOverlay.App.MaterialAlertDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog">
    <item name="colorOnSurface">?colorAccent</item>
    <item name="alertDialogStyle">@style/MaterialAlertDialog.App</item>
    <item name="dialogCornerRadius">@dimen/bottom_sheet_corners</item>
</style>

<!-- Note: shape appearance doesn't work with the preference dialogs (they're not material) -->
<style name="MaterialAlertDialog.App" parent="MaterialAlertDialog.Material3">
    <item name="shapeAppearance">@style/ShapeAppearance.App.MediumComponent</item>
    <item name="shapeAppearanceOverlay">@null</item>
</style>

Maybe it's just a matter of waiting?

Solution

After further investigation, i found out that, as of today, the only way of properly theming the preferences dialogs is to use a slight variation of the solution proposed to @Patrick:

1. Create a drawable, i named it dialog_bg_monet.xml, containing this layer list:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
     <item> 
         <shape> 
             <solid android:color="?attr/colorSurface" /> 
             <corners 
                 android:bottomLeftRadius="@dimen/yourcorners" 
                 android:bottomRightRadius="@dimen/yourcorners" 
                 android:topLeftRadius="@dimen/yourcorners" 
                 android:topRightRadius="@dimen/yourcorners" /> 
         </shape> 
     </item> 
     <item> 
         <shape> 
             <solid android:color="@color/m3_popupmenu_overlay_color" /> 
             <corners 
                 android:bottomLeftRadius="@dimen/yourcorners" 
                 android:bottomRightRadius="@dimen/yourcorners" 
                 android:topLeftRadius="@dimen/yourcorners" 
                 android:topRightRadius="@dimen/yourcorners" /> 
         </shape> 
     </item> 
 </layer-list>

Of course make sure to define a custom border radius in dimens or directly in the file. Ignore the warning. There's no other way.

2. Create a style for the dialogs, like the following:

    <!-- Preference dialog theme -->
    <style name="ThemeOverlay.App.MaterialAlertDialog.Monet" parent="ThemeOverlay.Material3.MaterialAlertDialog">
        <item name="alertDialogStyle">@style/MaterialAlertDialog.App</item>
        <item name="dialogCornerRadius">@dimen/yourcorners</item>
        <item name="android:background">@drawable/dialog_bg_monet</item>
    </style>

3. Apply this style in your main theme

<item name="materialAlertDialogTheme">@style/ThemeOverlay.App.MaterialAlertDialog.Monet</item>
<item name="alertDialogTheme">@style/ThemeOverlay.App.MaterialAlertDialog.Monet</item>

Result:

The app in the above screenshot is opensource, you can see the full code here

Answered By - m.i.n.a.r.
Answer Checked By - Mildred Charles (JavaFixing Admin)