Кнопки материального дизайна в Android с примером
Компоненты материального дизайна (MDC Android) предлагают дизайнерам и разработчикам способ реализовать материальный дизайн в своих приложениях для Android. Эти компоненты, разработанные основной командой инженеров и дизайнеров пользовательского интерфейса Google, обеспечивают надежный рабочий процесс разработки для создания красивых и функциональных приложений для Android. Если вам нравится, насколько хороши элементы пользовательского интерфейса из компонентов дизайна материалов Google для Android, разработанные Google, то вот несколько шагов, которые необходимо выполнить, чтобы их получить, и один из них - компоненты дизайна материалов Google (MDC ) Кнопки. Кнопка - это пользовательский интерфейс, который используется для выполнения некоторых действий при нажатии или нажатии. В категории кнопок в компонентах материального дизайна Google в основном есть кнопки 4 типов:
- Содержащаяся кнопка
- Обрисованная кнопка
- Текстовая кнопка
- Кнопка-переключатель
Ниже демо для всех типов кнопок, которые мы собираемся создать в этом проекте.
Почему кнопки MDC в Android?
Прежде чем приступить к реализации всех типов кнопок, давайте разберемся, почему в Android предпочтение отдается этим материальным компонентам, а не обычным встроенным компонентам? Пожалуйста, обратитесь к следующим пунктам, чтобы понять это.
- Выбор этих материальных компонентов экономит время и делает приложение более похожим на материально спроектированное, и дает разработчикам возможность беспроблемного взаимодействия с пользователем.
- Если мы возьмем кнопку в качестве примера нам нужно создать рябь как корневой элемент в custom_button.xml внутри Drawable , а затем нам нужно установить фон кнопки как custom_button.xml, только тогда она будет создавать эффект ряби для обычная кнопка. Но в Google MDC нет необходимости вручную создавать рябь для кнопок.
- И главное в компонентах Google Material Design - это то, что они бесплатны и имеют открытый исходный код. Если вы хотите внести свой вклад в Google MDC, нажмите здесь.
- Еще одна замечательная вещь в компонентах Google Material Design заключается в том, что они поддерживают кроссплатформенность, включая Android , IOS , Flutter , веб-приложения.
- Если пользователь хочет переключить свою системную тему на темную тему, то Google MDC автоматически адаптируется и изменит свой цвет и фон в соответствии с темной темой. Но в случае с обычными виджетами они не адаптируются к смене системной темы. Различия между обычной кнопкой и кнопкой Google MDC при включенной темной теме показаны ниже:
Нормальное поведение содержащейся кнопки в темной теме.
Поведение кнопки Google MDC под темной темой.
Подход
Шаг 1. Создайте новый проект
Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать / запустить новый проект в Android Studio».
Шаг 2: Добавьте требуемую зависимость
Включите зависимость компонентов дизайна материалов Google в build.gradle файл . После добавления зависимостей не забудьте нажать кнопку « Синхронизировать сейчас» в правом верхнем углу.
implementation ‘com.google.android.material:material:1.3.0-alpha02’
Обратите внимание, что при синхронизации вашего проекта вам необходимо подключиться к сети и убедиться, что вы добавляете зависимость на уровне приложения. Gradle файл, как показано ниже.
Шаг 3. Измените базовую тему приложения
Перейдите в app -> src -> main -> res -> values -> styles.xml и измените базовую тему приложения. MaterialComponents содержит различные стили темы панели действий, можно вызвать любой из стилей темы панели действий MaterialComponents , кроме стилей AppCompat.
Почему нужно менять тему:
Давайте обсудим, почему нам нужно изменить тему панели действий на материальную тему приложения, чтобы вызывать все виджеты Google MDC в нашем приложении для Android:
- Потому что все компоненты материального дизайна Google собраны и упакованы внутри MaterialTheme для Android.
- Если вы вызываете тему панели действий AppCompat, вы не получите ошибку, но приложение выйдет из строя сразу после его запуска. Ниже приведен код файла styles.xml.
styles.xml
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <!-- Customize your theme here --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources> |
Если вы не можете получить вещи на шаге, упомянутом выше, вы можете обратиться к этому изображению.
Шаг 4. Измените цвета приложения
Можно изменить цветовую комбинацию приложения, и это необязательный шаг. Перейдите в файл app -> src -> main -> res -> colors.xml и выберите цветовую комбинацию.
colors.xml
<? xml version = "1.0" encoding = "utf-8" ?>< resources > < color name = "colorPrimary" >#0f9d58</ color > < color name = "colorPrimaryDark" >#006d2d</ color > < color name = "colorAccent" >#55cf86</ color ></ resources > |
Если вы не можете получить вещи на шаге, упомянутом выше, вы можете обратиться к этому изображению.
Шаг 5. Добавление кнопок Google MDC в файл activity_main.xml
Теперь в этом файле мы собираемся создать кнопку материала в соответствии с требованиями пользователя. Обратите внимание, что для каждого из стилей Button атрибут «style» отличается.
A. Стиль кнопок 1: содержащаяся кнопка
Содержащиеся кнопки выделяются большим акцентом и отличаются использованием высоты и заливки. Они содержат действия, которые являются основными для приложения. Обратите внимание, что содержащаяся кнопка является стилем по умолчанию, если стиль не установлен. Ниже приведен XML-код содержащейся кнопки.
XML
<? xml version = "1.0" encoding = "utf-8" ?>< androidx.constraintlayout.widget.ConstraintLayout android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" tools:ignore = "ExtraText" > <!-- Since this is the default type, you don't need to specify a style tag as long as you are using a Material Components Theme --> < Button android:id = "+id/contained_button" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Contained Button" android:textAllCaps = "false" app:layout_constraintBottom_toBottomOf = "parent" app:layout_constraintEnd_toEndOf = "parent" app:layout_constraintStart_toStartOf = "parent" app:layout_constraintTop_toTopOf = "parent" /> </ androidx.constraintlayout.widget.ConstraintLayout > |
Выходной интерфейс:
B. Стиль кнопок 2: кнопка с контуром
Обведенные кнопки - это кнопки со средним выделением. Они содержат действия, которые важны, но не являются основным действием в приложении. Они используются для большего акцента, чем текстовые кнопки, из-за обводки. Ниже приведен XML-код для кнопки с контуром.
XML
<? xml version = "1.0" encoding = "utf-8" ?>< androidx.constraintlayout.widget.ConstraintLayout android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" tools:ignore = "ExtraText" > <!--style attribute below is to be invoked for outlined button--> < Button android:id = "@+id/outlined_button" style = "@style/Widget.MaterialComponents.Button.OutlinedButton.Icon" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Outlined Button" android:textAllCaps = "false" app:layout_constraintBottom_toBottomOf = "parent" app:layout_constraintEnd_toEndOf = "parent" app:layout_constraintStart_toStartOf = "parent" app:layout_constraintTop_toTopOf = "parent" /> </ androidx.constraintlayout.widget.ConstraintLayout > |
Выходной интерфейс:
C. Стиль кнопок 3: текстовая кнопка
Текстовые кнопки обычно используются для менее выраженных действий, в том числе в диалогах и карточках. В карточках текстовые кнопки помогают акцентировать внимание на содержимом карточки. Обычно они используются для менее важных действий. Ниже приведен XML-код для кнопки «Текст».
XML
<? xml version = "1.0" encoding = "utf-8" ?>< androidx.constraintlayout.widget.ConstraintLayout android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" tools:ignore = "ExtraText" > <!--style attribute below is to be invoked for text button--> < Button android:id = "@+id/text_button" style = "@style/Widget.MaterialComponents.Button.TextButton" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Text Button" android:textAllCaps = "false" app:layout_constraintBottom_toBottomOf = "parent" app:layout_constraintEnd_toEndOf = "parent" app:layout_constraintStart_toStartOf = "parent" app:layout_constraintTop_toTopOf = "parent" /> </ androidx.constraintlayout.widget.ConstraintLayout > |
Выходной интерфейс:
D. Стиль кнопок 4: кнопка переключения
Кнопки переключения группируют набор действий, используя макет и интервал. Они используются реже, чем кнопки других типов. В компонентах дизайна материалов Google есть 2 типа кнопок переключения.
- Кнопка-переключатель
- Кнопка переключения со значками
Перед тем, как перейти к дизайну, сделайте несколько предварительных заданий по реализации этих двух кнопок. Поскольку теперь стили и атрибуты, такие как отступы и поля кнопок в группе переключения, должны быть изменены, поэтому в папке значений откройте файл styles.xml и вызовите следующий код:
XML
< resources > <!-- Base application theme --> < style name = "AppTheme" parent = "Theme.MaterialComponents.DayNight.DarkActionBar" > <!-- Customize your theme here. --> < item name = "colorPrimary" >@color/colorPrimary</ item > < item name = "colorPrimaryDark" >@color/colorPrimaryDark</ item > < item name = "colorAccent" >@color/colorAccent</ item > </ style > <!--these attributes and styles are only effected for the MaterialButtonToggleGroup widget--> < style name = "Widget.App.Button.OutlinedButton.IconOnly" parent = "Widget.MaterialComponents.Button.OutlinedButton" > < item name = "iconPadding" >0dp</ item > < item name = "android:insetTop" >0dp</ item > < item name = "android:insetBottom" >0dp</ item > < item name = "android:paddingLeft" >12dp</ item > < item name = "android:paddingRight" >12dp</ item > < item name = "android:minWidth" >48dp</ item > < item name = "android:minHeight" >48dp</ item > </ style > </ resources > |
Кнопка-переключатель:
Чтобы выделить группы связанных переключателей, группа должна иметь общий контейнер. Ниже приведен XML-код кнопки переключения.
XML
<? xml version = "1.0" encoding = "utf-8" ?>< androidx.constraintlayout.widget.ConstraintLayout android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" tools:ignore = "ExtraText" > <!--attribution of google MDC toggle button is little different from normal toggle button Instead of invoking ToggleButton you should invoke com.google.android.material.button.MaterialButtonToggleGroup as you can see below--> < com.google.android.material.button.MaterialButtonToggleGroup android:id = "@+id/toggleButton" android:layout_width = "wrap_content" android:layout_height = "wrap_content" app:layout_constraintBottom_toBottomOf = "parent" app:layout_constraintEnd_toEndOf = "parent" app:layout_constraintStart_toStartOf = "parent" app:layout_constraintTop_toTopOf = "parent" > < Button android:id = "@+id/button1" style = "?attr/materialButtonOutlinedStyle" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Button 1" /> < Button android:id = "@+id/button2" style = "?attr/materialButtonOutlinedStyle" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Button 2" /> < Button android:id = "@+id/button3" style = "?attr/materialButtonOutlinedStyle" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Button 3" /> </ com.google.android.material.button.MaterialButtonToggleGroup > </ androidx.constraintlayout.widget.ConstraintLayout > |
Выходной интерфейс:
Кнопка переключения со значками:
Чтобы реализовать кнопку-переключатель со значками, импортируйте значки только в папку с возможностью переноса. В этом примере мы импортировали значки format_black, format_italic, format_underline . Чтобы импортировать значки, щелкните правой кнопкой мыши папку с возможностью переноса, выберите «Создать» и выберите « Векторный объект», как показано ниже .
После нажатия на Vector Asset выберите значок, который вы хотите импортировать в папку для рисования, как показано ниже.
После импорта нужных значков вызовите код в файле activity_main.xml. Ниже приведен XML-код кнопки переключения со значками.
XML
<? xml version = "1.0" encoding = "utf-8" ?>< androidx.constraintlayout.widget.ConstraintLayout android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" tools:ignore = "ExtraText" > <!--this implementation does not creates individual toggle button it groups them together--> < com.google.android.material.button.MaterialButtonToggleGroup android:layout_width = "wrap_content" android:layout_height = "wrap_content" app:layout_constraintBottom_toBottomOf = "parent" app:layout_constraintEnd_toEndOf = "parent" app:layout_constraintStart_toStartOf = "parent" app:layout_constraintTop_toTopOf = "parent" > < Button android:id = "@+id/bold_button" style = "@style/Widget.App.Button.OutlinedButton.IconOnly" android:layout_width = "wrap_content" android:layout_height = "wrap_content" app:icon = "@drawable/ic_format_bold_black_24dp" /> < Button android:id = "@+id/italic_button" style = "@style/Widget.App.Button.OutlinedButton.IconOnly" android:layout_width = "wrap_content" android:layout_height = "wrap_content" app:icon = "@drawable/ic_format_underlined_black_24dp" /> < Button android:id = "@+id/underline_button" style = "@style/Widget.App.Button.OutlinedButton.IconOnly" android:layout_width = "wrap_content" android:layout_height = "wrap_content" app:icon = "@drawable/ic_format_italic_black_24dp" /> </ com.google.android.material.button.MaterialButtonToggleGroup > </ androidx.constraintlayout.widget.ConstraintLayout > |
Выходной интерфейс:
Для получения дополнительной информации и дополнительных компонентов, таких как диалог предупреждений, SnackBars и т. Д., Вы можете обратиться к официальной документации здесь. Для получения дополнительных ресурсов, а также дополнительных тем и настроек вы можете посетить эту ссылку.