Добавить в корзинуПозвонить
Найти в Дзене

Material button. Как сделать кнопки с радиусом и фоном.

Мне очень нравятся красивые закругленные кнопки из material. Но, к сожалению, вечно у меня с ними проблемы.

Мне очень нравятся красивые закругленные кнопки из material.

https://material.io/develop/web/components/buttons
https://material.io/develop/web/components/buttons

Но, к сожалению, вечно у меня с ними проблемы. Всё выглядит вроде бы просто:

Не забудьте указать зависимость "com.google.android.material:material:1.2.0"

Но, внезапно, с таким кодом красивая кнопка становится с прямыми углами и никакая магия не помогает сделать радиус. При этом, если убрать строчку background, то углы возвращаются, но кнопка становится серой. Да и cornerRadius не работает. Хоть 70dp поставь, а никак не реагирует. Мои решения:

  1. Заходим в стили и находим AppTheme. Для material надо указывать parent что-то от MaterialComponents. Я указала style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar". В xml заменяем слово background на backgroundTint. Теперь app:cornerRadius="70dp" в xml сработает.
  2. Если вы хотите поддерживать приложения ниже Android 5.0 то студия будет ругаться на строчку android:backgroundTint. Можно просто поднять minSdk до 21, но я не ищу простых путей (чувствую, что я ещё пожалею об этом). Идём в папку drawable и создаём файл с удобным для вас названием. Копируем туда код:

Возвращаемся в xml, где описывали кнопку. backgroundTint не удаляем, чтобы у нас остался нужный нам цвет. Вставляем android:background="@drawable/material_button", где material_button → название вашего файла, который создавали в drawable. Готово. Вы идеальны.

Кстати, вместо android:radius можете установить радиус только для одного конкретного угла. Или для нескольких. Просто напишите второй параметр под первым.

-2
-3

Весь код можно посмотреть здесь: https://github.com/Ladgertha/Savings-Calculator/commit/0d372fecc3cfa3cf0f2781d9502cfb5042136b6f

P.S. И уже после заметила, что для API < 21 нет эффекта нажатия, потому что мы прописываем background. Исправляется через общий selector: https://github.com/Ladgertha/Savings-Calculator/commit/e5c0f7274bd9f25f162a7f219ebac6124034095e

Что такое selector? По сути, мы просто там описываем, как должна выглядеть наша кнопка, когда с ней что-то происходит. Я прописала три состояния: на кнопку нажали, кнопка в фокусе, с кнопкой ничего не делают (это тот item, у которого не прописано state).

button_state_pressed и button_focused_state выглядят как файл material_button с shape, который создавался выше. Единственное отличие, что указывала разные цвета. При нажатии будет чуть темнее.