Обзор нововведений Android Design Support Library v28
И снова здравствуйте.
Приближаем к дате запуска наш новый курс «Разработчик Android», осталось всего ничего и осталось немного интересных материалов, которыми делимся со всеми, в том числе и потенциальными слушателями.
Недавно была анонсирована 28 версия Android Support Library. В текущей альфа-версии у нас появился доступ к набору новых интересных компонентов. В этой статье я хочу взглянуть на дополнения, которые были внесены в библиотеку Support Library в виде компонентов Material View.
MaterialButton — это виджет, который можно использовать для отображения кнопки в материальном стиле в пользовательском интерфейсе приложений. Этот класс наследуется от класса AppCompatButton, который вы, вероятно, уже используете в своих проектах, но в чем отличия? По умолчанию эта кнопка уже будет оформлена с материальным внешним видом без необходимости настраивать ее самостоятельно, используя флаг стиля. Мы можем использовать класс MaterialButton таким, какой он есть, ведь у него уже будет материальный внешний вид, который нам и нужен — рассматривайте его как более удобный класс.
Мы можем добавить эту кнопку в наш layout-файл следующим образом:
По умолчанию этот класс будет использовать акцентный цвет вашей темы для заполнения фона кнопок и белый цвет для текста на них. Если кнопка не заполняется, то тогда акцентный цвет будет использоваться для цвета текста на кнопке вместе с прозрачным фоном.
Если мы захотим добавить к кнопке некоторые дополнительные стили, мы можем сделать это, используя набор атрибутов стиля MaterialButton.
Компонент Chip позволяет отображать чипы в нашем layout. По сути, чип — это некоторый текст на закругленном фоне. Его цель заключается в отображении пользователю некой формы текстового набора, который может или не может быть выбран. Например, чипы могут использоваться для отображения списка выбираемых предложений для пользователя на основе текущего контекста в вашем приложении.
Существует также набор других атрибутов, которые можно использовать для дальнейшей стилизации чипа:
То же самое применимо и если мы хотим слушать взаимодействия с иконкой удаления. Для этого мы можем использовать функцию setOnCloseIconClickListener для регистрации событий удаления:
Если мы показываем набор чипов нашим пользователям, мы хотим убедиться, что они правильно сгруппированы вместе в нашем представлении. Для этого мы можем использовать компонент представления ChipGroup:
Если мы хотим использовать ChipGroup, нам просто нужно обернуть наши ChipView в родительский компонент ChipGroup:
По умолчанию ваши ChipView могут казаться немного прижатыми друг к другу. Если это так, вы можете добавить интервал к дочерним представлениям, используя следующие атрибуты ChipGroup:
Material Card View
CardView можно добавить к вашему layout вот так:
Вы можете дополнительно стилизовать CardView, используя два его атрибута:
BottomAppBar — это новый компонент, который позволяет нам отображать компонент, похожий на панель инструментов, в нижней части нашего layout. Это позволяет нам отображать компоненты для пользователя таким образом, чтобы взаимодействовать с ними было легче, чем, возможно, со стандартной панелью инструментов.
Вы можете добавить BottomAppBar в свой layout-файл так:
Похоже, что BottomAppBar должен иметь меню, назначенное ему, чтобы оно отображалось на экране. Это можно сделать программно следующим образом:
Когда дело доходит до стилизации BottomAppBar, есть несколько атрибутов, которые вы можете использовать.
На мой взгляд, это изящные дополнения к библиотеке Support Library. Я с нетерпением жду возможности использовать компоненты в материальном стиле прямо из коробки и я также рад найти случай, где может использоваться BottomAppBar. Я уверен, что требуется некоторое время, чтобы версия Support Library стала стабильной. Как обычно, я хотел бы услышать ваши мысли или комментарии об этих новых компонентах!
Ждём ваши комментарии и вопросы, которые можно оставить тут или можете зайти к Варваре на день открытых дверей.
Основы темизации в Android
Темизация приложения может быть одним из самых запутанных вопросов в разработке Android. В то время как проект постоянно увеличивается, становится все труднее поддерживать стили компонентов и тематическое оформление приложения. Если у вас нет хорошей системы дизайна, то можно получить противоречивое оформление и несоответствующие цвета в приложении. Хорошее понимание стилизации и темизации поможет вам создать единообразный пользовательский интерфейс во всем приложении. Кроме того, если вы думаете о миграции на Compose, плохая система дизайна может создать дополнительные сложности.
Хорошая система дизайна требует правильной настройки стилизации и темизации. Это способствует созданию единообразных и многократно используемых стилей для наших компонентов. Но как на самом деле создать правильную систему стилей и тем?
На этот вопрос нет однозначного ответа, его можно разделить на 5 частей.
Стиль по умолчанию
Стиль в сравнении с темой
Атрибуты
Примечание: Для доступа к встроенным атрибутам используется префикс android.
Допустим, вы хотите изменить его фон на белый. Вы можете сделать это, установив атрибут android:backgroundTint на белый.
Это хорошо, если вы измените только одну кнопку. Но как быть, если вы хотите изменить все красные кнопки на белые? Этого можно добиться:
Использование атрибута темы для android:backgroundTint
Создание и применение стиля ко всем кнопкам
Атрибут темы — это атрибут, который не принадлежит ни одному представлению и может быть изменен на уровне темы.
Добавление пользовательского атрибута темы:
Установка значения атрибута темы:
Затем вы можете использовать этот атрибут для установки фона ваших кнопок.
Установка фона кнопки с помощью пользовательского атрибута:
Но установка android:backgroundTint на myButtonBackground для всех кнопок может оказаться непосильной задачей. Чтобы решить эту проблему, мы создадим стиль и применим его ко всем кнопкам, используя стиль по умолчанию.
Стиль по умолчанию
Замечали ли вы, что если не задаете кнопке никакого фона, то все равно получаете фоновый drawable (выводимый средствами графических ресурсов объект)? Это происходит потому, что компонент Button (кнопка) имеет стиль по умолчанию, как и любой другой вид. Стиль по умолчанию используется в качестве базового стиля представления.
Давайте проверим стиль кнопки по умолчанию.
Давайте изменим стиль кнопки по умолчанию в нашей теме так, чтобы фон был красным.
Установка стиля кнопки по умолчанию с помощью атрибута buttonStyle :
Тогда при создании кнопки вы будете получать следующее.
Кнопка с красным фоном
Стиль кнопок по умолчанию в AppCompat :
Установка родительского стиля кнопки MyButton :
Затем мы получаем кнопку с красным фоном.
Кнопка с красным фоном
Стиль и тема
Вы можете изменить стиль представления тремя способами:
Изменение атрибута представления в файле макета
Создание нового стиля и применение его с помощью атрибута представления style в файле макета
Указание стиля по умолчанию
Давайте посмотрим, как можно изменить фон кнопки в файле макета.
Изменение фона кнопки в файле макета:
Теперь давайте проверим, как мы можем создать стиль и применить его к этой кнопке.
Стиль кнопки с пользовательским фоновым drawable:
Установка пользовательского стиля для кнопки:
Использовать атрибут темы colorPrimary внутри drawable фона кнопки.
Изменим значение colorPrimary внутри стиля MyButton
Фоновый drawable, который использует атрибут colorPrimary :
Изменение атрибута темы colorPrimary внутри стиля кнопки:
Тогда, несмотря на то, что мы установили основной цвет как красный, мы получим кнопку с фиолетовым фоном.
Кнопка с фиолетовым фоном
Это происходит потому, что представление знает только о своих собственных атрибутах; Кнопка (Button) не знает об атрибуте colorPrimary, поэтому он игнорируется.
Представление получает свои атрибуты из файла макета или атрибута стиля. Если стиль представления включает атрибут темы, он будет проигнорирован.
Как же тогда изменить атрибуты темы только для одного представления? Здесь на помощь приходит наложение тем.
Наложение тем
Наложение тем — это техника, используемая при переопределении атрибутов темы для любого представления или группы представлений. Наложение тем очень полезно, когда вы обновляете тему определенной части вашего приложения.
При применении наложения темы нужно выполнить два шага:
Создайте стиль, состоящий из атрибутов темы, которые необходимо изменить.
Наложение темы для кнопки:
У наложения темы нет родительского элемента.
Давайте применим это наложение к кнопке в файле макета.
Применение наложения темы с помощью атрибута android:theme :
Имейте в виду, что если наложение темы применяется к группе представлений, оно также будет применяться ко всем ее потомкам. Другими словами, тема каждого потомка группы представлений накладывается, когда наложение темы применяется к группе представлений.
Применение наложения темы к группе представлений:
Использование ContextThemeWrapper для наложения темы:
ContextThemeWrapper создает новый контекст (оборачивая заданный) своей собственной темой.
TextAppearance
Например, давайте создадим внешний вид текста для заголовка.
Использование стиля TextAppearance.StylesNThemes.Header в качестве оформления внешнего вида текста:
Давайте создадим стиль однострочного заголовка.
Однострочный стиль заголовка:
Теперь вы можете установить этот стиль с помощью атрибута style и повторно использовать его для любого текста.
Применение однострочного стиля заголовка к текстовому представлению:
Если вы хотите более глубоко погрузиться в изучение темы внешнего вида текста и приоритета стилей, я настоятельно рекомендую вам прочитать эту статью.
Заключение
Android-разработчиков с опытом от 3 лет и всех желающих приглашаем на онлайн-интенсив «Полный coverage. Покрываем Android-приложение юнит/интеграционными/UI тестами».
На интенсиве мы:
— Научимся покрывать android приложение юнит/интеграционными/UI тестами.
— Рассмотрим различные кейсы: покрытие тестами suspend функций, RX цепочек.
— Изучим популярные инструменты для написания тестов.
— Обсудим best practices по покрытию тестами.
Material 2.0 для разработчиков. Краткий обзор новых компонентов
В мае на Google I/O мы впервые увидели Material Design 2.0. Команда Google провела крупный рефакторинг и выпустила обновленную библиотеку дизайна. В ней появились новые компоненты и анимации. Мы следим за развитием Material Components с самого начала. Сейчас все находится на стадии RC1, и уже скоро выйдет в релиз. Под катом обзор новых и обновленных UI-компонентов для тех, кто еще не пробовал их в работе, но интересуется.
Android X вместо Support library
«Как это уже задеприкейтили? Я даже попробовать ее толком не успел», – сказал один мой знакомый, когда узнал о переезде Material Components в новый пакет. Действительно, поддержки support.design больше не будет, а на ее место придет com.google.android.material.
В рамках проекта Android X Google устроили рефакторинг всей библиотеки поддержки и архитектурных компонентов. Подробнее можно почитать в их блоге. Вот пример некоторых пакетов:
старый пакет
новый пакет
androidx.@
androidx.databinding.@
com.google.android.material.@
К счастью, для «мягкого» переезда на новую библиотеку, в студии появится инструмент, позволяющий автоматически обновить все зависимости. Сейчас это доступно уже в Android Studio Canary 3.3. Он призван автоматически находить все зависимости в импортах, в gradle файлах, в XML и в Proguard.
Material library
Все старые UI-компоненты из Support Library переехали в Material library, а ещё появились новые компоненты. Добавим в проект новую зависимость:
Обратной совместимости с Support не предполагается. Придется избавиться от всех остальных зависимостей, где встречается слово support, и заменить их на соответствующие из Android X. Иначе проект просто не соберется из-за множества конфликтов. Для тестовой сборки мне пришлось даже заменить Glide на Picasso, потому что первый тянет за собой android-support. На большом проекте вручную это делать будет неудобно.
Однако для тестирования Material Components можем воспользоваться support:design версии 28-beta, куда Google любезно продублировала все актуальные компоненты. Несмотря на это, 28 версия Support library будет последней, и в дальнейшем ее поддержка прекратится. А теперь давайте посмотрим на новые компоненты, и измененные старые.
BottomAppbar
BottomAppbar – это что-то похожее на Appbar, только с возможностью прикрепления Floating Action Button и вырезом под него. Предназначен для работы внутри CoordinatorLayout.
Вот некоторые параметры, которые мы можем кастомизировать:
На момент написания статьи, BottomAppBar доделан не до конца. Например, нельзя разместить NavigationIcon в центре по вертикали, но, наверное, это скоро допилят.
Chips
Chip – еще одна новая View в библиотеке. С её помощью можно удобно показывать перечисление небольших объектов. Например, фильтры или какие-нибудь подсказки для пользователя. По гайдлайнам Chip обладает следующими свойствами:
Реализация в Material library представляет из себя расширенную версию AppCompatCheckBox, и может порадовать нас такими кастомизируемыми параметрами:
Приятно удивило наличие ChipGroup, являющегося наследником FlexboxLayout, которого наконец-то включили в библиотеку дизайна.
BackDrop
BackDrop – новый для Android паттерн навигации. Есть основной контент, который расположен на переднем плане, и дополнительная область, лежащая позади (обычно это меню навигации). Если нужно добраться до контента сзади, то передний план съезжает вниз до нужного уровня.
Состоит Backdrop из трех элементов:
На момент написания статьи он еще не реализован в библиотеке, и в соответствующем репозитории пока пусто. Поэтому пришлось делать свою реализацию, обернув ее в библиотеку:
Просто прикрепляем BackdropBehavior на нужный Front Container и передаем ему Toolbar и Back Container.
Kotlin
Это просто один из вариантов реализации. Но для моего кейса получилось удобно. Думаю, решение Google будет несколько отличаться. Если вдруг есть предложения, то с радостью готов обсудить их в комментариях под статьей.
MaterialButtons
MaterialButtons – обновленные более кастомизируемые кнопки. У них есть следующие параметры для кастомизации:
Конечно, эти стили для кнопок всегда можно сделать самостоятельно. Но теперь кастомизация кнопок хорошо работает «из коробки», и это очень удобно.
Например, чтобы сделать кнопку с крестиком, раньше пришлось бы писать два XML файла:
Layout:
bg_button.xml
Теперь описать кнопку можно сразу на месте:
Text Fields
Text Fields – тоже претерпел изменения. Теперь текстовому полю «из коробки» можно добавить обводку по контуру, сделать его залитым каким-то цветом, или закруглить отдельные углы.
Как и раньше, можно использовать конструкцию из InputLayout с дочерним EditText, для более удобного для отображения подсказок, ошибок и прочего выделения текста.
Изменения тоже не очень существенные, но кастомные решения можно разрабатывать теперь намного быстрее. С точки зрения бизнеса, скорость разработки имеет значение, и тут Google постарались неплохо.
MaterialCardView
MaterialCardView – это все старая CardView, но теперь с обводкой по контуру, как у кнопок.
Итого
Существенных изменений не так много. Новые механизмы кастомизации просто позволяют сделать чуточку проще то, что мы все делали и раньше. Зато появилась проблема совместимости с Support library. Разработчикам библиотек придется переезжать на Android X, что отнимет много времени и нервов. Особенно, если учесть, какая кодовая база сейчас support-ориентированна. Несмотря на то, что Google предоставляет инструмент для автоматизации переезда с заменой всех импортов, работает он не идеально. Подобные переезды на своих проектах все-таки придется пережить с некоторыми трудностями.
На данный момент не все заявленные Material-компоненты реализованы корректно, а некоторые не реализованы совсем. Будем смотреть, будем пробовать.
Lollipop’s backgroundTint has no effect on a Button
I have a Button in my Activity, and I’d like it to have my theme’s accent color. Instead of making my own drawables like we had to do pre-Lollipop, naturally I’d like to use the new backgroundTint attribute.
Unfortunately it has no effect, the button stays gray.
I also tried doing it programmatically in my Activity, which didn’t change anything.
Why is my tint ignored?
EDIT: Just to clarify, I am indeed testing on a Lollipop device. Other widgets (e.g. EditText) are correctly and automatically tinted.
15 Answers 15
The bad news
Like BoD says, it’s meaningless to tint a Button’s background in Lollipop 5.0 (API level 21).
The good news
The great news
The new support library (version 22.1+) adds backward-compatible tinting support to lots of components, including AppCompatButton!
You should of course get the ColorStateList from a color resource, but I was lazy, so.
Oh, and don’t forget to base your app theme on one of the Theme.AppCompat themes, or the compat views will be very, very sad. 😉
This worked on both 2.3.7 (Gingerbread MR1) and 5.0 (Lollipop ‘Classic’).
It seems that tinting a ripple drawable is meaningless (and the default background of a button is a ripple drawable).
In fact, after looking at the platform’s default button drawable, I found the «correct» way to do this:. You have to define this in your theme:
(Of course this is only for level 21+.)
Warning: since this is defined in a theme, this will use the given color for all the buttons (at least all of the buttons in activities using that theme.)
As a bonus, you can also change the ripple color by defining this:
To resolve issues related to tinting on Android 5.0.x I use something like this:
It uses the support method only for API 21 and the ViewCompat one for all other cases.
I usually do it dynamically by using PorterDuff:
You can check different blending modes here and nice examples here.
Tested on API 19 through API 27
I think you need to have android:background set to make android:backgroundTint work.
Just use app:backgroundTint instead of android:backgroundTint
But after release of Android Support Library, revision 23.2.1 (March 2016) This bug is solved.
Issue : FloatingActionButton.setBackgroundTintList(@Nullable ColorStateList tint) no longer changes background color
update Support Library to Android Support Library to 23.2.1
Use design support library(23.2.1) and appcompatwidgets as below
AppCompat (aka ActionBarCompat) started out as a backport of the Android 4.0 ActionBar API for devices running on Gingerbread, providing a common API layer on top of the backported implementation and the framework implementation. AppCompat v21 delivers an API and feature-set that is up-to-date with Android 5.0
How to add button tint programmatically
In the new AppCompat library, we can tint the button this way:
How can I set the tint of the button programmatically in my code? I’m basically trying to implement a conditional coloring of the button based on some user input.
20 Answers 20
According to the documentation the related method to android:backgroundTint is setBackgroundTintList(ColorStateList list)
Update
Follow this link to know how create a Color State List Resource.
then load it using
where contextInstance is an instance of a Context
But I would recommend you to use a support library drawable tinting which just got released yesterday:
You can find more in this blog post (see section «Drawable tinting»)
Seems like views have own mechanics for tint management, so better will be put tint list:
here’s how to do it in kotlin:
In properly extending dimsuz’s answer by providing a real code situation, see the following code snippet:
This solution is for the scenario where a drawable is used as the button’s background. It works on pre-Lollipop devices as well.
The simple way to do it
Have you tried something like this?
note that getResources() will only work in an activity. But it can be called on every context too.
You can use DrawableCompat e.g.
this is easily handled in the new Material Button from material design library, first, add the dependency:
then in your XML, use this for your button:
and when you want to change the color, here’s the code in Kotlin, It’s not deprecated and it can be used prior to Android 21:
I had a similar problem. I wished to colour a complex drawable background for a view based on a color (int) value. I succeeded by using the code:
Where color is an int value representing the colour required. This represents the simple xml ColorStateList:
To my understanding this works regardless of android version.
You can improve it even better by creating an extension function for your MaterialButton in order to make you code more readable and your coding little more convenient:
Then, you can use your function everywhere like this:
For ImageButton you can use:
In addition to Shayne3000‘s answer you can also use a color resource (not only an int color). Kotlin version:
There are three options for it using setBackgroundTintList
The suggested answer here doesn’t work properly on android 5.0 if your XML based color state list references themed attributes.. For instance, I have an xml color state list like so:
Using this as my backgroundTint from xml works just fine on android 5.0 and everything else. However if I try to set this in code like this:
