Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there any way to theme a preference dialog?

I am using a custom theme for dialogs in my app. The custom theme applies to the alert dialogs just fine. But the theme does not apply on the preference dialogs like ListPreference, CheckboxPreference etc.

Currently i am applying the dialog theme using the materialAlertDialogTheme attribute like this:

Main app theme:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:navigationBarColor">?attr/colorPrimary</item>
    <item name="android:windowTranslucentStatus">true</item>

    <!-- Material Dialog theme -->
    <item name="materialAlertDialogTheme">@style/ThemeOverlay.App.MaterialAlertDialog</item>
</style>

MaterialDialog styles:

<!-- Styles for Material Dialogs -->
<style name="ThemeOverlay.App.MaterialAlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="colorSurface">@android:color/white</item>
    <item name="alertDialogStyle">@style/MaterialAlertDialog.App</item>
    <item name="materialAlertDialogTitleTextStyle">@style/MaterialAlertDialog.App.Title.Text</item>
    <item name="buttonBarPositiveButtonStyle">@style/Widget.App.PositiveButton</item>
</style>

<style name="MaterialAlertDialog.App" parent="MaterialAlertDialog.MaterialComponents">
    <item name="shapeAppearance">@style/ShapeAppearance.App.MediumComponent</item>
</style>

<style name="MaterialAlertDialog.App.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
    <item name="android:textStyle">bold</item>
</style>

<style name="Widget.App.PositiveButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.SmallComponent</item>
    <item name="android:textAllCaps">false</item>
</style>

<style name="ThemeOverlay.App.Button" parent="">
    <item name="colorPrimary">@android:color/black</item>
</style>

<style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">8dp</item>
</style>

<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">4dp</item>
</style>

Here is a dialog perfectly getting themed:

enter image description here

And here is a preference dialog which is not getting themed (notice the corners):

enter image description here

I have also tried setting alertDialog attribute in the main theme, but its not working.

Any suggestions?

like image 566
Amit Jayant Avatar asked Sep 13 '20 06:09

Amit Jayant


1 Answers

What I needed to resolve this issue was to add

<item name="alertDialogTheme">@style/AppTheme.AlertDialogTheme</item>

to my base style and

<style name="AppTheme.AlertDialogTheme" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="dialogCornerRadius">20dp</item>
</style>

as a style. Sad that this made my whole AlertDialog.Builder to MaterialAlertDialogBuilder migration somehow pointless (at least in the cases cornerFamily is rounded), hopefully we will see a better integration between preferences and material theme in future.

reference: https://www.reddit.com/r/androiddev/comments/dg8jfo/styling_androidx_preference_dialogs_using/

like image 116
Ebrahim Byagowi Avatar answered Oct 13 '22 18:10

Ebrahim Byagowi