Adjust androidx.preference dialogs to follow Material You

user_4227746 0
Viewed 464

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

Normal Material You dialog Preference dialog

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?

material-you material-dialog material-design android-preferences android
2 Answers

At the moment, Preference Dialogs still use AlertDialog to inflate the view. Here's what I defined in my styles.xml to apply the Material3 dialog theme to them:

NOTE: This covers most of the MaterialAlertDialog styling, but you'll still need to define others such as the corner radius and background/text colors.

<item name="alertDialogTheme">@style/ThemeOverlay.Material3.MaterialAlertDialog</item>
<item name="dialogCornerRadius">28dp</item>
user_83919470

After further investigation, i found out that, as of today, the only way to properly theme 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.

  1. 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>
  1. 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:

Monet preference dialogs

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

user_42277460
Related