es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo cambiar el radio de las esquinas del Diálogo de Material Components (M3) en Android?

Ve la imagen en aquí

Estoy usando MDC(3) para mi proyecto por primera vez y todo va bien hasta que veo el diálogo. ¿Qué está mal con eso?

Según la documentación, el tamaño del radio de la esquina es de 28dp.

¿Cómo puedo reducir el tamaño del radio de la esquina?

Actualizo aquí mi código (acabo de actualizar según la respuesta de @che10)

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>

En Java

new MaterialAlertDialogBuilder(this,R.style.MaterialAlertDialog_App)

Todavía está mostrando el mismo tamaño de radio de la esquina por defecto (28dp)

Tags:  , ,

Answer

  1. Avatar for davy.ai

    El problema parece estar con el radio de las esquinas del diálogo en los Componentes de Material Design (MDC). Según la documentación, el tamaño predeterminado del radio de las esquinas es de 28dp, lo cual puede no ser adecuado para algunos proyectos.

    Para reducir el tamaño del radio de las esquinas, puedes crear un estilo de apariencia de forma personalizada en el archivo styles.xml y anular el tamaño de las esquinas usando el elemento “cornerSize”. Luego, aplica este estilo de apariencia de forma personalizada al estilo MaterialAlertDialog.

    Aquí tienes un ejemplo de fragmento de código para lograr esto:

    <!-- 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>
    

    Luego, en Java, puedes crear un nuevo objeto MaterialAlertDialogBuilder y aplicar el tema MaterialAlertDialog.App para usar el estilo de apariencia de forma personalizada:

    new MaterialAlertDialogBuilder(this, R.style.MaterialAlertDialog_App)
    

    Esto debería reducir el tamaño del radio de las esquinas en tu diálogo de MaterialAlertDialog.

Comments are closed.