Galaxy Themes
Настройте оформление вашего Samsung по своему вкусу
Скачать последнюю версию
Galaxy Themes – это официальное приложение Samsung для изменения оформления вашего смартфона. Если вам надоела тема, используемая в вашем смартфоне, это приложение предложит массу альтернативных вариантов для обновления оформления вашего смартфона в любой момент, когда вам заблагорассудится. Это приложение удивительно просто и интуитивно устроено, к тому же, оно идёт предустановленным в вашем смартфоне Samsung по умолчанию.
Откройте меню приложения чтобы увидеть весь список опций. Все включённые в Galaxy Themes темы совершенно непохожи друг на друга, и вы можете оценить их вид, нажимая на каждую из них. Таким образом вы сможете получить представление, как будет выглядеть ваш смартфон, если вы примените ту или иную тему.
Чтобы изменить тему в вашем Samsung, всё, что вам нужно сделать, выбрать понравившуюся тему в качестве используемой по умолчанию. Это занимает лишь считанные секунды!
После закрытия настроек, новая тема предстанет в вашем смартфоне во всей своей красе. Чтобы выбрать другую тему, вам снова нужно открыть Galaxy Themes, и установить используемой по умолчанию ту, что больше всего по душе.
Проверено Merche Contreras Переведено Uptodown Localization Team
Требования (последняя версия)
- Требуется Android 7.0 или более новая версия
Больше информации
Имя пакета | com.samsung.android.themestore |
Лицензия | Бесплатно |
ОС | Android |
Раздел | Персонализация |
Язык | Pусский |
Темы и стили
Чтобы наше приложение было стильным, можно воспользоваться специальной темой. Тема — это коллекция стилей, которые обеспечивают профессиональный вид приложению, чтобы оно было похоже на родные приложения 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.
Темы Mod Apk v5.4
Темы - это приложение представляет собой набор качественных тем и обоев для ваших смартфонов Xiaomi Mi и Redmi.
При установке тем приложение перенаправляет вас в Магазин тем , и из этого магазина вы можете бесплатно установить выбранные вами темы.
В приложение будут регулярно добавляться новые темы и обои, также через приложение будут отправляться уведомления о различных акциях.
Внимание! Некоторые темы могут не открываться в вашем регионе из-за того, что они недоступны в вашем регионе.
Установите его сейчас и наслаждайтесь любимыми темами и обоями.
Присоединяйтесь к нам:
Заявление об ограничении ответственности:
Это неофициальное приложение тем, в нем выбраны темы из официального приложения Themes Store, чтобы представить вам самые креативные и высококачественные темы.
Большое руководство по проектированию темной темы для Android-приложений
В этой статье я объясню пошаговый процесс создания темной темы (Dark Theme / Dark Mode) для вашего приложения на основе Руководства Material Design от Google Приятного чтения! Когда в 2019 году на конференции Google I/O, компания Google объявила о повальной эпидемии темных тем, я был очень взволнован. Те из вас, кто следит за мной в социальных сетях, должны знать, что я фанат темной темы. Я просто обожаю ее! С выходом Android Q в 3-м квартале 2019 года я понял, что важно добавить тёмную тему в свои приложения. Компания Google выпустила руководство Material Guidelines для применения темной темы в своих приложениях. Это отличное руководство в отличие от Human Interface Guidelines от Apple (Apple, почему? Почему?). Вы безусловно можете потратить время на его прочтение, но я планирую сделать вашу жизнь намного проще, описав в этой статье пошаговый процесс создания темной темы. Я также опубликовал в Instagram 5 видео, которые помогут быстро освоить основы темной темы. Еще один момент. Я буду освещать только аспект проектирования, но не аспект разработки. Вы можете посмотреть это видео от Google, которое объясняет разработку темной темы. А еще можете посмотреть мое полноценное видео-руководство на YouTube ! Хорошо, если у вас есть готовая дизайн-система с цветами, шрифтами, компонентами и т.д., давайте начнем!
Расположение в пространстве
Каждое приложение состоит из множества компонентов. Nav drawer, панель приложений, кнопки и т.д. Каждый компонент имеет определенное значение размера тени, поскольку это является одной из основ Material Design. В светлой теме имеет смысл добавить к компоненту тень в зависимости от расположения в пространстве. Но это не работает с темной темой, поскольку черная тень на темном фоне визуально не заметна. И поэтому Google пришла в голову идея делать компонент светлее по мере увеличения тени. Но обратите внимание, что в темной теме компоненты будут по-прежнему иметь те же настройки тени, что и в светлой теме.
Руководство Google обеспечивает 12 уровней возвышения для компонентов В качестве основы всегда используется темно-серый цвет со значением #121212. Apple вечно любит отличаться, поэтому они предлагают использовать чистый черный цвет #000000. Все значения тени и возвышения были предоставлены Google в их UI Kit (Sticker Sheet).
Компоненты становятся светлее по мере увеличения возвышения
Проектирование приложения
Каждый компонент в темной теме построен с использованием 2 слоев. Он создается путем размещения полупрозрачного оверлея на поверхности с цветом #121212. Это может быть, как белый, так и цветной оверлей. Я объясню оба случая использования. Эта концепция зависит от того, какой инструмент проектирования вы используете. Это быстрее сделать в Figma и Sketch, а в Adobe XD требуется дополнительный шаг. Ну, а пока я покажу вам проектирование приложения в Figma. Давайте в качестве примера возьмем навбар. Как видите, панель приложения состоит из 2 слоев. Базовый всегда имеет цвет #121212. Поверх базового слоя нанесен белый полупрозрачный оверлей. Непрозрачность этого оверлея была установлена на уровне 9%. Это значение варьируется в зависимости от возвышения. В этом случае панель приложения имеет возвышение 4dp. Чем больше возвышение, тем больше непрозрачность оверлея. Значения возвышения и оверлея доступны в UI Kit, предоставленном Google. Если вы используете такой инструмент, как Adobe XD, процесс будет немного отличаться. Вам нужно будет дублировать базовый слой (#121212), а затем изменить цвет на белый. Потом установите непрозрачность продублированного слоя на 9%. В Adobe XD вы не можете добавить 2 цветных слоя к одному элементу.
Передача разработчикам
- Вы не передаете проект разработчику . Попросите разработчика использовать компоненты кода, предоставленные Google. Эти компоненты кода будут автоматически применять возвышение и цвет.
- Если вы используете кастомный компонент, укажите истинное значение цвета. В нашем случае это #272727, который представляет собой смесь цветов #121212 и #FFFFFF (9%).
Фон и поверхности с фирменным цветом
Некоторые бренды любят везде использовать свой фирменный цвет (цвет бренда). Поэтому есть еще один способ добавить немного стиля вашей темной теме.
В этом примере мы выберем синий цвет в качестве основного (#4BB2F9).
Создание кастомного цвета фона на основе цвета бренда.
Здесь я заменил белый полупрозрачный оверлей синим полупрозрачным. Я установил уровень прозрачности так, чтобы он соответствовал стандартам доступности WCAG. Я расскажу подробнее об этом в разделе доступности.
Все ли компоненты должны иметь беграунд темного цвета? На самом деле, нет. Возьмём в качестве примера FAB (плавающая кнопка целевого действия). Такие компоненты, как кнопки и FAB, могут иметь оттенок основного цвета.
Маленькие компоненты, такие как FAB, не будут иметь темного фона
Я расскажу об этом подробнее в следующем разделе.
Цветовая палитра
Далее идет красочная часть. Первое, что вам нужно сделать, это взять основной и дополнительный цвета и создать цветовую палитру. Для создания цветовой палитры вы можете перейти в раздел, посвященный цветам, на сайте Material.io и ввести свои цвета. Затем он сгенерирует для вас цветовую палитру. Обязательно прокрутите вниз до раздела «Tools for picking colors section».
Цветовая палитра, сгенерированная для оранжевого цвета
Давайте разберемся с компонентами цветовой палитры.
- Тональные значения: каждому оттенку цветовой палитры присваивается номер в диапазоне от 50 до 900. Это число является тональным значением. Они используются только для определения определенного оттенка цветовой палитры.
- Основной цвет: когда вы вводите значение основного цвета, генератор цветовой палитры назначит тональное значение вашему основному цвету. Оно основано на насыщенности основного цвета. В приведенном выше примере тональное значение основного цвета составляет 600. Однако это основной цвет для светлой темы. Но для темной темы основной цвет смещается в ненасыщенный цветовой оттенок. (Пояснение ниже). Google рекомендует использовать цвет с тональным значением 200 в качестве основного цвета для темной темы.
- Основной вариант: любой оттенок основного цвета называется основным вариантом (Primary Variant). Таким образом, в нашем случае, любой цветовой оттенок, кроме тонального значения 600, может рассматриваться в качестве основного варианта для светлой темы. А любой цветовой оттенок, кроме тонального значения 200, может рассматриваться, как основной вариант для темной темы.
Зачем нам нужна полноцветная палитра?
Потому, что темная тема хорошо работает с ненасыщенными цветами. Оттенки с тональными значениями от 50 до 400 являются наиболее подходящими цветами для темной темы.
Тональное значение 900 — наиболее насыщенное. Тональное значение 50 — наименее насыщенное
Убедитесь, что у вас есть сгенерированная цветовая палитра для акцентных и дополнительных цветов.
Еще одна вещь, прежде чем мы завершим раздел о цвете. Речь идет о цвете для таких компонентов, как FAB и кнопок, которые я показал вам в предыдущем разделе.
На изображении выше, FAB на верхнем экране имеет основной цвет темной темы, который имеет тональное значение 200. Но рекомендации позволяют нам использовать для таких компонентов более насыщенный цвет. В нашем случае это будет основной цвет для светлой темы с тональным значением 500.
Однако применение основного цвета должно быть ограничено одним или двумя фирменными элементами, такими как логотип или фирменная кнопка. В остальной части интерфейса темной темы должны использоваться ненасыщенные цвета.
С этого момента, где бы я ни использовал словосочетание «основной цвет», я имею в виду «основной цвет темной темы» (тональное значение 200).
Цвета «On»
Гайдлайны предоставляют набор правил для таких элементов, как текст и иконки, которые должны соблюдаться для темной темы. Он называется «Палитра основы темной темы» (Dark Theme Baseline Palette), которая выглядит примерно так.
Палитра основы темной темы
Цвета на правой стороне называются «On». Они применяются к тексту, иконкам и обводкам, которые располагаются «поверх» поверхностей, использующих основной, вторичный цвета, цвет поверхности, фона или цвет ошибки.
На изображении выше у нас есть расширенный FAB, имеющий основной цвет. Цвет текста черный. Не белый. Это соответствует «Палитре основы темной темы».
Это в значительной степени все, что вам нужно знать о цвете.
Доступность и контраст
Теперь начинается интересная часть. На каждой поверхности есть 3 типа элементов — иконки, текст и обводки. Они могут иметь либо белый цвет, либо оттенок фирменного цвета.
Давайте возьмем пример, в котором цвет текста и иконок будет белым.
Различные уровни непрозрачности для различного выделения текста
На изображении выше, есть 3 различных уровня непрозрачности для текста белого цвета. Согласно руководства Material Design:
- Высокое выделение текста должно иметь непрозрачность 87%.
- Текст с низким акцентом должен иметь непрозрачность 60%.
- Отключенный текст, должен иметь непрозрачность 38%.
Безусловно, эти значения можно изменить по своему вкусу. Поэтому в нашем случае непрозрачность заголовка вкладки (Activity) составляет 100%, а непрозрачность другого заголовка — 87%, а непрозрачность подзаголовков — 60%.
Теперь давайте возьмем пример, где цвет текста не белый, а является оттенком цвета бренда.
Оттенок оранжевого цвета используется вместо чистого белого цвета
Как видите, я использовал не насыщенный оранжевый цвет для вкладок, заголовка вкладки и кнопки. Этот не насыщенный оранжевый цвет имеет тональное значение 200, как рекомендовано руководством Material Design.
Так, какую роль в этом играют доступность и контраст? На самом деле все очень просто.
Все цвета, используемые в темной теме, должны отображать элементы с достаточной контрастностью, соответствующей стандартам доступности WCAG для текста.
Эти рекомендации предоставляют нам 2 коэффициента контрастности, которые должны быть соблюдены для достижения достаточного контраста. Вот 3 инструмента, которые вы можете использовать для быстрой проверки цветового контраста. Пишите в комментариях, если используете другие инструменты.
Исходя из всего вышесказанного, вот 4 возможных результата для вашего интерфейса. Вы можете выбрать любой из них. Найдите минутку, чтобы медленно рассмотреть, чем они отличаются.
4 возможных результата
Хорошо, теперь давайте поговорим о цифрах. Как я уже говорил, есть 2 коэффициента контрастности, которые должны быть удовлетворены. И вот элементы, которые играют роль в контрастности.
4.5:1
- Поверхность с основным цветом (темная тема). (Результаты 3 и 4)
- Текст с белым или не белым цветом. (Все 4 результата)
15.8:1
- Поверхность с основным цветом (темная тема) или черным цветом по умолчанию. (Все 4 результата)
- 100% белый цвет текста. (Результат 1 и 3)
Знаю, что это очень трудно понять, если вы никогда раньше не работали с коэффициентами контрастности. Но не волнуйтесь, так как я здесь, чтобы помочь вам.
Шаг 1
Решите, собираетесь ли вы использовать фон с цветом по умолчанию или основным цветом.
Шаг 2
При тестировании ваших цветов убедитесь, что вы тестируете их на самом высоком уровне возвышения 24dp. Согласно руководству Google, модальное диалоговое окно имеет возвышение 24dp. Но на изображении выше я взял в качестве примера панель навигации, имеющую возвышение 16dp. Разница в цвете незначительна между возвышением 16dp и 24dp.
Шаг 3
Если вы выберете фон с темным цветом по умолчанию, вам нужно только проверить контрастность 4,5: 1. И, если для цвета текста выбран чистый белый цвет, в этом случае вам не нужно применять какой-либо коэффициент контрастности.
Но, если текст имеет цвет вашего бренда, тогда проверьте коэффициент контрастности 4,5: 1. Давайте посмотрим, как это работает.
Соответствие коэффициенту контрастности 4.5:1
Как вы можете видеть здесь, цвета соответствуют коэффициенту контрастности 4,5: 1, что нам и нужно.
Шаг 4
Если вы решите использовать фон с основным цветом, вам нужно проверить только соответствие коэффициенту контрастности 15,8: 1. В этом случае вам нужно проверить соотношение независимо от цвета текста.
Следует отметить, что, если цвет текста белый, то проверьте коэффициент контрастности 15,8: 1. Если для текста выбран фирменный цвет, проверьте коэффициент контрастности 4,5: 1.
Давайте посмотрим, как это работает.
Соответствие коэффициенту контрастности 15,8: 1
На изображении выше мы тестируем коэффициент 15,8: 1, так как цвет текста белый. При непрозрачности 11% цвет фона становится достаточно темным, чтобы соответствовать коэффициенту контрастности 15,8: 1.
Соответствие коэффициенту контрастности 4,5: 1
На изображении выше мы не собираемся тестировать коэффициент контрастности 15,8: 1, поскольку цвет текста не белый. Вместо этого проверьте коэффициент 4,5: 1. Коэффициент контрастности 15,8: 1 необходимо проверять только тогда, когда цвет текста белый.
Еще одна вещь, на которую следует обратить внимание при тестировании коэффициентов контрастности, это проверить их на фоне состояний ошибок.
Соответствие коэффициенту контрастности 4,5: 1
Рекомендации определяют точный цвет, который будет использоваться для состояний ошибки. В нашем случае это ярко-красный с полупрозрачным оверлеем с непрозрачностью 40%. В результате мы получаем цвет #CF6679. Непрозрачность 40% обеспечивает соответствие коэффициенту контрастности. Красный цвет (#B00020) — это цвет ошибки по умолчанию для светлой темы.
Текст здесь черный, а не белый. Это из-за «Палитры основ темной темы», которую мы рассмотрели ранее.
Но, если вы решите использовать другой цвет для состояний ошибки, просто убедитесь, что он соответствует коэффициенту контрастности 4,5: 1.
Состояния
Проектирование темной темы для разных состояний компонента просто и понятно. Все настройки тени, наложения и обводки доступны в UI Kit. Я собираюсь показать вам пример с состоянием перетаскивания компонента.
Есть 2 типа компонентов. Тот, который использует темный цвет по умолчанию (#121212) и тот, который использует основной цвет. На изображении ниже я покажу вам схему дизайна, когда компонент имеет темный цвет по умолчанию.
Полупрозрачный белый оверлей для разных состояний
На изображении выше состояние перетаскивания имеет тень 8dp и полупрозрачный оверлей белого цвета. Значение 8% является фиксированным значением, рекомендованным гайдлайнами. Поэтому лучше не редактировать это значение.
Есть еще один вариант, когда текст использует основной цвет. Подход тот же с небольшим отличием.
Когда текст использует основной цвет, цвет оверлея совпадает с цветом текста. В этом случае цвет текста будет #F796AE, поэтому оверлей использует тот же цвет.
В большинстве случаев такие компоненты, как кнопки и FAB, всегда используют фирменные цвета. Поэтому всегда используйте белый оверлей для разных состояний. Для состояния перетаскивания непрозрачность составляет 8%, как мы видели в предыдущих примерах.
Для отключенных состояний есть только 2 варианта.
2 варианта для кнопок.
Изображение выше показывает только 2 варианта для отключенных состояний. Это может быть либо обводка, либо заливка. В обоих случаях текст белый с непрозрачностью 38%.
Погодите… что? Типа иллюстрации графического дизайна?
Иллюстрации также должны быть адаптированы под темную тему. К сожалению, в руководствах ничего не сказано об иллюстрациях. Единственное доступное руководство — выступление на конференции Google I / O.
Итак, давайте разберемся с этим вопросом. Иллюстрации, которые я буду использовать, взяты с сайта Undraw.com.
Настройка иллюстраций для темной темы довольно проста. Все, что вам нужно, это разбить иллюстрацию на 2 части, а именно: предмет и фон.
- Элемент фона необходимо сделать серым. Но при этом вы должны следовать простому правилу. Самый светлый оттенок в светлой теме становится самым темным оттенком в темной теме и наоборот. Иногда вам может понадобиться поиграть с черным и белым цветами, чтобы они выглядели идеально. Вы не должны всегда следовать этому правилу.
- Для предметов необходимо использовать ненасыщенные цвета. Таким образом, ваш диапазон — оттенки с тональным значением 400–50.
Ненасыщенные цвета для иллюстраций темной темы
В светлой теме на иллюстрации использовался насыщенный зеленый цвет с тональным значением 800. Но для темной темы используйте менее насыщенный цвет из той же цветовой палитры. В нашем случае я использовал тональное значение 200. Но вы можете использовать тональные значения 400 или 300.
Другие части иллюстрации, такие как брюки и рубашка, уже имеют ненасыщенный цвет, поэтому менять его не нужно.
Вот и все!
Итак, это почти все, что вам нужно знать о проектировании темной темы для вашего Android-приложения. Не стесняйтесь обращаться ко мне в любое время, если вам нужны разъяснения или, если вы где-нибудь застряли. Вы можете отправить мне сообщение на любой социальной платформе. Я буду рад вам помочь .
Ресурсы
- Выступление на Google I/O, затрагивающее аспект проектирования темной темы.
- Выступление на Google I/O, затрагивающее аспект разработки темной темы
- Dark Theme UI Kit/Sticker Sheet от Google.
- Design Lab для Figma от Google.
- Material Design UI Kit/Sticker Sheet для Figma.
- Material Design UI Kit/Sticker Sheet для Adobe XD.