Cómo hacer un diálogo con esquinas redondeadas

Este ejemplo se muestra cómo crear un diálogo personalizado con esquinas redondeadas en Android. Pa redondear las esquinas se usará el componente MaterialDialog y Shape de Material Design 2.0 para dar la forma redondeada.

Para más información Shape Theming

Declaración de esquinas redondeadas

Primero se debe crear el estilo corrospondiente, donde se especifica que el Shape es de la familia rounded y el valor de redondeo

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

Para final asignar el estilo en un tema para los dialogos

<style name="MaterialAlertDialog.Rounded" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearance.Rounded</item>
    <item name="materialAlertDialogTitleTextStyle">@style/DialogTitleStyle</item>
    <item name="buttonBarNegativeButtonStyle">@style/NegativeButtonStyle</item>
    <item name="buttonBarPositiveButtonStyle">@style/PositiveButtonStyle</item>
    <item name="buttonBarNeutralButtonStyle">@style/NeutralButtonStyle</item>
</style>

Asignar el estilo en los cuadros de diálogo

El estilo definido solo sirve para los cuadros de diálogo que se construyan con el componente MaterialDialogBuilder dejo un ejemplo

class DeleteDialog : DialogFragment() {

    interface OnDeleteDialogListener {
        fun onDeleteConfirm()
    }

    private var listener: OnDeleteDialogListener? = null

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {

        return activity?.let {
            val title = getString(R.string.dialog_delete_title)
            val content = getString(R.string.dialog_delete_summary)
            return MaterialAlertDialogBuilder(requireActivity()).apply {
                setTitle(title).setMessage(content)
                setPositiveButton(getString(R.string.action_delete)) { _, _ ->
                    listener?.onDeleteConfirm()
                }
                setNegativeButton(android.R.string.cancel) { _, _ ->
                    dismiss()
                }
                setOnKeyListener { _, keyCode, keyEvent ->
                    if (keyCode == KeyEvent.KEYCODE_BACK && keyEvent.action == KeyEvent.ACTION_UP) {
                        dismiss()
                        true
                    } else false
                }

            }.create()
        } ?: throw IllegalStateException("Activity cannot be null")

    }

    override fun onAttach(context: Context) {
        super.onAttach(context)
        if (listener == null) {
            listener = when {
                targetFragment is OnDeleteDialogListener -> {
                    targetFragment as OnDeleteDialogListener
                }
                requireActivity() is OnDeleteDialogListener -> {
                    requireActivity() as OnDeleteDialogListener
                }
                else -> {
                    throw  ClassCastException(" must implement OnDeleteDialogListener")
                }
            }
        }
    }

}

Para asignar el estilo, se puede especificar en el la raiz del tema

<item name="materialAlertDialogTheme">@style/ThemeOverlay.MaterialAlertDialog.Rounded</item>

O bien en la construcción del dialogo cargar el estilo predeteminado

MaterialAlertDialogBuilder(requireActivity(), R.style.ThemeOverlay_MaterialAlertDialog_Rounded)

Anuncio publicitario