Publicado en Android

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.MaterialAlertDialog.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">8dp</item>
</style>

Luego asignar a shapeAppearance

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

Para final asignar el estilo en un tema para los dialogos

<style name="ThemeOverlay.MaterialAlertDialog.Rounded" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
    <item name="alertDialogStyle">@style/MaterialAlertDialog.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)

Autor:

Desarrollador freelance programador apasionado por el arte de programar, amante del auto aprendizaje y interesado por la tecnología en general.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios .