Material-components-android: [MaterialAlertDialogBuilder] Rounded corners for AlertDialog pre Android P

[dominikgold]

Hi, thanks for the great work on Material Components.

Currently I'm facing a problem with MaterialAlertDialogBuilder. I'd like to style my AlertDialogs consistently across Android versions but setting a dialog corner radius is only possible from Android P onwards, since MaterialAlertDialogBuilder is using android.R.attr.dialogCornerRadius.

If the dialogCornerRadius attribute from AppCompat with R.attr.dialogCornerRadius was used instead, it would be possible to define a corner radius for versions < P as well.

Right now, I work around this issue by supplying a custom drawable with rounded corners to the builder in setBackground, which is a bit of a hassle.

[SamStenner]

This is a good suggestion, it's surprising this isn't already the layout's behaviour.

[SamStenner]

@dominikgold So I've found a good, backwards compatible solution.

Create the following styles in your styles.xml like so:

<style name="MaterialAlertDialog.Rounded" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MaterialAlertDialog.Rounded</item>
</style>

<style name="ShapeAppearanceOverlay.MaterialAlertDialog.Rounded" parent="">
    <item name="cornerSize">10dp</item>
</style>

When instantiating your MaterialAlertDialogBuilder, pass it the resource ID of the first style, like this:

new MaterialAlertDialogBuilder(getContext(), R.style.MaterialAlertDialog_Rounded)

And now you can easily change the corner radius with the 'cornerSize' attribute in the style. Hope this helps!

[dominikgold]

Yes, that's much better than setting the background programmatically, no need to even override the style in MaterialAlertDialogBuilder if you have materialAlertDialogTheme set in your theme. Thanks @SamStenner !

[SamStenner]

Yes, that's much better than setting the background programmatically, no need to even override the style in MaterialAlertDialogBuilder if you have materialAlertDialogTheme set in your theme. Thanks @SamStenner !

This is also true!

[bwalsh0]

<style name="ShapeAppearanceOverlay.MaterialAlertDialog.Rounded" parent="">
   <item name="cornerSize">10dp</item>
</style>

A side effect of this is that it also rounds the dialog's button shapes. If you happen to use custom outlines for the dialog buttons, they will also be rounded by this amount.

[leticiarossi]

To have the change not affect the button shapes, you can do as follows:

<style name="ThemeOverlay.MaterialAlertDialog.Rounded" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="alertDialogStyle">@style/MaterialAlertDialog.Rounded</item>
</style>

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

<style name="ShapeAppearance.MaterialAlertDialog.Rounded" parent="">
    <item name="cornerSize">10dp</item>
</style>

and in your theme set materialAlertDialogTheme to your ThemeOverlay.MaterialAlertDialog.Rounded to change all of your dialogs!