Материальные компоненты Android — MaterialAlertDialog

Вышел Material Design 2.0, и нам не терпится заполучить Dialogs. В этом уроке мы будем настраивать диалоги с помощью темы материала в нашем приложении для Android.

Материальные компоненты — диалоги

Диалоговые окна предупреждений являются жизненно важной частью приложений. Обычно используется, чтобы привлечь внимание пользователя к чему-то важному. Благодаря Material Design 2.0 у нас теперь есть очень мощный диалог. В первую очередь вам нужно добавить зависимость компонентов материала:

implementation 'com.google.android.material:material:1.1.0-alpha09'

Не забудьте наследовать тему MaterialComponent или ее потомков в качестве темы Activity.

Базовая реализация

Теперь давайте создадим базовый MaterialAlertDialog, используя шаблон Builder:

new MaterialAlertDialogBuilder(MainActivity.this)
                        .setTitle("Title")
                        .setMessage("Your message goes here. Keep it short but clear.")
                        .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i) {

                            }
                        })
                        .setNegativeButton("CANCEL", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i) {

                            }
                        })
                        .show();

Вот как это выглядит на экране:

Давайте сравним его со старым диалоговым окном оповещения:

Конечно, новый MaterialAlertDialog выглядит намного лучше.

AlertDialog теряет свое содержимое при изменении конфигурации. Поэтому рекомендуется использовать AppCompatDialogFragment. Но для простоты этого урока мы будем придерживаться MaterialAlertDialog.

Стилизованные кнопки

Мы можем стилизовать кнопки MaterialAlertDialog, так как они просто MaterialButtons. Настройка кнопки контура/кнопки без рамки, волновых эффектов и т. д. Давайте посмотрим на пример:

<style name="AlertDialogTheme">
        <item name="buttonBarPositiveButtonStyle">@style/Alert.Button.Positive</item>
        <item name="buttonBarNeutralButtonStyle">@style/Alert.Button.Neutral</item>
    </style>

    <style name="Alert.Button.Positive" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="backgroundTint">@color/colorPrimaryDark</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">false</item>
    </style>

    <style name="Alert.Button.Neutral" parent="Widget.MaterialComponents.Button.TextButton">
        <item name="backgroundTint">@android:color/transparent</item>
        <item name="rippleColor">@color/colorAccent</item>
        <item name="android:textColor">@android:color/darker_gray</item>
        <item name="android:textSize">14sp</item>
    </style>

new MaterialAlertDialogBuilder(MainActivity.this, R.style.AlertDialogTheme)
                .setTitle("Title")
                .setMessage("Your message goes here. Keep it short but clear.")
                .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .setNeutralButton("LATER", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .show();

Диалоговое окно «Вырезать фигуру»

Теперь мы можем устанавливать формы в диалогах материалов! Давайте стилизуем один из них как вырезанный, унаследовав его от стиля ShapeAppearance.

<style name="CutShapeTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="shapeAppearanceMediumComponent">@style/CutShapeAppearance</item>
    </style>

    <style name="CutShapeAppearance" parent="ShapeAppearance.MaterialComponents.MediumComponent">

        <item name="cornerFamily">cut</item>
        <item name="cornerSize">10dp</item>
    </style>

Теперь просто установите стиль в конструкторе построителя:

new MaterialAlertDialogBuilder(MainActivity.this, R.style.CutShapeTheme)
                .setTitle("Title")
                .setMessage("Your message goes here. Keep it short but clear.")
                .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .setNeutralButton("LATER", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {

                    }
                })
                .show();

Круглый диалог

<style name="RoundShapeTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="shapeAppearanceMediumComponent">@style/RoundShapeAppearance</item>
    </style>

    <style name="RoundShapeAppearance" parent="ShapeAppearance.MaterialComponents.MediumComponent">

        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">16dp</item>
    </style>

Установка вышеуказанного стиля в конструкторе Dialog Builder из предыдущего фрагмента кода дает нам следующее:

Разве эти дизайны не достойны слюни!

Диалоговое окно пользовательского шрифта

Наконец, мы можем установить пользовательские семейства шрифтов для кнопки и заголовка, как показано ниже:

<style name="CustomFont" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="fontFamily">@font/amatic</item>
        <item name="android:textAllCaps">false</item>
    </style>

Это дает нам совершенно новый вид диалогового окна, как показано ниже:

На этом урок заканчивается. Используемый выше шрифт доступен в исходном коде, прикрепленном ниже.

AndroidMaterialComponentDialog

Ссылка на проект на гитхабе