Как включить скрытые стили оформления Android 10 на смартфонах Sony Xperia
Одним из нововведений операционной системы Android 10 является возможность смены в ней стилей (тем) оформления интерфейса, задавая форму значков, шрифт, цветовой акцент и т. д. Однако, не на всех смартфонах, получивших обновление до этой версии системы эта возможность присутствует.
К числу таких устройств, в частности, относятся смартфоны Sony Xperia, на которых отсутствуют приложение Pixel Themes, отвечающее за эту функцию. Однако, разработчики компании сохранили разнообразие значков и цветовых акцентов для элементов управления, которые при желании вы сможете активировать воспользовавшись инструкцией ниже.
Как воспользоваться скрытыми стилями оформления Android 10 на смартфонах Sony Xperia
Сделать это можно с помощью команды cmd оболочки ADB. Для этого вам потребуется:
1. Компьютер, ноутбук или Windows планшет* с программой ADB (и Fastboot), а также драйвером ADB. Скачать свежие версии ADB и Fastboot от Google вы можете по следующим адресам:
*Если компьютера, ноутбука или Windows планшета у вас под рукой нет, то вы можете воспользоваться другим Android устройством. Как это сделать описано в этой статье: ADB и Fastboot без компьютера, с помощью Android смартфона или планшета [Инструкция].
2. Включите в настройках системы смартфона режим отладки через USB. Где его найти и как включить описано в этом материале
3. Подключите ваш телефон к устройству с программой ADB через USB кабель, после чего на компьютере перейдите в папку, в которую вы поместили ранее скачанную программу ADB и запустите окно командной строки Windows (терминал Linux/Mac). На Windows устройстве для этого нужно набрать в адресной строке Проводника команду cmd и нажать «Enter».
В открывшемся окне командной строки выполните команду:
Если вы всё делали по инструкции, то ADB сообщит вам о том, что ваш смартфон подключен к компьютеру, но не авторизован, а на экране смартфона появится запрос на разрешение отладки с этого компьютера. Разрешите её нажав на кнопку «ОК».
Теперь можно приступать к смене стилей оформления.
4. В окне командной строки выполните команду:
5. Теперь, если вы хотите сменить цвет значков, выполните следующую
cmd overlay enable com.android.theme.color.COLOR_NAME
Заменив COLOR_NAME одним из цветов: purple, black, cinnamon, green, ocean, orchid или space.
Например, команда cmd overlay enable com.android.theme.color.purple сделает значки фиолетовыми
6. С помощью команды:
cmd overlay list
вы можете увидеть весь список стилей
Как вы уже, наверняка, догадались, чтобы сменить стиль значка, вам нужно дать команду:
cmd overlay enable com.android.theme.icon.СТИЛЬ_значка
Где СТИЛЬ_значка может быть следующим: squircle, teardrop, roundedrect
Таким же образом вы можете сменить шрифт, а вернуться к предыдущему стилю можно с помощью команды
cmd overlay disable «выбранный.вами.в.настоящий.момент.стиль»
Похожие материалы:
- Android 11 Beta 1.5 выпущена и принесла с собой целый ряд исправлений
- Magisk 20.4 выпущен. Отключенный по умолчанию MagiskHide и целый ряд прочих исправлений и улучшений
- Команды ADB и Fastboot: более 50 команд для управления, прошивки и обслуживания вашего Android устройства [Перечень, описание]
- Кастомные Android прошивки. LineageOS 17.1 позволит обновить до Android 10 целый ряд старых смартфонов начиная с 2013 года выпуска
- Кастомные прошивки. Paranoid Android вернулся и теперь его сборки базируются на Android 10 (Обновлено: свежая сборка, поддержка новых смартфонов)
Свежие материалы:
Material Theme
Material Theme — это стиль пользовательского интерфейса, который определяет внешний вид представлений и действий, начиная с Android 5.0 (Lollipop). Material Theme встроена в Android 5.0, поэтому используется как в пользовательском интерфейсе системы, так и в приложениях. Material Theme не является «темой» в смысле параметра внешнего вида на уровне системы, который пользователь может динамически выбирать в меню параметров. Скорее, material Theme можно рассматривать как набор связанных встроенных базовых стилей, которые можно использовать для настройки внешнего вида приложения.
Android предоставляет три варианта материальной темы:
- Theme.Material — темная версия темы материала; Это вариант по умолчанию в Android 5.0.
- Theme.Material.Light — Облегчаемая версия темы материала.
- Theme.Material.Light.DarkActionBar — светлая версия темы material, но с темной панелью действий.
Примеры этих вариантов темы материалов приведены здесь:
Вы можете наследоваться от темы material, чтобы создать собственную тему, переопределив некоторые или все атрибуты цвета. Например, можно создать тему, которая является производным от Theme.Material.Light , но переопределяет цвет панели приложения в соответствии с цветом вашей торговой марки. Вы также можете стили для отдельных представлений; Например, можно создать стиль для CardView , который имеет более скругленные углы и использует более темный цвет фона.
Вы можете использовать одну тему для всего приложения или разные темы для разных экранов (действий) в приложении. Например, на снимках экрана выше одно приложение использует разные темы для каждого действия, чтобы продемонстрировать встроенные цветовые схемы. Переключатели переключают приложение на различные действия и, как результат, отображают разные темы.
Поскольку material Theme поддерживается только в Android 5.0 и более поздних версиях, вы не можете использовать ее (или пользовательскую тему, производную от Material Theme) для создания темы приложения для запуска в более ранних версиях Android. Однако вы можете настроить приложение для использования material Theme на устройствах Android 5.0 и корректно вернуться к более ранней теме при запуске в более старых версиях Android (дополнительные сведения см. в разделе Совместимость этой статьи).
Требования
Для использования новых функций темы материалов Android 5.0 в приложениях на основе Xamarin требуется следующее:
- Xamarin.Android — Xamarin.Android 4.20 или более поздней версии необходимо установить и настроить с помощью Visual Studio или Visual Studio для Mac.
- Пакет SDK для Android — android 5.0 (API 21) или более поздней версии должен быть установлен через диспетчер пакетов SDK для Android.
- Java JDK 1.8 — JDK 1.7 можно использовать, если вы специально ориентированы на API уровня 23 и более ранних версий. JDK 1.8 доступен в Oracle.
Сведения о настройке проекта приложения Android 5.0 см. в статье Настройка проекта Android 5.0.
Использование встроенных тем
Самый простой способ использовать тему material — настроить приложение для использования встроенной темы без настройки. Если вы не хотите явно настраивать тему, приложение по умолчанию будет иметь Theme.Material значение (темная тема). Если в приложении есть только одно действие, можно настроить тему на уровне действия. Если приложение содержит несколько действий, можно настроить тему на уровне приложения, чтобы она использовала одну и ту же тему для всех действий, или можно назначить разные темы для разных действий. В следующих разделах объясняется, как настроить темы на уровне приложения и на уровне действий.
Создание тем для приложения
Чтобы настроить все приложение для использования варианта Material Theme, задайте android:theme для атрибута узла приложения в AndroidManifest.xml одно из следующих значений:
- @android:style/Theme.Material — темная тема.
- @android:style/Theme.Material.Light — светлая тема.
- @android:style/Theme.Material.Light.DarkActionBar — светлая тема с темной панелью действий.
В следующем примере приложение MyApp настраивается для использования светлой темы:
Кроме того, можно задать атрибут приложения Theme в Файле AssemblyInfo.cs (или Properties.cs). Пример:
[assembly: Application(Theme="@android:style/Theme.Material.Light")] Если для темы приложения задано значение @android:style/Theme.Material.Light , каждое действие в MyApp будет отображаться с помощью Theme.Material.Light .
Создание тем для действия
Чтобы задать тему действия, добавьте Theme параметр [Activity] в атрибут над объявлением действия и назначьте Theme варианту Темы материала, который вы хотите использовать. В следующем примере действие Theme.Material.Light темой является :
[Activity(Theme = "@android:style/Theme.Material.Light", Label = "MyApp", MainLauncher = true, Icon = "@drawable/icon")] Другие действия в этом приложении будут использовать темную цветовую схему по умолчанию Theme.Material (или, если она настроена, параметр темы приложения).
Использование пользовательских тем
Вы можете улучшить свою торговую марку, создав настраиваемую тему, которая будет стили вашего приложения с использованием цветов вашей торговой марки. Чтобы создать пользовательскую тему, необходимо определить новый стиль, производный от встроенного варианта темы материала, переопределяя атрибуты цвета, которые требуется изменить. Например, можно определить пользовательскую тему, которая является производным от Theme.Material.Light.DarkActionBar , и изменить цвет фона экрана на бежевый, а не белый.
Material Theme предоставляет следующие атрибуты макета для настройки:
- colorPrimary — цвет панели приложения.
- colorPrimaryDark — цвет строки состояния и контекстных строк приложения; Обычно это темная версия colorPrimary .
- colorAccent — цвет элементов управления пользовательского интерфейса, таких как проверка поля, переключатели и текстовые поля редактирования.
- windowBackground — цвет фона экрана.
- textColorPrimary — цвет текста пользовательского интерфейса на панели приложения.
- statusBarColor — цвет строки состояния.
- navigationBarColor — цвет панели навигации.
Эти области экрана помечены на следующей схеме:
По умолчанию statusBarColor для параметра задано colorPrimaryDark значение . Можно задать сплошной statusBarColor цвет или задать для него @android:color/transparent значение , чтобы сделать строку состояния прозрачной. Панель навигации также можно сделать прозрачной, задав для параметра значение navigationBarColor @android:color/transparent .
Создание пользовательской темы приложения
Вы можете создать настраиваемую тему приложения, создав и изменив файлы в папке Resources проекта приложения. Чтобы создать стиль приложения с помощью пользовательской темы, выполните следующие действия.
- Создайте файлcolors.xml в разделе Ресурсы и значения . Этот файл используется для определения пользовательских цветов темы. Например, можно вставить следующий код в colors.xml , чтобы приступить к работе:
#3498DB #77D065 #B455B6 #738182 
- Измените этот пример файла, чтобы определить имена и коды цветов для цветовых ресурсов, которые будут использоваться в пользовательской теме.
- Создайте папку Resources/values-v21 . В этой папке создайте файлstyles.xml : Обратите внимание, что resources/values-v21 относится к Android 5.0— более ранние версии Android не будут считывать файлы в этой папке.
- resources Добавьте узел для styles.xml и определите style узел с именем пользовательской темы. Например, ниже приведен файлstyles.xml , определяющий MyCustomTheme (производный от встроенного Theme.Material.Light стиля темы):
- На этом этапе приложение, использующее MyCustomTheme , будет отображать стоковую Theme.Material.Light тему без настроек:
- Добавьте настройки цвета в styles.xml , определив цвета атрибутов макета, которые требуется изменить. Например, чтобы изменить цвет панели приложения на my_blue и изменить цвет элементов управления пользовательского интерфейса на my_purple , добавьте переопределения цвета в styles.xml , которые ссылаются на ресурсы цвета, настроенные в colors.xml:
После внесения этих изменений приложение, использующее MyCustomTheme , будет отображать цвет панели приложения в my_blue и элементы управления пользовательского интерфейса в my_purple , но использовать Theme.Material.Light цветовую схему везде:
В этом примере MyCustomTheme заимствует цвета фона Theme.Material.Light , строки состояния и текста, но изменяет цвет панели приложения на my_blue и задает цвет переключателя на my_purple .
Создание пользовательского стиля представления
Android 5.0 также позволяет стилистику индивидуального представления. После создания colors.xml и styles.xml (как описано в предыдущем разделе) можно добавить стиль представления для styles.xml. Чтобы создать стиль для отдельного представления, выполните следующие действия.
- Измените Resources/values-v21/styles.xml и добавьте style узел с именем пользовательского стиля представления. Задайте настраиваемые атрибуты цвета для представления в этом style узле. Например, чтобы создать пользовательский стиль CardView, который имеет более скругленные углы и использует my_blue в качестве карта цвета фона, добавьте style узел для styles.xml (внутри resources узла) и настройте цвет фона и радиус угла:
- В макете style задайте атрибут для этого представления, чтобы он соответствовал имени пользовательского стиля, выбранному на предыдущем шаге. Пример:
На следующем снимку экрана показан пример по умолчанию CardView (показано слева) по сравнению CardView со стилем с пользовательской CardView.MyBlue темой (показана справа):
В этом примере пользователь CardView отображается с цветом my_blue фона и радиусом угла 18dp.
Совместимость
Чтобы настроить стиль приложения таким образом, чтобы оно использовало Material Theme в Android 5.0, но автоматически меняется на нисходящий совместимый стиль в более старых версиях Android, выполните следующие действия:
- Определите настраиваемую тему в Resources/values-v21/styles.xml , которая является производным от стиля темы материалов. Пример:
- Определите пользовательскую тему в разделе Resources/values/styles.xml , которая является производным от старой темы, но использует то же имя темы, что и выше. Пример:
- В AndroidManifest.xmlнастройте приложение с пользовательским именем темы. Пример:
- Кроме того, вы можете задать стиль определенного действия с помощью пользовательской темы:
[Activity(Label = "MyActivity", Theme = "@style/MyCustomTheme")] Если в теме используются цвета, определенные в файлеcolors.xml , не забудьте поместить этот файл в раздел Resources/values (а не Resources/values-v21), чтобы обе версии пользовательской темы могли получить доступ к определениям цветов.
Когда приложение выполняется на устройстве Android 5.0, оно будет использовать определение темы, указанное в разделе Resources/values-v21/styles.xml. Когда это приложение выполняется на более старых устройствах Android, оно автоматически возвращается к определению темы, указанному в разделе Resources/values/styles.xml.
Дополнительные сведения о совместимости тем с более старыми версиями Android см. в разделе Альтернативные ресурсы.
Итоги
В этой статье представлен новый стиль пользовательского интерфейса Темы материалов, включенный в Android 5.0 (Lollipop). В нем описаны три встроенных варианта темы материалов, которые можно использовать для создания стиля приложения, объясняется, как создать пользовательскую тему для фирменной символики приложения, а также приведен пример темы для отдельного представления. Наконец, в этой статье объясняется, как использовать тему материалов в приложении, сохраняя при этом нисходящую совместимость с более старыми версиями Android.
Связанные ссылки
- ThemeSwitcher (пример)
- Введение в Lollipop
- CardView
- Альтернативные ресурсы
- Android Lollipop
- Android Pie Developer
- Material Design
- Принципы проектирования материалов
- Обеспечение совместимости
Темы и стили
Чтобы наше приложение было стильным, можно воспользоваться специальной темой. Тема — это коллекция стилей, которые обеспечивают профессиональный вид приложению, чтобы оно было похоже на родные приложения Android. Сама система Android уже имеет несколько предустановленных тем, которыми можно воспользоваться в своих целях. Вам достаточно только указать имя темы в манифесте.
В предыдущем примере мы учились переключаться на другой экран, чтобы увидеть новое окно О программе. Сделаем это окно диалоговым, чтобы оно не занимало весь экран.
Откройте снова файл манифеста AndroidManifest.xml из прошлого урока и измените строчку для активности AboutActivity, указав тему.
Запустив программу, вы увидите, что внешний вид окна «О программе» стал уже другим. Сравните.
Обратите внимание, что теперь появляется не окно во весь экран, а диалоговое окно в центре экрана. При этом остальная часть экрана затемняется.
Похожие темы: android:theme=»@style/Theme.AppCompat.Light.Dialog», android:theme=»@style/Theme.AppCompat.Light.Dialog.MinWidth», android:theme=»@style/Theme.AppCompat.Dialog.MinWidth».
Тему можно применить не только к отдельной активности, но и ко всем активностям приложения, если прописать в теге application.
Кстати, вы можете разработать свою тему на основе существующих и сохранить ее в файле res/values/styles.xml.
Стили и темы — это такие же ресурсы, как и строки, изображения и т. д. Android обеспечивает некоторые заданные по умолчанию стили и темы, которые вы можете использовать в приложениях. При необходимости вы можете определить свой собственный стиль и тему для создаваемого приложения.
Стили
Стиль — это один или несколько сгруппированных атрибутов форматирования, которые отвечают за внешний вид и поведение элементов или окна. Стиль может задавать такие свойства, как ширину, отступы, цвет текста, размер шрифта, цвет фона и так далее. Сами стили хранятся в XML-файлах, отдельно от файлов разметки.
Подобное разделение напоминает использование каскадных стилей CSS для веб-документов, которые также отвечают за стили HTML-элементов и хранятся в отдельных файлах.
Предположим, у нас есть следующий код разметки для TextView:
Мы можем вынести все свойства в файл стилей следующим образом:
res/values/styles.xml
Тогда в файле разметки теперь будет так:
Как видите, мы удалили все свойства для текста из файла разметки и разместили их в файле стилей в ресурсе под именем MyTextStyle, который содержит теперь все необходимые свойства.
Создать файл со стилями несложно. Создаем новый XML-файл в папке res/values/ вашего проекта. Имя файла не имеет значения, главное, чтобы расширение было XML, а сам файл находился в указанной папке. В проекте, создаваемом студией, уже есть готовый файл res/values/styles.xml, в который вы можете добавить новые стили. А также вы можете создать свой отдельный файл стилей.
Корневым узлом файла должен быть элемент . Для каждого элемента, которому требуется стиль, нужно добавить элемент с уникальным именем. Далее создаются элементы для каждого свойства и присваиваются им имена, которые отвечают за выбранное свойство. Значением элемента должно выступать ключевое слово, цвет в шестнадцатеричном значении, ссылка на другой тип ресурсов или другое значение в зависимости от свойства стиля. Ниже представлен образец такого стиля:
Во время компиляции все свойства из файла стилей будут извлечены и применены к элементам.
Атрибут parent для элемента style является необязательным и позволяет задавать идентификатор ресурса другого стиля, из которого нужно наследовать свойства. При этом вы можете переопределить свойства в случае необходимости.
Быстрое создание стилей через Android Studio
Если вы решили вынести некоторые свойства компонентов в стили, то необязательно это делать вручную. В студии есть удобный инструмент для быстрого создания ресурсов стилей.
В текстовом режиме щёлкните правой кнопкой мыши на нужном компоненте и в контекстном меню выбирайте пункт Refactor | Extract | Style. Далее укажите имя стиля и выберите требуемые параметры для экспорта. Студия самостоятельно создаст стиль в файле styles.xml и автоматически применит созданный ресурс в layout-файле.
Наследование стилей
Наследование — мощный и полезный механизм, позволяющий не изобретать велосипед, а использовать готовые проверенные наработки. С помощью атрибута parent в элементе style вы можете наследовать нужные свойства из существующих стилей, а также переопределить некоторые свойства или добавить свои дополнительные свойства. Предположим, мы решили наследоваться от существующего системного стиля Android для текстовых сообщений и слегка модифицировать его.
Если вы собираетесь наследоваться от собственных стилей, то использовать атрибут parent не нужно. Просто используйте префикс имени наследуемого стиля перед создаваемым новым стилем, разделяя имена стилей точкой. Например, для создания нового стиля, который наследуется от стиля MyTextStyle, созданного нами ранее, где мы хотим получить красный текст, используйте следующий способ:
Как видите, нам не пришлось использовать атрибут parent в теге style, потому что имя стиля начинается с имени MyTextStyle (созданный нами стиль). Теперь наш стиль наследует все свойства от стиля родителя, при этом мы изменили одно свойство android:textColor, чтобы текст выводился красным цветом. Вы можете ссылаться на новый стиль через конструкцию @style/MyTextStyle.Red.
Вы можете продолжать наследоваться дальше много раз, добавляя новые имена через точку. Допустим, мы хотим расширить свойство MyTextStyle.Red, чтобы текст выводился более крупным шрифтом:
Итак, мы наследовались от стилей MyTextStyle и MyTextStyle.Red, а затем добавили новое свойство android:textSize.
Не забывайте, что данная техника наследования применима только к собственным стилям. Для наследования системных стилей типа TextAppearance необходимо использовать атрибут parent.
Свойства стиля
Разобравшись с созданием стилей, рассмотрим различные свойства, определяемые в элементе item. Мы уже встречались с такими свойствами, как layout_width и textColor. На самом деле свойств гораздо больше.
Для поиска свойств, которые применимы к заданному View, можно обратиться к документации и просмотреть все поддерживаемые свойства. Так все атрибуты, перечисленные в таблице атрибутов класса TextView могут быть использованы для элементов TextView или EditText. Например, у данных элементов есть свойство android:inputType:
Но вместо этого мы можем также создать стиль для элемента EditText, который будет включать в себя данное свойство:
В файле разметки теперь можно написать так:
На первый взгляд вам возможно покажется, что подобный подход отнимает слишком много времени. Но в больших проектах повторное использование стиля поможет вам сэкономить и время и силы.
Для просмотра всех существующих стилей вы можете посмотреть исходники Android. Найдите папку, в которую вы устанавливали Android SDK, там можно найти нужные исходники. Например, у меня путь к исходникам стилей Android API 17 выглядит следующим образом: D:\Android\android-sdk-windows\platforms\android-17\data\res\values\styles.xml. Помните, что все объекты View не поддерживает сразу все существующие атрибуты, поэтому используйте только специфичные стили для выбранного элемента. Но если вы по ошибке зададите ошибочный стиль для View, то это не вызовет краха приложения. Элемент View будет использовать только подходящие свойства и игнорировать чужие для него свойства.
Существуют также свойства, которые не поддерживаются ни одним элементом View и применимы только как тема. Подобные стили действуют сразу на всё окно, а не на отдельный элемент. Например, есть тема, скрывающая заголовок приложения, строку состояния или изменяющая фон окна. Подобные стили легко определить по слову window, с которого начинается название стиля: windowNoTitle, windowBackground (о них ниже).
Не забывайте использовать префикс android перед именем в каждом элементе item: .
Отдельно стоит отметить создание стиля для кнопки. У кнопки есть несколько состояний — обычное, в фокусе, нажатое, нажатое с фокусом. Поэтому для кнопки нужно создать четыре отдельных стиля, чтобы кнопка выглядела профессионально.
Извлечение свойств в стили
Если вы решили в своём проекте использовать стили и вам нужно быстро переместить нужные атрибуты, то Android Studio предлагает быстрый механизм для этой операции. В текстовом режиме ставите курсор на названии компонента, например, ImageView, затем щёлкаете правой кнопкой мыши и выбираете Refactor | Extract | Style. . В диалоговом окне выбираете нужные атрибуты для переноса в стили и выбираете имя стиля.
Динамическое изменение стилей
Ни разу не приходилось пользоваться, но вдруг пригодится.
Context themedContext = new ContextThemeWrapper(baseContext, R.style.MyTheme); // in LayoutInflater View view = LayoutInflater.from(themedContext) .inflate(R.layout.mylayout, null); // in constructor View view = new View(themedContext);
Тема
Тема — это более ёмкое понятие. По существу, тема — стиль, который относится ко всему экрану активности или приложению, а не к отдельному компоненту приложения. Таким образом, тема имеет свои атрибуты и свою область применения.
Темы похожи на определения стилей. Точно так же, как стили, темы объявляются в XML-файле элементами , и ссылаются на них тем же самым способом. Различие состоит в том, что тема добавляется ко всему приложению или к отдельной активности через элементы и в файле манифеста приложения, т. к. темы не могут быть применены к отдельным компонентам.
Чтобы установить тему, откройте файл AndroidManifest.xml и отредактируйте тег , чтобы он включал в себя атрибут android:theme с указанием имени стиля:
Если вы хотите, чтобы тема относилась не ко всему приложению, а к отдельной активности, то атрибут android:theme нужно добавить в тег .
Во многих случаях нет необходимости придумывать свои стили и темы, так как Android содержит множество собственных встроенных тем. Например, вы можете использовать тему Dialog, чтобы окно приложения выглядело как диалоговое окно (Смотри выше).
Если вам нравится тема, но несколько свойств всё-таки хотите подправить под себя, то просто добавьте тему как родительскую тему к своей теме. Например, мы хотим модифицировать стандартную тему Theme.Light, чтобы использовать свои цвета.
#b0b0ff
Теперь мы можем использовать свой стиль вместо Theme.Light в манифесте:
Небольшой список свойств, которые используются для настройки собственных тем.
- android:windowNoTitle: используйте значение true, чтобы скрыть заголовок
- android:windowFullscreen: используйте значение true, чтобы скрыть строку состояния и освободить место для приложения
- android:windowBackground: ресурс цвета или drawable для фона
- android:windowContentOverlay: Drawable, который рисуется поверх содержимого окна. По умолчанию, это тень от строки состояния. Можно использовать null (@null в XML-файле) для удаления ресурса.
В Android 5.0 появились новые темы, которые получили название Material Design.
- @android:style/Theme.Material (тёмная версия)
- @android:style/Theme.Material.Light (светлая версия)
- @android:style/Theme.Material.Light.DarkActionBar (светлая версия с тёмным заголовком)
В Android 9.0 темы Material Design продолжили развитие, они будут активно внедряться в ближайшее время.
- Theme.MaterialComponents
- Theme.MaterialComponents.NoActionBar
- Theme.MaterialComponents.Light
- Theme.MaterialComponents.Light.NoActionBar
- Theme.MaterialComponents.Light.DarkActionBar
Для Material Design были разработаны новые атрибуты тем.
- android:colorPrimary: основной цвет для интерфейса программы — панель, кнопки и т.д.
- android:colorPrimaryDark: цвет для системных элементов — строка состояния
- android:colorAccent: Цвет по умолчанию для компонентов, которые находятся в фокусе или активны
- android:colorControlNormal: Цвет для неактивных компонентов
- android:colorControlActivated: Цвет для активных компонентов
- android:colorControlHighlight: Цвет для нажатых элементов интерфейса
- colorSwitchThumbNormal: и т.д. изучаем документацию
Позже были добавлены другие атрибуты: colorPrimaryVariant, colorOnPrimary, colorSecondary, colorSecondaryVariant, colorOnSecondary, colorError, colorOnError, colorSurface, colorOnSurface, colorBackground, colorOnBackground.
Настройка цветов происходит по определённым правилам. На сайте http://www.google.com/design/spec/style/color.html# есть таблица цветов. Обратите внимание на числа слева. Основным цветом (colorPrimary) считается цвет под номером 500, он идёт первым в таблицах. Этот цвет должен использоваться в качестве заголовка (Toolbar).
Допустим, мы делаем специальное приложение для рыжего кота. Создадим новый файл res/values/colors.xml. На указанном сайте находим таблицу цветов оранжевого цвета Orange и будем использовать предлагаемое значение.
Зададим основной цвет.
#FF9800
Для строки состояние, которая находится выше заголовка приложения, нужно использовать цвет со значением 700 (colorPrimaryDark). Это более тёмный цвет и позволяет различать заголовок приложения и строку состояния. Возвращаемся к оранжевой таблице цветов, запоминаем значение цвета и прописываем его в ресурсах.
#F57C00
Пропишем в теме приложения новые элементы.
На старых устройствах цвет строки состояния не изменяется. Цвет заголовка поменять можно.
В файле res/values-v21/styles.xml для новых устройств нужно повторить указанные действия с небольшой поправкой. В API 21 уже есть предопределённые константы для эти цветов, поэтому используем в именах android:colorPrimary и android:colorPrimaryDark.
В одной из недавних версий библиотеки совместимости была реализована поддержка нового дизайна для всех устройст и такое разделение сейчас не является обязательным.
С главным цветом есть одна тонкость. Старые устройства используют ActionBar и его цвет подчиняется правилам Material Design из коробки. На новых устройствах для активности используется тема без панели действий Theme.AppCompat.NoActionBar и вручную добавляется компонент Toolbar. Чтобы он использовал основной цвет, используйте правильный стиль для фонового цвета.
Третий важный цвет для использования в приложениях — акцентированный. Данный цвет может использоваться для кнопки Floating Action Button и для различных компонентов. Он должен быть достаточно контрастным по сравнению с основным цветом. Для примера выберем зелёный цвет по цвету глаз рыжих котов. Находим в таблице зелёный цвет и выбираем нужное значение из A400
#00E676
Прописываем цвет в обоих темах:
- @color/accentColor
- @color/accentColor
Сейчас акцентированный цвет мы нигде не увидим. Вернёмся к нему позже.
Акцентированные цвета поддерживаются многими компонентами из коробки. Для некоторых следует использовать аналоги из библиотеки AppCompat:
- Флажки и переключатели
- SwitchCompat вместо Switch
- Курсор у EditText
- Текст у TextInputLayout
- Текущий индикатор у TabLayout
- Выбранный элемент у NavigationView
- Фон у FloatingActionButton
Пользуйтесь сервисом Material Design Color Palette Generator для создания палитры в стиле Material: выбираем основной цвет, цвет «плавающей» кнопки и сайт генерирует необходимую палитру.
В Android 5.0 появился новый атрибут темы colorEdgeEffect. Вам необходимо переопределить тему, а затем применить к компоненту.
res/values/themes.xml res/layout/fragment_list.xml
Темы для диалоговых окон
По умолчанию, диалоговые окна на Lollipop-устройствах будут выглядеть в стиле Material Design. Но если вы хотите немного изменить внешний вид, то можно применить стили и темы к ним. Создайте отдельный стиль:
Добавьте созданный стиль к теме.
Также можно создать отдельный стиль для негативной кнопки, чтобы она была красной и отличалась от позитивной кнопки.
Затем в коде используете созданный стиль.
AlertDialog alertDialog = new AlertDialog.Builder( getActivity(), R.style.AlertDialogCustom_Destructive) .setPositiveButton(R.string.button_delete, new DialogInterface.OnClickListener() < @Override public void onClick(DialogInterface dialogInterface, int i) < // Delete Action >>) .setNegativeButton(R.string.button_cancel, new DialogInterface.OnClickListener() < @Override public void onClick(DialogInterface dialogInterface, int i) < // Cancel Action >>) .setTitle(R.string.title_delete_item) .create();
Сам пока не проверял.
Темы для диалоговых окон для старых устройств
В библиотеке совместимости версии 22.1.0 появилась поддержка Material Design для диалоговых окон.
Для начала вызовем диалоговое окно стандартным способом:
import android.app.AlertDialog; public void onClick(View view)
Добавим стили в файл styles.xml:
Для вывода диалогового окна будем использовать класс из библиотеки совместимости, у которого есть дополнительный параметр для указания темы.
import android.support.v7.app.AlertDialog; public void onClick(View view) < AlertDialog.Builder builder = new AlertDialog.Builder(this, R.style.AppCompatAlertDialogStyle); builder.setTitle("Dialog"); builder.setMessage("Покормить кота?"); builder.setPositiveButton("OK", null); builder.setNegativeButton("Cancel", null); builder.show(); >
Если хотите также поменять цвет для заголовка диалогового окно, то добавьте в предыдущую тему AppCompatAlertDialogStyle новый элемент windowTitleStyle и создайте стиль для него.
- @style/TitleDialogTextStyle
Стили для компонентов
У компонентов также появились новые стили, связанные с Material Design. Например, TextAppearance.Material.Title:
Темы для компонентов
Обычно темы применялись к активности или приложению. Сейчас самый распространённый вариант Theme.AppCompat.
В Lollipop и AppCompat с версии 22.1 стало возможным присваивать тему отдельному компоненту. В этой связи появился отдельный тип темы ThemeOverlay, который позволяет менять только необходимые настройки. Например, ThemeOverlay.AppCompat.Light меняет фоновый цвет, цвет текста и выделенный текст, как если это была бы светлая тема. Соответственно, ThemeOverlay.AppCompat.Dark работает как тёмная тема.
Это может пригодится, чтобы цвет текста не совпадал с цветом фона и был читаемым. Например, это часто используется у Toolbar:
Также используется при создании собственных тем
Выбор темы в зависимости от версии платформы
Каждая новая версия Android обзаводится несколькими новыми темами. И, возможно, вам захочется использовать новые темы в своих приложениях, чтобы пользователи новых аппаратов увидели современный интерфейс, при этом владельцы старых аппаратов будут видеть приложение в другом виде.
Предположим у вас есть собственная тема, использующая стандартную светлую тему, в файле res/values/styles.xml:
Чтобы задействовать также новую голографическую тему, доступную в Android 3.0 (API Level 11) и выше, создайте альтернативный файл стилей в папке res/values-v11, где будет указана новая тема:
Для последней версии Android 5.0 вам понадобится папка res/values-21 для темы, использующую Material Design.
Теперь программа автоматически будет переключаться между стилями, самостоятельно определяя версию Android.
Список стандартных атрибутов, используемых в темах, можно найти на странице R.styleable.Theme .
Использование стилей и тем платформы
Вы можете создавать собственные стили, а можете подключать готовые системные стили или отдельные атрибуты стилей, используемых в Android. Для указания стиля, предопределённого в Android, используется следующий синтаксис:
style bg-light">
Знак ? применяется для поиска значения стиля в текущей теме, а подстрока ?android означает поиск значения стиля в системной теме Android.
В студии можно выбрать системную тему сразу из среды разработки. Откройте файл разметки в режиме Design. Чуть выше формы имеется выпадающая кнопка AppTheme. Нажмите на неё и поиграйтесь со списком, чтобы просмотреть другие варианты. Вы сможете увидеть, как будет выглядеть ваше приложение в разных темах. Учтите, что эта настройка не вносит изменения в ваш файл, а предназначена только для просмотра темы, чтобы вы представляли, как будет выглядеть программа у разных пользователей.
В последних версиях проектов студии, которые используют тему AppCompat для создания полноэкранной активности используйте стиль:
И примените его к нужной активности.
Новые темы в Android 4.4
В Android 4.4 появилась возможность сделать панель навигации и строку состояния полупрозрачными. Откройте файл styles.xml и добавьте строчки:
Последний пункт у меня закомментирован. Он позволяет настроить тему для ActionBar. Можете поиграться с ним. Для сравнения ниже представлены скриншоты стандартного окна активности с чёрными полосками снизу и сверху и стилизованной активности. Для наглядности я выбрал оранжевый цвет для фона активности.
Если говорить об эволюции тем и стилей, то в Android 2.x темы были в зачаточном состоянии. В Android 3/4 дизайнеры проделали огромную работу, чтобы система стала красивой и предложили тему Holo. В новой версии Android 5.0 работа над стилями была продолжена и была представлена новая концепция стиля под названием Material Design с подробной документацией по её использованию.
В статье Android App Launching Made Gorgeous рассматривается интересный случай, когда неправильное использование тем приводит к некрасивому эффекту - сначала загружается пустой экран, а затем уже экран вашей активности.
Темы для View
В статье говорилось, что отдельные компоненты должны использовать стили, а активности - темы. В Android 5.0 Lollipop, а также старые устройства с API 11 через библиотеку совместимости AppCompat могут также использовать темы:
Небольшой список на память.
- ThemeOverlay.AppCompat
- ThemeOverlay.AppCompat.Light
- ThemeOverlay.AppCompat.Dark
- ThemeOverlay.AppCompat.ActionBar
- ThemeOverlay.AppCompat.Dark.ActionBar
Например, ваши компоненты в разметке используют светлую тему, а родительский элемент должен использовать тёмную тему. Тогда применим к нему готовую тему.
Если вам нужно изменить конкретный атрибут, например, colorAccent, то добавьте новую тему:
Примените тему к вашему компоненту через android:theme="CustomAccentOverlay". Так вы можете переопределить и другие атрибуты.
Общие советы
Избегайте конкретных значений для цвета.
Лучше используйте атрибуты, что позволит вам корректно переключаться к тёмной теме.
В некоторых ситуациях использование готовых значений цвета оправдано.
При работе с элементами темы программным способом не используйте Context от Application, только от Activity.
Игра в маляра, или Content-based color scheme: как цветовая схема приложения может меняться в зависимости от контента
На Google I/O 2021 показали фичу, позволяющую динамически менять цветовую схему приложения в зависимости от контента. Но в документации не было использования этого подхода или API. Ведущего android-разработчика red_mad_robot Рому Чорыева это не устроило, и он решил разработать своё простое решение, — а теперь рассказывает об этом в статье.
На Google I/O 2021 впервые показали третье поколение Material Design, которая получила название Material You. Первую версию Google представил еще в 2014 году, и за последние годы она сильно изменилась. Самое большое обновление принесло именно третье поколение — изменения коснулись трёх базовых составляющих: цвета, формы и типографики.
А недавний выход первого стабильного релиза для Jetpack Compose стал ещё одним отличным поводом внимательнее рассмотреть Material You для наших проектов. Обо всех изменениях можно прочитать на основной странице Material You.
Нас же больше всего привлекло нововведение в Material Color System под названием Dynamic Colors. В описании говорится, что эта фича, начиная с Android 12, позволяет динамически менять цветовую схему приложения на основании доминирующего цвета заставки рабочего стола:
A user’s wallpaper selection is the basis for the color extraction algorithm to build a color scheme that’s applied across a user’s device and any apps that accept dynamic color.
Как работает Dynamic Colors
И это действительно работает — просто и интересно. Конечно, не все захотят перекрашивать компоненты приложения только на основании заставки на рабочем столе, но концепция сама по себе нам показалась интересной.
Больше всего нас с дизайнерами заинтересовал другой вариант этого подхода, описанный на той же странице, — Content-based color schemes. Подход подразумевает изменение цветовой схемы в зависимости от какого-то контента, например изображения. В примере Google цвет плеера меняется в зависимости от обложки альбома. Но ни в документации, ни в официальных примерах не удалось найти использование этого подхода. Как и API, которое делало бы это на уровне отдельного экрана или элемента.
Но мы всё равно хотели получить такую функциональность — это и стало причиной разработки своего небольшого решения. Забегая вперед, скажу, что ничего сверхъестественного в нём нет и для реализации используются публично доступные ресурсы.
Как работает Dynamic Colors
Чтобы понять, как нам реализовать эту функциональность самостоятельно, давайте для начала поймём, как работает Dynamic Colors с заставкой рабочего стола. Посмотрим на то, как мы его используем при объявлении своей темы.
Если заглянуть в метод dynamicDarkColorScheme или dynamicLightColorScheme, то мы увидим, что внутри создается объект TonalPalette, из которого и собирается нужная нам цветовая схема ColorScheme.
fun dynamicDarkColorScheme(context: Context): ColorScheme < val tonalPalette = dynamicTonalPalette(context) return darkColorScheme(. ) >
Сам метод dynamicTonalPalette нам не подходит — он создаёт палитру, опираясь на статичные android-ресурсы наподобие android.R.color.system_accent1_0. А мы хотим самостоятельно менять палитру. Значит, осталось сгенерировать свою и создать на её базе нашу собственную ColorScheme. Но как это сделать?
Material Theme Builder
С выходом Material You Google представил и новый инструмент — Material Theme Builder.
Он позволяет просто сгенерировать цветовую схему для темы приложения, опираясь только на один базовый (Primary) цвет. Крутая фишка инструмента заключается в том, что он генерирует цветовую схему не только для светлой, но и для тёмной темы приложения. Это особенно удобно для небольших или pet-проектов, под которые нет возможности выделить ресурсы дизайнеров.
Но вернёмся к нашей теме. Инструмент есть, и похоже, это то, что нам нужно. Но как взять и засунуть эту штуку в наше приложение? Раз есть инструмент, то наверняка должны быть и его исходники. Так и оказалось. Небольшой поиск привёл меня в аккаунт Material Foundation на GitHub, а уже среди его репозиториев быстро нашёлся один с интересным названием — material-color-utilities. Из описания репозитория сразу стало понятно, что это именно то, что нам нужно. Дальше оставалось понять, как же теперь использовать эти исходники.
Собираем свой генератор
Всё оказалось просто. Среди корневых папок была одна под названием java — ощущение, что мы на верном пути. Скомпилировать её исходники не составило никакого труда. Для этого нужно создать пустой java-проект. Для меня быстрым вариантом было сделать это через команду
gradle init
в заранее подготовленной директории. Далее выбираем нужные нам параметры проекта. Я выбрал library в качестве типа проекта и Kotlin в качестве build script DSL.
Рекомендую сразу позаботиться о наименовании пакета для библиотеки, чтобы потом всё не переделывать. Я выбрал material.color.util. После инициализации проекта удаляем ненужные нам тесты и сгенерированные классы. Клонируем репозиторий material-color-utilities и переносим содержимое его java-директории в наш проект.
Пришлось пробежаться по классам и поправить импорты, но это оказалось единственной болью, с которой я столкнулся. Тем более что классов не так много. После всех манипуляций запускаем:
./gradlew build
— и скомпилированная библиотека готова! Найти её можно в папке lib/build/libs.
Для удобства я сразу переименовал получившийся файл в material-color-util.jar.
Добавление библиотеки в проект
Берём получившийся .jar файл и переносим к себе в проект. Для этого добавляем директорию libs в app модуле целевого приложения и переносим туда наш скомпилированный файл.
Далее подключаем нашу библиотеку в build.gradle.kts файле app модуля.
dependencies < implementation(files("libs/material-color-util.jar")) >
Вот и всё. Теперь мы можем использовать классы утилиты в нашем приложении.
Создание своей динамической темы
Из описания классов мы можем понять, что для генерации цветовой схемы нам нужен класс Scheme из нашей библиотеки. И названия его полей удивительным образом совпадают с названиями полей класса ColorScheme из material3. Справедливости ради, нужно отметить, что одного цвета в схеме не оказалось. Это был surfaceTint, и вместо него я использовал surfaceVariant.
Используем методы lightContent и darkContent для генерации светлой и тёмной палитры и мапим получившиеся модели в material3.ColorSheme.
Теперь нам нужно заставить тему динамически меняться. И тут нам очень поможет Jetpack Compose со своим механизмом рекомпозиции и возможностью удобно оборачивать экраны и элементы в отдельные темы. Создадим класс DynamicThemeState, через который мы и будем управлять изменениями в нашей теме.
@Stable class DynamicThemeState(initialPrimaryColor: Color) < var primaryColor: Color by mutableStateOf(initialPrimaryColor) >@Composable fun rememberDynamicThemeState( initialPrimaryColor: Color = MaterialTheme.colorScheme.primary ): DynamicThemeState < return remember < DynamicThemeState(initialPrimaryColor) >>
Далее добавим код, который, используя нашу библиотеку, позволит генерировать цветовую схему из одного главного цвета, — и соединим всё это воедино в нашей теме.
Дальше нам нужно протестировать, как это всё работает. Для этого сделаем простой экран со списком разноцветных карточек:
@Composable fun CardListScreen(onCardSelect: (Int) -> Unit) < val cardColors = remember < listOf(Color.Green, Color.Blue, Color.Magenta, Color.Red, Color.Yellow, Color.Black) >LazyColumn( modifier = Modifier.padding(top = 24.dp), verticalArrangement = Arrangement.spacedBy(16.dp) ) < items(cardColors) < color ->Surface( modifier = Modifier .fillMaxWidth() .height(80.dp) .padding(horizontal = 16.dp) .clickable < onCardSelect(color.toArgb()) >, shape = MaterialTheme.shapes.medium, color = color ) <> > > >
Клик на каждую из них будет открывать экран со списком основных UI-элементов Android. Для наглядности добавим кастомный компонент, который будет визуализировать нашу текущую палитру. Назовем всё это ComponentsLayout.
Далее мы оборачиваем весь контент экрана в нашу тему и передаём в него цвет карточки, на которую мы кликнули. Мы ожидаем, что все компоненты на нашем экране будут перекрашиваться в соответствии с цветом выбранной карточки.
Весь код экрана будет выглядеть так:
@Composable fun ComponentsScreen(color: Int) < val themeState = rememberDynamicThemeState(Color(color)) DynamicTheme(state = themeState) < // Компонент с демо элементами ComponentsLayout( modifier = Modifier .fillMaxSize() .padding(top = 24.dp) ) >>
Далее собираем проект и видим, что всё работает так, как мы и ожидали.
Но изначально мы говорили о генерации цветовой схемы на базе контента, а не конкретного цвета, который нам известен. Нужно заставить это решение работать с произвольными изображениями!
Для этого положим несколько картинок в ресурсы и будем генерировать из них цветовые схемы. Для извлечения доминантного цвета из картинки используем библиотеку Palette, которая является частью AndroidX.
Добавляем в наш проект метод для извлечения доминантного цвета из картинки при помощи Palette.
fun exportDominantRgb(context: Context, imageRes: Int): Int? < val bitmap = BitmapFactory.decodeResource(context.resources, imageRes) val palette = Palette.from(bitmap).generate() return palette.dominantSwatch?.rgb >
Чтобы всё это было нагляднее и интерактивнее, соберём всё на одном экране. Это позволит нам кликать на картинку и сразу видеть изменения.
Так как процесс извлечения цвета из картинки и генерации цветовой схемы занимает какое-то время, лучше вынести куда-то этот кусок кода и обернуть в корутину.
Собираем наш проект и видим, как при клике на картинку перекрашиваются все компоненты и палитра.
Вот, собственно, и всё. Мы смогли добиться той самой динамической цветовой схемы на базе контента, о которой нам говорил Google. Причём своими руками.
Неожиданный плюс, который мы получили от нашей реализации, — она работает и на версиях младше Android 12 — в отличие от Dynamic Сolors на основании wallpapers. А это открывает ещё больше возможностей для его использования. Проверено на Pixel 4 с Android 10.
Полные исходники примера можно посмотреть тут.
Если было интересно читать, что сгенерировали наши нейросети, подписывайтесь на наши телеграм-каналы Redmadnews и Design Jam.
Да пребудет с вами сила роботов! ��