How can I change the corner radius of Material Components Dialog (M3) in Android

Question

See the pic at here

I'm using MDC(3) for my project as first time and everything is going well until I see the dialog. What is wrong with that?

According per docs the size of corner radius is 28dp

How can I reduce the size of corner radius?

Update here my code (I just updated according to @che10's answer

themes.xml

<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
</style>

styles.xml

<style name="MaterialAlertDialog.App" parent="MaterialAlertDialog.Material3">
        <item name="shapeAppearance">@style/ShapeAppearance.App.MediumComponent</item>
    </style>
    <style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.Material3.MediumComponent">
        <item name="cornerSize">10dp</item>
    </style>

In Java

new MaterialAlertDialogBuilder(this,R.style.MaterialAlertDialog_App)

It's still showing the same corner radius like default (28dp)

Answer 1

Create and add the following things in your styles.xml

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

<style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.Material3.MediumComponent">
    <item name="cornerSize">20dp</item>
</style>

When instantiating your MaterialAlertDialogBuilder, pass it directly there and you should be good to go. Something like this

MaterialAlertDialogBuilder(requireContext(), R.style.MaterialAlertDialog.App)

You can find more info here: https://m3.material.io/components/dialogs/implementation/android

I think you also need to modify the themes.xml

<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
  <item name="materialAlertDialogTheme">@style/ThemeOverlay.App.MaterialAlertDialog</item>
</style>

<style name="ThemeOverlay.App.MaterialAlertDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog">
    <item name="alertDialogStyle">@style/MaterialAlertDialog.App</item>
</style>

Answer 2

You can define a custom ThemeOverlay:

<style name="ThemeOverlay.App.MaterialAlertDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog">
    <item name="alertDialogStyle">@style/MaterialAlertDialog.App</item>
</style>

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

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

Then just use:

MaterialAlertDialogBuilder(context, R.style.ThemeOverlay_App_MaterialAlertDialog)