Android studio как изменить тему приложения - Исправление ошибок и поиск оптимальных решений проблем

Темы и стили

Общая информация
Стили
Наследование стилей
Тема
Темы для диалоговых окон
Theme Editor

Общая информация

Чтобы наше приложение было стильным, можно воспользоваться специальной темой. Тема — это коллекция стилей, которые обеспечивают профессиональный вид приложению, чтобы оно было похоже на родные приложения Android. Сама система Android уже имеет несколько предустановленных тем, которыми можно воспользоваться в своих целях. Вам достаточно только указать имя темы в манифесте.

В предыдущем примере мы учились переключаться на другой экран, чтобы увидеть новое окно О программе. Сделаем это окно диалоговым, чтобы оно не занимало весь экран.

Откройте снова файл манифеста AndroidManifest.xml из прошлого урока и измените строчку для активности AboutActivity, указав тему.


<activity android:name=".About"
    android:label="@string/about_title"
    android:theme="@style/Theme.AppCompat.Dialog";>
</activity>

Запустив программу, вы увидите, что внешний вид окна «О программе» стал уже другим. Сравните.

Обратите внимание, что теперь появляется не окно во весь экран, а диалоговое окно в центре экрана. При этом остальная часть экрана затемняется.

Похожие темы: 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:


<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:textSize="18sp"
    android:text="@string/hello" />

Мы можем вынести все свойства в файл стилей следующим образом:

res/values/styles.xml


<?xml version="1.0" encoding="utf-8"?>
<resources> 
    <style name="MyTextStyle" parent="@style/Text"> 
        <item name="android:textSize">18sp</item> 
        <item name="android:textColor">#00FF00</item> 
        <item name="android:typeface">monospace</item>
    </style> 
</resources>

Тогда в файле разметки теперь будет так:


<TextView
    style="@style/MyTextStyle"
	...
    android:text="@string/hello" />

Как видите, мы удалили все свойства для текста из файла разметки и разместили их в файле стилей в ресурсе под именем MyTextStyle, который содержит теперь все необходимые свойства.

Создать файл со стилями несложно. Создаем новый XML-файл в папке res/values/ вашего проекта. Имя файла не имеет значения, главное, чтобы расширение было XML, а сам файл находился в указанной папке. В проекте, создаваемом студией, уже есть готовый файл res/values/styles.xml, в который вы можете добавить новые стили. А также вы можете создать свой отдельный файл стилей.

Корневым узлом файла должен быть элемент <resources>. Для каждого элемента, которому требуется стиль, нужно добавить элемент <style> с уникальным именем. Далее создаются элементы <item> для каждого свойства и присваиваются им имена, которые отвечают за выбранное свойство. Значением элемента <item> должно выступать ключевое слово, цвет в шестнадцатеричном значении, ссылка на другой тип ресурсов или другое значение в зависимости от свойства стиля. Ниже представлен образец такого стиля:


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTextStyle" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
    </style>
</resources>

Во время компиляции все свойства из файла стилей будут извлечены и применены к элементам.

Атрибут parent для элемента style является необязательным и позволяет задавать идентификатор ресурса другого стиля, из которого нужно наследовать свойства. При этом вы можете переопределить свойства в случае необходимости.

Быстрое создание стилей через Android Studio

Если вы решили вынести некоторые свойства компонентов в стили, то необязательно это делать вручную. В студии есть удобный инструмент для быстрого создания ресурсов стилей.

В текстовом режиме щёлкните правой кнопкой мыши на нужном компоненте и в контекстном меню выбирайте пункт Refactor | Extract | Style. Далее укажите имя стиля и выберите требуемые параметры для экспорта. Студия самостоятельно создаст стиль в файле styles.xml и автоматически применит созданный ресурс в layout-файле.

Наследование стилей

Наследование — мощный и полезный механизм, позволяющий не изобретать велосипед, а использовать готовые проверенные наработки. С помощью атрибута parent в элементе style вы можете наследовать нужные свойства из существующих стилей, а также переопределить некоторые свойства или добавить свои дополнительные свойства. Предположим, мы решили наследоваться от существующего системного стиля Android для текстовых сообщений и слегка модифицировать его.


<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

Если вы собираетесь наследоваться от собственных стилей, то использовать атрибут parent не нужно. Просто используйте префикс имени наследуемого стиля перед создаваемым новым стилем, разделяя имена стилей точкой. Например, для создания нового стиля, который наследуется от стиля MyTextStyle, созданного нами ранее, где мы хотим получить красный текст, используйте следующий способ:


<style name="MyTextStyle.Red">
    <item name="android:textColor">#FF0000</item>
</style>

Как видите, нам не пришлось использовать атрибут parent в теге style, потому что имя стиля начинается с имени MyTextStyle (созданный нами стиль). Теперь наш стиль наследует все свойства от стиля родителя, при этом мы изменили одно свойство android:textColor, чтобы текст выводился красным цветом. Вы можете ссылаться на новый стиль через конструкцию @style/MyTextStyle.Red.

Вы можете продолжать наследоваться дальше много раз, добавляя новые имена через точку. Допустим, мы хотим расширить свойство MyTextStyle.Red, чтобы текст выводился более крупным шрифтом:


<style name="MyTextStyle.Red.Big">
    <item name="android:textSize">30sp</item>
</style>

Итак, мы наследовались от стилей MyTextStyle и MyTextStyle.Red, а затем добавили новое свойство android:textSize.

Не забывайте, что данная техника наследования применима только к собственным стилям. Для наследования системных стилей типа TextAppearance необходимо использовать атрибут parent.

Свойства стиля

Разобравшись с созданием стилей, рассмотрим различные свойства, определяемые в элементе item. Мы уже встречались с такими свойствами, как layout_width и textColor. На самом деле свойств гораздо больше.

Для поиска свойств, которые применимы к заданному View, можно обратиться к документации и просмотреть все поддерживаемые свойства. Так все атрибуты, перечисленные в таблице атрибутов класса TextView могут быть использованы для элементов TextView или EditText. Например, у данных элементов есть свойство android:inputType:


<EditText
    android:inputType="number"
    ... />

Но вместо этого мы можем также создать стиль для элемента EditText, который будет включать в себя данное свойство:


<style name="Numbers">
  <item name="android:inputType">number</item>
  ...
</style>

В файле разметки теперь можно написать так:


<EditText
    style="@style/Numbers"
    ... />

На первый взгляд вам возможно покажется, что подобный подход отнимает слишком много времени. Но в больших проектах повторное использование стиля поможет вам сэкономить и время и силы.

Для просмотра всех существующих стилей вы можете посмотреть исходники Android. Найдите папку, в которую вы устанавливали Android SDK, там можно найти нужные исходники. Например, у меня путь к исходникам стилей Android API 17 выглядит следующим образом: D:Androidandroid-sdk-windowsplatformsandroid-17dataresvaluesstyles.xml. Помните, что все объекты View не поддерживает сразу все существующие атрибуты, поэтому используйте только специфичные стили для выбранного элемента. Но если вы по ошибке зададите ошибочный стиль для View, то это не вызовет краха приложения. Элемент View будет использовать только подходящие свойства и игнорировать чужие для него свойства.

Существуют также свойства, которые не поддерживаются ни одним элементом View и применимы только как тема. Подобные стили действуют сразу на всё окно, а не на отдельный элемент. Например, есть тема, скрывающая заголовок приложения, строку состояния или изменяющая фон окна. Подобные стили легко определить по слову window, с которого начинается название стиля: windowNoTitle, windowBackground (о них ниже).

Не забывайте использовать префикс android перед именем в каждом элементе item: <item name=»android:inputType»>.

Отдельно стоит отметить создание стиля для кнопки. У кнопки есть несколько состояний — обычное, в фокусе, нажатое, нажатое с фокусом. Поэтому для кнопки нужно создать четыре отдельных стиля, чтобы кнопка выглядела профессионально.

Извлечение свойств в стили

Если вы решили в своём проекте использовать стили и вам нужно быстро переместить нужные атрибуты, то 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-файле элементами <style>, и ссылаются на них тем же самым способом. Различие состоит в том, что тема добавляется ко всему приложению или к отдельной активности через элементы <application> и <activity> в файле манифеста приложения, т. к. темы не могут быть применены к отдельным компонентам.

Чтобы установить тему, откройте файл AndroidManifest.xml и отредактируйте тег <application>, чтобы он включал в себя атрибут android:theme с указанием имени стиля:


<application android:theme="@style/CustomTheme">

Если вы хотите, чтобы тема относилась не ко всему приложению, а к отдельной активности, то атрибут android:theme нужно добавить в тег <activity>.

Во многих случаях нет необходимости придумывать свои стили и темы, так как Android содержит множество собственных встроенных тем. Например, вы можете использовать тему Dialog, чтобы окно приложения выглядело как диалоговое окно (Смотри выше).

Если вам нравится тема, но несколько свойств всё-таки хотите подправить под себя, то просто добавьте тему как родительскую тему к своей теме. Например, мы хотим модифицировать стандартную тему Theme.Light, чтобы использовать свои цвета.


<color name="custom_theme_color">#b0b0ff</color>
<style name="CustomTheme" parent="android:Theme.Light">
    <item name="android:windowBackground">@color/custom_theme_color</item>
    <item name="android:colorBackground">@color/custom_theme_color</item>
</style>

Теперь мы можем использовать свой стиль вместо Theme.Light в манифесте:


<activity android:theme="@style/CustomTheme">

Небольшой список свойств, которые используются для настройки собственных тем.

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 и будем использовать предлагаемое значение.

Зададим основной цвет.


<color name="primaryColor">#FF9800</color>

Для строки состояние, которая находится выше заголовка приложения, нужно использовать цвет со значением 700 (colorPrimaryDark). Это более тёмный цвет и позволяет различать заголовок приложения и строку состояния. Возвращаемся к оранжевой таблице цветов, запоминаем значение цвета и прописываем его в ресурсах.


<color name="primaryColorDark">#F57C00</color>

Пропишем в теме приложения новые элементы.


<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryColorDark</item>
    </style>

</resources>

На старых устройствах цвет строки состояния не изменяется. Цвет заголовка поменять можно.

В файле res/values-v21/styles.xml для новых устройств нужно повторить указанные действия с небольшой поправкой. В API 21 уже есть предопределённые константы для эти цветов, поэтому используем в именах android:colorPrimary и android:colorPrimaryDark.

В одной из недавних версий библиотеки совместимости была реализована поддержка нового дизайна для всех устройст и такое разделение сейчас не является обязательным.


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="android:Theme.Material.Light">
        <item name="android:colorPrimary">@color/primaryColor</item>
        <item name="android:colorPrimaryDark">@color/primaryColorDark</item>
    </style>
</resources>

С главным цветом есть одна тонкость. Старые устройства используют ActionBar и его цвет подчиняется правилам Material Design из коробки. На новых устройствах для активности используется тема без панели действий Theme.AppCompat.NoActionBar и вручную добавляется компонент Toolbar. Чтобы он использовал основной цвет, используйте правильный стиль для фонового цвета.


<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary" />

Третий важный цвет для использования в приложениях — акцентированный. Данный цвет может использоваться для кнопки Floating Action Button и для различных компонентов. Он должен быть достаточно контрастным по сравнению с основным цветом. Для примера выберем зелёный цвет по цвету глаз рыжих котов. Находим в таблице зелёный цвет и выбираем нужное значение из A400


<color name="accentColor">#00E676</color>

Прописываем цвет в обоих темах:


<item name="colorAccent">@color/accentColor</item>

<item name="android:colorAccent">@color/accentColor</item>

Сейчас акцентированный цвет мы нигде не увидим. Вернёмся к нему позже.

Акцентированные цвета поддерживаются многими компонентами из коробки. Для некоторых следует использовать аналоги из библиотеки AppCompat:

Флажки и переключатели
SwitchCompat вместо Switch
Курсор у EditText
Текст у TextInputLayout
Текущий индикатор у TabLayout
Выбранный элемент у NavigationView
Фон у FloatingActionButton

Пользуйтесь сервисом Material Design Color Palette Generator для создания палитры в стиле Material: выбираем основной цвет, цвет «плавающей» кнопки и сайт генерирует необходимую палитру.

В Android 5.0 появился новый атрибут темы colorEdgeEffect. Вам необходимо переопределить тему, а затем применить к компоненту.


res/values/themes.xml

<style name="RedThemeOverlay" parent="android:ThemeOverlay.Material">
    <item name="android:colorEdgeEffect">#FF0000</item>
</style>
res/layout/fragment_list.xml

<ListView
    ...
    android:theme="RedThemeOverlay" />

Темы для диалоговых окон

По умолчанию, диалоговые окна на Lollipop-устройствах будут выглядеть в стиле Material Design. Но если вы хотите немного изменить внешний вид, то можно применить стили и темы к ним. Создайте отдельный стиль:


<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">@color/primary</item>
</style>

Добавьте созданный стиль к теме.


<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:alertDialogTheme">@style/AlertDialogCustom</item>
</style>

Также можно создать отдельный стиль для негативной кнопки, чтобы она была красной и отличалась от позитивной кнопки.


<style name="AlertDialogCustom.Destructive">
    <item name="android:buttonBarPositiveButtonStyle">@style/DestructiveButton</item>
</style>
 
<style name="DestructiveButton"
        parent="android:Widget.DeviceDefault.Button.Borderless">
    <item name="android:textColor">@color/red</item>
</style>

Затем в коде используете созданный стиль.


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) {
    AlertDialog.Builder builder = new AlertDialog.Builder(this);
    builder.setTitle("Dialog");
    builder.setMessage("Покормить кота?");
    builder.setPositiveButton("OK", null);
    builder.setNegativeButton("Cancel", null);
    builder.show();
}

Добавим стили в файл styles.xml:


<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorAccent">#FFCC00</item>
    <item name="android:textColorPrimary">#FFFFFF</item>
    <item name="android:background">#5fa3d0</item>
</style>

Для вывода диалогового окна будем использовать класс из библиотеки совместимости, у которого есть дополнительный параметр для указания темы.


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 и создайте стиль для него.


<item name="android:windowTitleStyle">@style/TitleDialogTextStyle</item>

<style name="TitleDialogTextStyle">
    <item name="android:textColor">#d71616</item>
</style>

Стили для компонентов

У компонентов также появились новые стили, связанные с Material Design. Например, TextAppearance.Material.Title:


<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="@android:style/TextAppearance.Material.Title"
    android:id="@+id/textView"
    android:text="Текст в стиле Title" />

Темы для компонентов

Обычно темы применялись к активности или приложению. Сейчас самый распространённый вариант Theme.AppCompat.

В Lollipop и AppCompat с версии 22.1 стало возможным присваивать тему отдельному компоненту. В этой связи появился отдельный тип темы ThemeOverlay, который позволяет менять только необходимые настройки. Например, ThemeOverlay.AppCompat.Light меняет фоновый цвет, цвет текста и выделенный текст, как если это была бы светлая тема. Соответственно, ThemeOverlay.AppCompat.Dark работает как тёмная тема.

Это может пригодится, чтобы цвет текста не совпадал с цветом фона и был читаемым. Например, это часто используется у Toolbar:


<android.support.v7.widget.Toolbar
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="?attr/colorPrimary"
  android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

Также используется при создании собственных тем


<style name="ThemeOverlay.AccentSecondary"
       parent="ThemeOverlay.AppCompat">
  <item name="colorAccent">@color/accent_secondary</item>
</style>

Выбор темы в зависимости от версии платформы

Каждая новая версия Android обзаводится несколькими новыми темами. И, возможно, вам захочется использовать новые темы в своих приложениях, чтобы пользователи новых аппаратов увидели современный интерфейс, при этом владельцы старых аппаратов будут видеть приложение в другом виде.

Предположим у вас есть собственная тема, использующая стандартную светлую тему, в файле res/values/styles.xml:


<style name="LightThemeSelector" parent="android:Theme.Light">
    ...
</style>

Чтобы задействовать также новую голографическую тему, доступную в Android 3.0 (API Level 11) и выше, создайте альтернативный файл стилей в папке res/values-v11, где будет указана новая тема:


<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
    ...
</style>

Для последней версии Android 5.0 вам понадобится папка res/values-21 для темы, использующую Material Design.

Теперь программа автоматически будет переключаться между стилями, самостоятельно определяя версию Android.

Список стандартных атрибутов, используемых в темах, можно найти на странице R.styleable.Theme.

Использование стилей и тем платформы

Вы можете создавать собственные стили, а можете подключать готовые системные стили или отдельные атрибуты стилей, используемых в Android. Для указания стиля, предопределённого в Android, используется следующий синтаксис:


style="@android:style/TextAppearance

Если вам нужно выбрать только отдельную часть стиля, то используйте знак вопроса:


<EditText
    id="@+id/edit"
	android:textColor:="?android:textColorSecondary" />

Знак ? применяется для поиска значения стиля в текущей теме, а подстрока ?android означает поиск значения стиля в системной теме Android.

В студии можно выбрать системную тему сразу из среды разработки. Откройте файл разметки в режиме Design. Чуть выше формы имеется выпадающая кнопка AppTheme. Нажмите на неё и поиграйтесь со списком, чтобы просмотреть другие варианты. Вы сможете увидеть, как будет выглядеть ваше приложение в разных темах. Учтите, что эта настройка не вносит изменения в ваш файл, а предназначена только для просмотра темы, чтобы вы представляли, как будет выглядеть программа у разных пользователей.

В последних версиях проектов студии, которые используют тему AppCompat для создания полноэкранной активности используйте стиль:


<style name="Theme.AppCompat.Light.NoActionBar.FullScreen" parent="Theme.AppCompat.Light">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

И примените его к нужной активности.


<activity
    android:name=".MainActivity"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar.FullScreen">

Новые темы в Android 4.4

В Android 4.4 появилась возможность сделать панель навигации и строку состояния полупрозрачными. Откройте файл styles.xml и добавьте строчки:


<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">

    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:fitsSystemWindows">true</item>
    <!--  <item name="android:actionBarStyle">@style/ActionBar.Solid.GreenStyle</item> -->
</style>


<style name="ActionBar.Solid.GreenStyle" parent="@android:style/Widget.Holo.Light.ActionBar.Solid">
    <item name="android:background">@android:color/holo_green_dark</item>
</style>

Последний пункт у меня закомментирован. Он позволяет настроить тему для 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 могут также использовать темы:


<Toolbar
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Небольшой список на память.

ThemeOverlay.AppCompat
ThemeOverlay.AppCompat.Light
ThemeOverlay.AppCompat.Dark
ThemeOverlay.AppCompat.ActionBar
ThemeOverlay.AppCompat.Dark.ActionBar

Например, ваши компоненты в разметке используют светлую тему, а родительский элемент должен использовать тёмную тему. Тогда применим к нему готовую тему.


<FrameLayout
    android:background="@color/dark_background"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">
  <TextView />
</FrameLayout>

Если вам нужно изменить конкретный атрибут, например, colorAccent, то добавьте новую тему:


<style name="CustomAccentOverlay" parent="ThemeOverlay.AppCompat">
   <item name="colorAccent">@color/custom_accent</item>
</style>

Примените тему к вашему компоненту через android:theme=»CustomAccentOverlay». Так вы можете переопределить и другие атрибуты.

Общие советы

Избегайте конкретных значений для цвета.


<View …
    android:background="@color/white"/>

Лучше используйте атрибуты, что позволит вам корректно переключаться к тёмной теме.


<View …
    android:background="?attr/colorSurface"/>

В некоторых ситуациях использование готовых значений цвета оправдано.

При работе с элементами темы программным способом не используйте Context от Application, только от Activity.

Дополнительное чтение

Обсуждение статьи на форуме.

Тема в Material Design

Best Practices for Themes and Styles (Android Dev Summit ’18) — YouTube

Собственная анимация для диалоговых окон

Анимация активностей при помощи тем и стилей

Переходи на светлую сторону — динамическая смена темы

When we are working on any editor or IDE we get used to it and its environment like if we are using Sublime then we like its dark background environment. We have now moved to Android studio but we are not comfortable with the default background and theme. Now the point that comes here is how we can Change or Add Themes to Android Studio. So in this article, we are going to discuss four different methods to Change or Add Themes to Android Studio.

Method 1: Changing default theme
Method 2: Add the theme to Android Studio by importing jar file
Method 3: Adding theme from Android Studio plugin section
Method 4: Adding theme by copying ICLS file to a particular directory

Method 1: Changing default theme

First of all, open your Android Studio:

Here you can see my Android Studio window and a demo application is running. In Android Studio, there are three default themes available i.e. Intellij Light, Dracula, and High Contrast. To change default themes go to File and click on Settings.

A new Settings dialog will appear, like this.

Under the Appearance & Behaviour -> Appearance, you will find Theme. Choose the right theme from the drop-down and click on Apply and then Ok. Here you can see the background and color scheme for all three themes.

Intellij Light theme

Dracula theme

High Contrast theme

Method 2: Add the theme to Android Studio by importing jar file

We will now add monokai theme of sublime to Android Studio. First of all download the jar file from my Github. To import this theme to our Android Studio, go to the File > Manage IDE Settings > Import Settings…

After clicking on Import Settings, a new dialog box will be open like this.

Now you have to select the downloaded jar file or you can do drag and drop too then click on Ok.

After clicking Ok, a new dialog box will open where we can select what component we want to import from jar file to editor.

Here select both colors and schemes and then click Ok. After this, a new box will be open.

Click on the Restart button to reload the settings. Here you can see the new theme. You can follow the same steps while importing any jar files.

Method 3: Adding theme from Android Studio plugin section

There is another way to add themes to the android studio by downloading the themes from the plugin section. Go to the File > Settings > Plugins.

Click on Marketplace and search for themes. Ex. themes

Here you can see a lot of different themes and select one and download it, after downloading you can apply these themes to your IDE and these downloaded themes will be available in your default themes collection.

solarized theme

Here you can see we have downloaded and applied solarized theme.

Method 4: Adding theme by copying ICLS file to a particular directory

You can refer to this GitHub repo for a set of amazing themes. Download the file and copy the file to the following directory:

%USERPROFILE%/.AndroidStudio/config/colors

Once you have copied the ICLS file to the above directory then restart the Android Studio so that theme will be applied to the IDE.

Источник

Method 1: Changing default theme
Method 2: Add the theme to Android Studio by importing jar file
Method 3: Adding theme from Android Studio plugin section
Method 4: Adding theme by copying ICLS file to a particular directory

Method 1: Changing default theme

First of all, open your Android Studio:

A new Settings dialog will appear, like this.

Intellij Light theme

Dracula theme

High Contrast theme

Method 2: Add the theme to Android Studio by importing jar file

After clicking on Import Settings, a new dialog box will be open like this.

Now you have to select the downloaded jar file or you can do drag and drop too then click on Ok.

After clicking Ok, a new dialog box will open where we can select what component we want to import from jar file to editor.

Here select both colors and schemes and then click Ok. After this, a new box will be open.

Click on the Restart button to reload the settings. Here you can see the new theme. You can follow the same steps while importing any jar files.

Method 3: Adding theme from Android Studio plugin section

There is another way to add themes to the android studio by downloading the themes from the plugin section. Go to the File > Settings > Plugins.

Click on Marketplace and search for themes. Ex. themes

solarized theme

Here you can see we have downloaded and applied solarized theme.

Method 4: Adding theme by copying ICLS file to a particular directory

You can refer to this GitHub repo for a set of amazing themes. Download the file and copy the file to the following directory:

%USERPROFILE%/.AndroidStudio/config/colors

Once you have copied the ICLS file to the above directory then restart the Android Studio so that theme will be applied to the IDE.

Источник

(Note: the exact paths shown here are primarily for Windows and Linux. I know Mac has a few non-standard paths, so if you’re on Mac, you may have to adjust the starting bit of the path. The point is, get into settings however you’d do that on a Mac)

Switch theme:

File -> Settings-> Appearance & behavior -> Appearance.

Select the «theme» dropdown, and change between whatever themes you have installed. It shows the default themes and any you have installed in the form of plugins.

Install new themes

As plugin from plugins.jetbrains.com

File-> Settings -> plugins -> install JetBrains plugin/browse repositories/install plugin from disk

Note: newer versions of Android Studio, and possibly IntelliJ, (at least Jan. 2021 and out) may instead have a Marketplace tab in place of the first and/or second one.

The last part has three different options. The first has a few amount of plugins, and looks like only the official plugins. Browse repositories have much more plugins, and seems to be like going to the plugin page. This is a shorter way than going to the intelliJ plugin page and downloading the plugins manually. If you download, click install plugin from disk. This allows you to drag and drop, or find .jar files.

In the install JetBrains plugins, browse repositories, and (newer versions) Marketplace tabs should have a search functionality. You can search for i.e. «theme» from there.

Источник

Разработчики могут менять оформление своего приложения так, как им только вздумается, для этого существует множество различных возможностей и инструментов. Можно использовать настройку тем, стилей, можно использовать сторонние библиотеки (вспоминаем урок о Picasso), можно создавать свою собственную разметку формата XML и применять ее к нужным элементам приложения. Сегодня мы освоим основы работы с темами и стилями в Android приложении.

Начнем с теории. Что такое темы и стили? Стиль — это попросту набор настроек внешнего вида программы, например, стиль текста — это его размер, шрифт, цвет ну и так далее. А тема это более широкое понятие, которое включает в себя использование различных стилей для многих элементов приложения (для текста, списков, кнопок и т.д.). Если мы применяем определенный стиль для некоторого одного или нескольких выбранных элементов приложения, то это уместно назвать стилем, а вот когда мы даже тот же самый стиль распространим на все приложение, то это уже смело можно называть темой, это более глобальное понятие. Чтобы применить стиль до всего приложения, его нужно задавать в тегах activity либо application в файле манифеста, а чтобы применить до отдельного объекта, то стиль нужно применять локально в его свойствах. В Android Studio по умолчанию уже имеется приличный набор самых разнообразных тем и стилей, и их список постоянно пополняется с выходом новых версий операционной системы и соответственно API для них. А теперь давайте перейдем к практике.

За основу для нашего урока возьмем предыдущий урок о создании приложения с двумя Activity. Для усовершенствования навыков можете повторить тот урок заново, а можете просто быстро пройтись по нему и скопировать оттуда весь необходимый код.

Сначала поработаем со стандартными темами. Как вы помните, в нашем приложении имеется два activity и кнопка перехода с одного экрана на другой. Давайте немного по колдуем над темой второго окна. Сделаем так, чтобы второе окно отображалось в виде диалогового окна. Для этого открываем файл манифеста AndroidManifest.xml и добавим к коду второго окна следующее:

<activity
 android:name=".SecondActivity"
 android:label="Второе окно"
 android:theme="@android:style/Theme.Dialog"
 >
 </activity>

Теперь запустим приложение и посмотрим как отобразится второе окно, когда мы на него переходим, нажимая кнопку перехода:

Как видите, приложение просто преобразилось, и все благодаря одной строчке! Можете посмотреть на другие стандартные темы. Выделите в строке android:theme=»@android:style/Theme.Dialog» слово Dialog и нажмите комбинацию клавиш Ctrl + Пробел и Android Studio покажет вам немаленький список тем, которые вы можете использовать. Например, можете попробовать тему Theme.Black.NoTitleBar.Fullscreen — второе окно будет черного цвета с полностью скрытыми всеми панелями, мы увидим только наш элемент TextView на черном фоне, Theme.Wallpaper — с этой темой второй экран примет картинку обоев рабочего стола устройства в качестве фона. Как видите, существует широчайший выбор возможностей красиво оформить приложение. Также стоит отметить, что если вы хотите досконально изучить одну из стандартных тем Android Studio, то выделите название темы, например, Wallpaper, и нажмите комбинацию клавиш Ctrl + B. Откроется отдельный файл по имени themes.xml и в нем вы можете увидеть полный перечень тем и их настройки. Более того, никто не мешает вам их изменить. Но это не лучший путь, лучше не портить стандартные темы таким образом. Как можно отредактировать стандартные темы мы увидим позже.

Сейчас давайте научимся применять стили для объектов Android приложения. Начнем с самого простого — с текста. Чтобы стилизировать конкретный элемент TextView мы обычно в его свойствах описываем все желаемые параметры: цвет, размер текста, курсив и т.д. Давайте в файле activity_main.xml создадим элемент TextView:

<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Стилизированный текст"
 android:layout_gravity="center"
 android:textSize="18pt"
 android:textColor="#FF4500"
 android:typeface="serif"/>

Наш текст имеет оранжевый цвет, размер 18pt, тип шрифта serif:

Но представьте, что у нас в интерфейсе будет много элементов TextView и мы хотим задать им всем одинаковый стиль. Получается, что мы вынуждены продублировать одинаковый код для всех элементов. Но это лишний труд и бессмысленное загромождение кода программы. И вот здесь лучше использовать стили. Сделаем такой же текст, но с использованием стиля. Для этого, открываем файл приложение styles.xml и создадим между тегами resourses свой стиль для текста под названием TextStyle:

<resources>
<style name="TextStyle">
 <item name="android:textSize">18pt</item>
 <item name="android:textColor">#FF4500</item>
 <item name="android:typeface">serif</item>
</style>
</resources>

Возвратимся к нашему элементу TextView и изменим его код так:

<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Стилизированный текст"
 android:layout_gravity="center"
 style="@style/TextStyle"/>

И что же мы видим? Наш текст принял точно такой же вид, ну не отличить, а в коде 3 строчки заменены всего на одну. Вот так мы и создали слить для текста. И заметьте, что этот стиль можно применить к любому элементу TextView.

Также возможен такой вариант, что мы возьмем некоторый стиль за базовый, родительский, и на его основе сделаем свой путем добавления изменений в базовый стиль. Например, возьмем за базовый стиль наш TextStyle и создадим новый стиль, который изменит размер текста с 18pt на 12pt:

<style name="TextStyle2" parent="TextStyle">
 <item name="android:textSize">12pt</item>
 </style>

Осталось только поменять стиль в элементе TextView с TextStyle1 на TextStyle2:

<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Стилизированный текст"
 android:layout_gravity="center"
 style="@style/TextStyle2"/>

И мы видим, что текст поменялся в размере с 18pt на 12pt:

Вот так мы с помощью стилей обработали текст. Еще нужно заметить, что наследовать от основного стиля, можно и по другому, не используя команду parent, а вот так:

<style name="TextStyle.TextStyle2">
 <item name="android:textSize">12pt</item>
 </style>

Соответственно в коде текста теперь будет так:

<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Стилизированный текст"
 android:layout_gravity="center"
 style="@style/TextStyle.TextStyle2"/>

Давайте рассмотрим более сложный пример работы со стилями. У нас есть кнопка перехода с одного экрана на другой. Сделаем для этой кнопки собственный стиль. Для этого нам понадобиться создать в папке drawable приложения файл button_style.xml и добавить туда такой градиент (можете конечно выбирать свои цвета):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
 <corners android:radius="12px" />
 <gradient
 android:angle="90"
 android:endColor="#FFA500"
 android:startColor="#FF4500"
 android:type="linear" />
 <padding
 android:bottom="5px"
 android:left="3px"
 android:right="3px"
 android:top="5px" />
</shape>

Теперь идем в файл styles.xml и добавим туда новый стиль на основе созданного файла с градиентом, который и применим потом к кнопке:

<style name="ButtonStyle" parent="@android:style/Widget.Button">
 <item name="android:background">@drawable/button_style</item>
 <item name="android:textSize">12pt</item>
 <item name="android:textColor">#FFFFE0</item>
 </style>

Теперь остается только пройти в файл activity_main.xml и применить новый стиль к нашей кнопочке:

<Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/transfer"
 android:text="Переход"
 android:layout_gravity="center"
 android:onClick="Click"
 style="@style/ButtonStyle"/>

И кнопка приобретает следующий вид:

Видим, что вид кнопки стал существенно приятней стандартного.

Подведем итог — в этом уроке мы разобрались, что такое темы и стили в Android приложении, научились создавать свои несложные стили для элементов TextView и Button. На этом пока все, удачи в изучении!

Источник

Каждому Android-разработчику так или иначе приходилось работать со стилями. Кто-то чувствует себя с ними уверенно, у кого-то есть только поверхностные знания, которые зачастую не позволяют самостоятельно решить поставленную задачу.

В преддверии выхода темной темы было решено освежить в памяти всю информацию, касающуюся тем и стилей в Android-приложениях.

О чем пойдет речь:

Рассмотрим основные понятия тем и стилей в Android-приложениях, посмотрим какие возможности они нам предоставляют;
Создадим простейшую тему с использованием Material Components и поиграемся с переопределением стилей;
Разберемся, как работает темная тема;
Сформулируем рекомендации для работы со стилями.

Начнем с основ

По своей структуре темы и стили имеют общее строение:

<style name="MyStyleOrTheme">
    <item name="key">value</item>
</style>

Для создания используется тег style. У каждого cтиля есть имя и он хранит в себе параметры key-value.

Все достаточно просто. Но в чем же разница между темой и стилем?

Единственное отличие заключается в том, как мы их используем.

Тема

Тема — это набор параметров, которые применяются ко всему приложению, Activity или View-компоненту. Она содержит базовые цвета приложения, стили для отрисовки всех компонентов приложения и различные настройки.

Пример темы:

<style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!--Base colors-->
    <item name="colorPrimary">@color/color_primary</item>
    <item name="colorPrimaryVariant">@color/color_primary_variant</item>
    <item name="colorSecondary">@color/color_secondary</item>

    <item name="colorOnPrimary">@color/color_on_primary</item>
    <item name="colorOnError">@color/color_on_error</item>

    <!--Style attributes-->
    <item name="textAppearanceHeadline1">@style/TextAppearance.MyTheme.Headline1</item>
    <item name="bottomSheetDialogTheme">@style/ThemeOverlay.MyTheme.BottomSheetDialog</item>
    <item name="chipStyle">@style/Widget.MaterialComponents.Chip.Action</item>
    <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.FilledBox</item>

    <!--Params-->
    <item name="android:windowTranslucentStatus">true</item>

    <!-- ... -->
</style>

В теме переопределены основные цвета приложения (colorPrimary, colorSecondary), стиль для текста (textAppearanceHeadline1) и некоторых стандартных компонентов приложения, а также параметр для прозрачного статус-бара.

Для того чтобы стиль стал настоящей темой, необходимо отнаследоваться (о наследовании мы поговорим чуть позже) от дефолтной реализации темы.

Стиль

Стиль — это набор параметров для стилизации одного View-компонента.

Пример стиля для TextInputLayout:

<style name="Widget.MyApp.CustomTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="boxBackgroundMode">outline</item>
    <item name="boxStrokeColor">@color/color_primary</item>
    <item name="shapeAppearanceOverlay">@style/MyShapeAppearanceOverlay</item>
</style>

Атрибут

Атрибутом принято называть ключ стиля или темы. Это маленькие кирпичики из которых все строится:

colorPrimary
colorSecondary
colorOnError
boxBackgroundModе
boxStrokeColor
shapeAppearanceOverlay
...

Все эти ключи являются стандартными атрибутами.

Мы можем создавать свои атрибуты:

<attr name="myFavoriteColor" format="color|reference" />

Атрибут myFavoriteColor будет указывать на цвет или ссылку на ресурс цвета.

В формате мы можем указать вполне стандартные значения:

color
reference
string
enum
fraction
dimension
boolean
flags
float
integer

По своей природе атрибут является интерфейсом. Его необходимо реализовать в теме:

<style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- ... -->
    <item name="myFavoriteColor">@color/color_favorite</item>
</style>

Теперь мы можем на него ссылаться. Общая структура обращения выглядит так:

1 — указывает на то, что мы ищем в теме;
2 — namespace для поиска (системный ресурс или Material Components Library);
3 — указывает на то, что мы ищем атрибут (опционально);
4 — имя атрибута.

Ну и, наконец, давайте поменяем, например, цвет текста у поля:

<androidx.appcompat.widget.AppCompatTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="?attr/myFavoriteColor"/>

Благодаря атрибутам мы можем добавлять какие-угодно абстракции, которые будут изменяться внутри темы.

Наследование тем и стилей

Как и в ООП, мы можем перенимать функционал существующей реализации. Сделать это можно двумя способами:

Explicit (явно)
Implicit (неявно)

При явном наследовании мы указываем родителя с помощью ключевого слова parent:

<style name="SnackbarStyle" parent="Widget.MaterialComponents.Snackbar">
    <!-- ... -->
</style>

При неявном наследовании мы используем dot-notation для указания родителя:

<style name="SnackbarStyle.Green">
    <!-- ... -->
</style>

Никакой разницы в работе этих подходов нет.

Очень часто мы можем встретить подобные стили:

<style name="Widget.MyApp.Snackbar" parent="Widget.MaterialComponents.Snackbar">
    <!-- ... -->
</style>

Может показаться, что стиль создан путем двойного наследования. На самом деле это не так. Множественное наследование запрещено. В таком определении явное наследование всегда выигрывает.

То есть будет создан стиль с именем Widget.MyApp.Snackbar, который является наследником Widget.MaterialComponents.Snackbar.

ThemeOverlay

ThemeOverlay — это специальные «легковесные» темы, которые позволяют переопределить атрибуты основной темы для View-компонента.

За примером далеко ходить не будем, а возьмем кейс из нашего приложения. Дизайнеры решили, что нам нужно сделать стандартное поле для ввода логина, которое будет иметь отличный от основного стиля цвет.

С основной темой поле ввода выглядит так:

Выглядит отлично, но дизайнеры настаивают на том, чтобы поле было в коричневом стиле.

Окей, как мы можем решить такую задачу?

Переопределить стиль?

Да, мы можем переопределить стиль и вручную поменять основные цвета вьюшки, но для этого нужно будет писать много кода, да и есть шанс, что мы про что-нибудь забудем.
Написать свою вьюшку по гайдлайнам и с кастомными параметрами?

Хороший вариант, так мы сможем удовлетворить любые хотелки дизайнеров и заодно прокачать скилл, но все это трудозатратно и может привести к нежелательным багам.
Переопределить основной цвет в теме?

Мы выяснили, что для нужного нам вида достаточно поменять colorPrimary в теме. Рабочий вариант, но так мы затронем внешний вид остальных компонентов, а нам это не нужно.

Правильное решение — это использовать ThemeOverlay.

Создаем ThemeOverlay и переопределяем основной цвет темы:

<style name="ThemeOverlay.MyApp.Login" parent="ThemeOverlay.MaterialComponents.TextInputEditText">
    <item name="colorPrimary">@color/colorBrown</item>
</style>

Далее указываем его с помощью специального тега android:theme в наш TextInputLayout:

<com.google.android.material.textfield.TextInputLayout
        android:theme="@style/ThemeOverlay.MyApp.Login"
        android:hint="Login"
        ... >

        <com.google.android.material.textfield.TextInputEditText
        ... />

</com.google.android.material.textfield.TextInputLayout>

Все работает так, как нам и нужно.

Конечно же возникает вопрос — как это работает под капотом?

Эту магию позволяет провернуть ContextThemeWrapper. При создании View в LayoutInflater будет создан контекст, где за основу будет взята текущая тема и в ней будут переопределены параметры, которые мы указали в нашей Overlay теме.

../LayoutInflater.java
final TypedArray ta = context.obtainStyledAttributes(attrs, ATTRS_THEME);
final int themeResId = ta.getResourceId(0, 0);
if (themeResId != 0) {
    context = new ContextThemeWrapper(context, themeResId);
}
ta.recycle();

Аналогичным образом мы можем самостоятельно переопределить любой параметр темы в приложении.

Последовательность применения тем и стилей ко View-компоненту

Главный приоритет имеет файл разметки. Если в нем определен параметр, то далее все аналогичные параметры будут игнорироваться.
```
<Button
        android:textColor="@color/colorRed"
        ... />
```

Следующий приоритет имеет стиль View:

<Button
        style=“@Widget.MyApp.ButtonStyle"
        ... />

Далее используются предопределенные стили для компонента:

<style name="Theme.MyApp.Main" parent="Theme...">
    <item name=“materialButtonStyle”>@Widget.MyApp.ButtonStyle</item>
    <!-- ... -->
</style>

Если параметры не были найдены, то используются атрибуты темы:

<style name="Theme.MyApp.Main" parent="Theme...">
    <item name=“colorPrimary”>@colorPrimary</item>
    <!-- ... -->
</style>

В общем-то это все, что нужно знать для того чтобы начать работу с темами. Теперь кратко посмотрим на обновленную дизайн-библиотеку Material Components.

Да прибудет с нами Material Components

Material Сomponents была представлена на Google I/O 2018 и является заменой Design Support Library.

Библиотека дает нам возможность использовать обновленные компоненты из Material Design 2.0. Кроме того, в ней появилось множество интересных настроек по кастомизации. Все это позволяет писать яркие и уникальные приложения.

Вот некоторые примеры приложений в новом стиле: Owl, Reply, Crane.

Перейдем к практике

Для создания темы нужно отнаследоваться от базовой темы:

Theme.MaterialComponents
Theme.MaterialComponents.NoActionBar
Theme.MaterialComponents.Light
Theme.MaterialComponents.Light.NoActionBar
Theme.MaterialComponents.Light.DarkActionBar
Theme.MaterialComponents.DayNight
Theme.MaterialComponents.DayNight.NoActionBar
Theme.MaterialComponents.DayNight.DarkActionBar

Все они очень похожи на AppCompat темы, но имеют дополнительные атрибуты и настройки.

Подробнее с новыми атрибутами можно познакомиться на material.io.

Если по каким-то причинам вы сейчас не можете переключиться на новую тему, то вам подойдут Bridge темы. Они наследуются от AppCompat тем и имеют все новые атрибуты Material Components. Нужно всего лишь добавить постфикс Bridge и использовать все возможности без опасений:

<!-- ... -->
Theme.MaterialComponents.Light.Bridge
<!-- ... -->

А вот и наша тема:

<style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/color_primary</item>
    <item name="colorPrimaryVariant">@color/color_primary_variant</item>
    <item name="colorSecondary">@color/color_secondary</item>
    <item name="colorSecondaryVariant">@color/color_secondary_variant</item>
<style>

Имена основных цветов (brand-цветов) претерпели изменения:

colorPrimary — наиболее часто используемый цвет в приложении (как и в AppCompat);
colorPrimaryVariant — оттенок основного цвета (аналог colorPrimaryDark из AppCompat);
colorSecondary — второй по частоте использования цвет в приложении (аналог colorAccent из AppCompat);
colorSecondaryVariant — оттенок вторичного цвета.

Дополнительную информацию по цветам можно найти на material.io.

Я уже упоминал, что тема содержит стандартные стили для каждого View-компонента. Например, для Snackbar стиль будет называться snackbarStyle, для checkbox — checkboxStyle и далее все по аналогии. Пример расставит все на свои места:

Создадим свой стиль и применим его к теме:

<style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- ... -->
    <item name="snackbarStyle">@style/Widget.MyApp.SnackbarStyle</item>
</style>

<style name="Widget.MyApp.SnackbarStyle" parent="Widget.MaterialComponents.Snackbar">
    <!-- ... -->
</style>

Важно понимать, что когда вы переопределяете стиль в теме, он применится ко всем View этого типа в приложении (Activity).

Если же вы хотите применить стиль только к одной конкретной View, то нужно использовать тег style в файле с разметкой:

 <com.google.android.material.button.MaterialButton
        style="@style/Widget.MyApp.SnackbarStyle"
        ... 
/>

Одно из нововведений, которое меня действительно впечатлило — это ShapeAppearance. Оно позволяет изменять форму компонентов прямо в теме!

Каждый View-компонент относится к определенной группе:

shapeAppearanceSmallComponent
shapeAppearanceMediumComponent
shapeAppearanceLargeComponent

Как мы можем понять из названия, в группах вьюшки разных размеров.

Проверим на практике:

<style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- ... -->
    <item name="shapeAppearanceSmallComponent">@style/Widget.MyApp.SmallShapeAppearance</item>
 </style>

<style name="Widget.MyApp.SmallShapeAppearance" parent=“ShapeAppearance.MaterialComponents.SmallComponent”>
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopLeft">20dp</item>
    <item name="cornerSizeBottomRight">15dp</item>
    <!--<item name="cornerFamily">cut</item>-->
    <!--<item name="cornerSize">8dp</item>-->
</style>

Мы создали Widget.MyApp.SmallShapeAppearance для «маленьких» компонентов. Закруглили верхний левый угол на 20dp и правый нижний угол срезали на 15dp.

Получили такой результат:

Выглядит интересно. Будет ли это работать в реальной жизни? Время покажет.

Как и для стилей, мы можем применить ShapeAppearance только для одного View-компонента.

Что там по темной теме?

Совсем скоро состоится релиз Android Q, а вместе с ним к нам придет и официальная темная тема.

Пожалуй, одна из самых интересных и эффектных возможностей новой версии Android — это автоматическое применение темной темы для всего приложения одной строчкой кода.

Звучит здорово, давайте пробовать. Предлагаю взять всеми любимый гитлаб клиент от terrakok.

Разрешаем перекрашивать приложение (по умолчанию запрещено):

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- ... -->
    <item name="android:forceDarkAllowed">true</item>
</style>

Атрибут android:forceDarkAllowed доступен с API 29 (Android Q).

Запускаем, смотрим что получилось:

Согласитесь, что для одной строчки кода выглядит очень круто.

Конечно, есть проблемы — BottomNavigationBar сливается с фоном, лоадер остался белым, выделение кода страдает и, вроде бы, все, по крайне мере мне больше ничего серьезного в глаза не бросилось.

Уверен, что потратив не так много времени, можно решить основные проблемы. Например, отключив автоматический темный режим для отдельных вьюшек (да, так тоже можно — android:forceDarkAllowed доступен для View в файле-разметке).

Следует помнить, что данный режим доступен только для светлых тем, если вы используете темную, то принудительная темная тема работать не будет.

Рекомендации по работе можно почитать в документации и на material.io.

А если мы хотим все делать самостоятельно?

Как бы не было просто использовать принудительную темную тему, этот режим лишен гибкости. Фактически, все работает по заранее определенным правилам, которые могут не устраивать нас и, что более важно, заказчика. Думаю, что такое решение можно рассматривать как временное, до тех пор пока мы не сделаем свою реализацию темной темы.

В API 8 (Froyo) был добавлен квалификатор -night, который и по сей день используется для применения темной темы. Он позволяет автоматически применять нужную тему в зависимости от времени суток.

В темах DayNight уже используется такая реализация, нам достаточно отнаследоваться от них.

Давайте попробуем написать свою:

../values/themes.xml
<style name="Theme.DayNight.Base" parent="Theme.MaterialComponents.Light"/>

<style name="Theme.MyApp.Main" parent="Theme.DayNight.Base>
    <!-- ... -->
</style>

../values-night/themes.xml
<style name="Theme.DayNight.Base" parent="Theme.MaterialComponents"/>

В обычном ресурсе для темы (values/themes.xml) мы наследуемся от светлой темы, в «ночном» (values-night/themes.xml) ресурсе наследуемся от темной темы.

На этом все. Мы получили библиотечную реализацию темной темы. Теперь нам следует поддерживать ресурсы для двух тем.

Чтобы переключаться между темами во время работы приложения можно воспользоваться AppCompatDelegate.setDefaultNightMode, который принимает следующие параметры:

MODE_NIGHT_NO — Светлая тема;
MODE_NIGHT_YES — Темная тема;
MODE_NIGHT_AUTO_BATTERY — Автоматический режим. Включается темная тема, если активен режим энергосбережения;
MODE_NIGHT_FOLLOW_SYSTEM — Режим на основе системных настроек.

Что нам следует учитывать при работе с темами и стилями?

Как я уже отметил, Google начал официально форсить темную тему. Уверен, что от многих заказчиков начали поступать вопросы — «Сможем ли мы добавить темную тему?». Хорошо, если вы с самого начала все делаете правильно и вам не составит труда поменять светлые цвета на темные, получив при этом полностью перекрашенное приложение.

К сожалению, так бывает далеко не всегда. Бывают старые приложения, которые требуют значительных усилий для того, чтобы внести необходимые изменения.

Давайте вместе попытаемся сформулировать рекомендации для работы со стилями:

1. Палитра цветов

Думаю, что каждый разработчик сталкивался с ситуацией когда в новом макете появляется какой-то непонятный цвет, который еще не определен в палитре приложения. Что делать в таком случае?

Правильный ответ — поговорить с дизайнером и попытаться выработать палитру цветов. Сейчас есть множество программ (Zeplin, Sketch и др.), которые позволяют вынести основные цвета и потом переиспользовать их.

Чем раньше вы этим займетесь, тем меньше у вас будет головной боли в дальнейшем.

2. Называть цвета своими именами

В каждом приложении найдется цвет, который имеет множество вариантов яркости. Можно для них начать выдумывать имена:

<color name="green_tiny">...</color>
<color name="green_light">...</color>
<color name="green_dark">...</color>

Согласитесь, выглядит не очень. Сразу возникает вопрос — какой цвет светлее tiny или light? А если у нас будет десяток вариантов?

Лучше всего придерживаться концепции Google и добавить в имена цветов соответствующую яркость (Google называет это вариантом цвета — colorVariant):

<color name="material_green_300">...</color>
<color name="material_green_700">...</color>
<color name="material_green_900">...</color>

При таком подходе мы сможем иметь сколько угодно вариантов яркости одного цвета и нам не придется придумывать специфичные имена, а это действительно трудно.

3. Абстрагироваться от конкретного цвета, если он меняется в разных темах

Так как мы пишем приложение в котором будет как минимум две темы, то мы не можем позволить себе ссылаться на конкретный цвет, если он реализуется в темах по-разному.

Давайте рассмотрим пример:

Мы видим, что в светлой теме, например, тулбар окрашен в фиолетовый, а в темной он темно-серый. Как бы нам реализовать такое поведение, используя только возможности тем?

Все достаточно просто — мы создадим атрибут и реализуем его в светлой и темной темах соответствующим цветом, как это описывалось ранее.

Google рекомендует связывать имена атрибутов с семантикой использования.

4. Не бояться создавать ресурсные файлы

Когда в файле styles.xml набирается много различных стилей, тем и атрибутов, то его становится сложно поддерживать.

Лучше всего разнести все по группам в отдельные файлы:

themes.xml — Theme & ThemeOverlay
styles.xml — Widget styles
type.xml — TextAppearance, text size etc
shape.xml — ShapeAppearance
motion.xml — Animations styles
system_ui.xml — Booleans, colors for UI control
//may be other files

Такое простое правило позволит избежать God-файлов и, следовательно, будет проще поддерживать стили.

5. Переиспользовать по максимуму

Как мы поступим, если захотим переопределить атрибут, который доступен только с определенной версии API?

Мы можем создать две отдельные темы:

../values/themes.xml
<style name="Theme.MyApp.Main" parent=”Theme.MaterialComponents.NoActionBar”>
    <!--Many definition-->
</style>

../values-v27/themes.xml
<style name="Theme.MyApp.Main" parent=”Theme.MaterialComponents.NoActionBar”>
    <!--Many definition-->
    <name="android:windowLightNavigationBar">...</item>
</style>

Нам теперь на каждую версию API делать тему со всеми параметрами? Нет, конечно! Мы сделаем базовую тему, где будут определены базовые атрибуты, доступные для всех версий API и отнаследуемся от нее в нужной версии API:

../values/themes.xml
<style name="Theme.MyApp.Base" parent=”Theme.MaterialComponents.DayNight.NoActionBar”>
    <!--Many definition-->
</style>

<style name="Theme.MyApp.Main" parent=”Theme.MyApp.Base”/>

../values-v27/themes.xml
<style name="Theme.MyApp.Base.V27" parent="Theme.MyApp.Base">
    <name="android:windowLightNavigationBar">...</item>
</style>

<style name="Theme.MyApp.Main" parent=”Theme.MyApp.Base.V27”/>

По такому принципу построены все темы в стандартной библиотеке.

6. Использовать векторные ресурсы и tint

Думаю, не стоит говорить почему векторные ресурсы — это хорошо. Все и так знают (на всякий случай ссылка на документацию). Ну а tinting поможет нам окрасить их в цвета темы.

Посмотреть что такое tinting и как с ним работать можно в этом примере.

7. ?android:attr/… vs ?attr/…

При обращении к ресурсам у нас есть возможность использовать как системные атрибуты, так и атрибуты из библиотеки Material Components. Важно понимать, что некоторые атрибуты существуют только с определенной версии API. Как мы все хорошо знаем, обращение к несуществующему ресурсу ведет к крэшу (lint, конечно, нам подскажет если что-то не так, но не стоит всегда полагаться на него)

android:background="?android:attr/selectableItemBackgroundBorderless"

android:background="?attr/selectableItemBackgroundBorderless"

В первом случае мы обращаемся к системному ресурсу, так как указали android. Во втором случае к атрибуту из библиотеки, где реализована обратная совместимость.

Лучше всегда использовать второй вариант.

8. Всегда указывать родителя для стиля

В родительском стиле могут быть параметры, без которых компонент будет неверно отрисовываться, поэтому следует всегда указывать родителя.

<style name="Widget.MyApp.LoginInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="errorTextColor">@color/colorError</item>
</style>

9. Тема, стиль или… ?

При созданий собственных тем и стилей будет здорово, если вы укажите префикс, говорящий о том что это за стиль и для чего он определен. Такое именование позволит очень просто структурировать и расширять стили.

<style name="Theme.MyApp.Main" parent=”...”/>

<style name="Widget.MyApp.LoginInputLayout" parent="..."/>
<style name="Widget.MyApp.LoginInputLayout.Brown"/>

<style name="ThemeOverlay.MyApp.Login" parent=”...”/>

10. Использовать TextAppearance

Хорошим тоном будет расширить основные стили для текста и везде их использовать.

Много полезной информации можно найти на сайте Material Design: Typography, Typography Theming.

Заключение

В заключение хочется сказать, что стилизация приложения — это обязанность не только разработчиков, но и дизайнеров. Только благодаря тесному взаимодействию мы сможем получить по-настоящему хороший и красивый продукт. Дизайнеры должны иметь представления о платформе и возможностях Material Components. Ведь именно на их плечи ложится ответственность по поддержке визуальной составляющей приложения. Дизайнерам доступен специальный плагин для Sketch — Material Theme Editor. В нем очень просто выбирать цвета для приложения и строить экраны на основе стандартных компонентов. Если ваши дизайнеры еще не знают о нем, то обязательно расскажите им.

Начать изучать Material Components можно с репозитория на GitHub — Modular and customizable Material Design UI components for Android. В нем собрано очень много информации по стандартным стилям и их возможностям. Кроме того, там есть приложение — sample, чтобы все сразу попробовать на практике.

Полезные ссылки:

Getting started with Material Components for Android
Theming Guide
Android themes & styles demystified — Google I/O 2016
Best Practices for Themes and Styles (Android Dev Summit ’18)
The Components of Material Design (Android Dev Summit ’18)
Masking Bitmaps на Android

Источник

This article walks you through 2 different ways to change your Android Studio theme. The first approach is to choose a theme from the built-in themes and the second one is to install a new theme made by the community as a plugin. Without any further ado, let’s get started.

Using a built-in theme

1. Open your Android Studio and go to:

File -> Settings-> Appearance & behavior -> Appearance if you’re using Windows.

Android Studio > Preferences > Appearance & behavior -> Appearance if you’re on a Mac.

2. Click on the dropdown labeled with Theme and select the theme you like from the list. After that, click on the Apply or OK button to apply your setting.

Here’s how the Dracula theme looks like:

The number of official themes is very limited. Currently, there are only 3: IntelliJ Light, Dracula, and High Contrast. If none of them can make you happy, let’s move on to the next section.

Using a third-party theme

1. Go to:

File -> Settings-> Plugins if you’re using Windows.

Android Studio > Preferences > Plugins if you’re on a Mac.

2. Type Theme into the search field to search. A list of so many themes will appear. Click on the Install button next to the theme you like to install it.

3. A confirmation dialog will show up. Select Accept to continue.

4. Last but not least, after the installing process is complete, you need to click on the Apply button or the OK button in the bottom right corner to activate the theme you recently added.

Removing a third-party theme

If you want to disable/uninstall a third-party theme, just go to the Installed tab, click on the Disable/Uninstall button associated with that theme. See the screenshot below for more clarity:

Finally, hit Apply or OK to save. You’ll come back to one of the built-in themes.

Conclusion

Using a suitable theme will help you to reduce eye strain and increase productivity when working with Android Studio. Hope this article can help you in some ways. If you’d like to explore more useful information, tips, and tricks about Android Studio, take a look at the following articles:

How to Create a new Android Emulator
Android: How to Get SHA Certificate Fingerprints
How to Reset Android Studio to the Default Settings
How to check your Android Studio version
Install Flutter and Dart plugins in Android Studio
2 Ways to Check Android SDK Versions (2021)

I have made every effort to ensure that every step in this article works properly, but I may have made some mistakes or omissions. If so, please send me an email: [email protected] or leave a comment to report errors.

Источник

Как разработчики Android, мы склонны в первую очередь фокусироваться на функциональности наших приложений. Однако одной функциональности достаточно редко хватает. В Google Play, где сегодня находится более миллиона приложений, внешний вид так же важен, как и функциональность, если не больше. Если вам трудно в этом поверить, я предлагаю вам быстро взглянуть на приложения в разделе «Топ чарты» в Google Play.

Существует два подхода к изменению внешнего вида приложений для Android. Первый подход включает прямое изменение свойств представлений в XML-файлах макета. Такой подход возможен только в том случае, если вы работаете над простым приложением, которое имеет небольшое количество видов и активностей. Второй подход предполагает создание и использование пользовательских стилей и тем. Если вы знакомы с веб-разработкой, первый подход сродни использованию встроенных стилей CSS, а второй подход сродни использованию таблиц стилей.

В этом уроке вы узнаете, как создавать пользовательские стили и темы для ваших приложений для Android. Вы также узнаете, как использовать инструменты и шорткаты Android Studio, которые облегчают создание стилей.

1. Создание стилей

Стили, очевидно, применяются к компонентам пользовательского интерфейса. Поэтому давайте начнем с создания новой пустой активности и добавления двух представлений в ее XML-файл макета.

<View android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="5dp"
    android:background="#009688"
    android:id="@+id/box1" />

<View android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#00BCD4"
    android:layout_margin="5dp"
    android:id="@+id/box2" />

Как видно из приведенного выше кода, свойства, такие как layout_width и layout_margin, явно включены в определение каждого представления.

Чтобы создать новый стиль для первого вида, щелкните его правой кнопкой мыши и выберите «Рефакторинг»> «Извлечь»> «Стиль».

Теперь вы увидите диалоговое окно, в котором вы можете указать имя стиля, а также выбрать атрибуты, которые должны быть в него включены. Пусть имя будет MyBox и выберите все атрибуты, кроме background.

Когда вы нажмете OK, вы увидите, что код для первого вида изменился.

1	<View android:background="#009688"
2	android:id="@+id/box1"
3	style="@style/MyBox" />

В представлении теперь есть атрибут style, который указывает на стиль MyBox. Вы можете взглянуть на определение стиля, открыв res/values/styles.xml.

<style name="MyBox">
    <item name="android:layout_width">100dp</item>
    <item name="android:layout_height">100dp</item>
    <item name="android:layout_margin">5dp</item>
</style>

Как только стиль был создан, его можно применить к любому виду. Например, вот как вы применили MyBox ко второму представлению:

1	<View android:background="#00BCD4"
2	android:id="@+id/box2"
3	style="@style/MyBox" />

С применяемыми стилями, вот как выглядят два вида в активности:

2. Расширение стилей

Android позволяет создавать стили, которые используют другие стили в качестве основы. Другими словами, он позволяет расширять существующие стили.

Существуют два разных синтаксиса, которые вы можете использовать при расширении стиля. Первый синтаксис часто называют неявным синтаксисом и он использует точечную нотацию. Например, вот как вы создаете два производных стиля, называемых TEAL и CYAN, используя MyBox в качестве родительского стиля:

<style name="MyBox.TEAL">
    <item name="android:background">#009688</item>
</style>

<style name="MyBox.CYAN">
    <item name="android:background">#00BCD4</item>
</style>

Как вы могли догадаться, у MyBox.TEAL и MyBox.CYAN есть все свойства MyBox. В дополнение к этим, у них есть свойство android: background.

Второй синтаксис для создания производного стиля обычно называют явным синтаксисом. Он включает использование атрибута parent, значение которого задано как имя родительского стиля. Вот фрагмент кода, который определяет стиль под названием TealBox.

1	<style name="TealBox" parent="MyBox">
2	<item name="android:background">#009688</item>
3	</style>

Применение производных стилей ничем не отличается от применения обычных.

<View android:id="@+id/box1"
    style="@style/TealBox" />

<View android:id="@+id/box2"
    style="@style/MyBox.CYAN" />

Большинство разработчиков используют неявный синтаксис при расширении своих собственных стилей и явный синтаксис при расширении стилей платформы.

3. Создание тем

Все это время мы применяли только стили к представлениям, которые находятся внутри активности. Android также позволяет применять стили для всех видов активностей и приложений. Когда стиль применяется к активности или приложению, он становится темой.

По умолчанию все приложения, созданные с использованием последней версии Android Studio, используют тему AppTheme. AppTheme является потомком известной темы AppCompat, большой и очень всеобъемлющей темы, которая может повлиять на внешний вид почти всех широко используемых представлений.

Вы можете найти определение AppTheme в styles.xml:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

AppTheme использует Material Design. Поэтому для создания собственных тем, соответствующих спецификации Material Design, можно использовать AppTheme в качестве родителя. Кроме того, вы можете напрямую использовать Theme.AppCompat в качестве родителя.

Хотя вы всегда можете создавать темы, написав XML-код, помните, что это просто стили — в этом уроке я покажу вам, как использовать редактор тем для Android Studio, чтобы он сделал для вас всю тяжелую работу.

Чтобы открыть редактор тем, откройте меню «Сервис» и выберите Android> Редактор тем.

С правой стороны окна редактора тем вы можете не только управлять существующими темами, но и создавать новые. Левая сторона показывает вам предварительный просмотр результатов внесенных вами изменений в темы.

Чтобы создать новую тему, нажмите раскрывающееся меню Тема и выберите вариант Создать новую тему.

В появившемся диалоговом окне укажите имя новой темы — MyTheme и нажмите OK.

На этом этапе styles.xml будет иметь новую строку, которая выглядит так:

1	<style name="MyTheme" parent="AppTheme" />

Теперь изменим MyTheme с помощью редактора тем. Чтобы все было просто, в этом уроке мы будем изменять только значения атрибутов colorPrimary, colorPrimaryDark и colorAccent.

Чтобы изменить значение colorPrimary, нажмите кнопку colorPrimary. Редактор тем теперь покажет вам диалог, содержащий набор цветов. Выберите любой цвет, который вы хотите использовать, но убедитесь, что вы дали ему новое имя. Если вы забудете это сделать, редактор тем изменит цвет, используемый AppTheme.

Следуйте тем же шагам, чтобы изменить значения colorPrimaryDark и colorAccent. Редактор темы автоматически будет использовать цвет, который вы выбрали для colorPrimary, чтобы предложить соответствующие цвета для colorPrimaryDark и colorAccent.

Теперь определение MyTheme будет выглядеть так:

<style name="MyTheme" parent="AppTheme" >
    <item name="colorPrimary">@color/colorPrimaryMyTheme</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDarkMyTheme</item>
    <item name="colorAccent">@color/colorAccentMyTheme</item>
</style>

4. Применение тем

Прежде чем применить тему, которую мы создали, добавим несколько широко используемых представлений к активности. Это позволит вам сразу заметить эффекты примененной темы.

Следующий код создает обычную Button, Button без полей, цветную Button, Checkbox, RadioButton, Switch, Seekbar, TextView и EditText.

<Button android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="normal"
    android:id="@+id/normal_button" />

<Button android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="borderless"
    android:id="@+id/borderless_button"
    style="@style/Widget.AppCompat.Button.Borderless" />

<Button android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="colored"
    android:id="@+id/colored_button"
    style="@style/Widget.AppCompat.Button.Colored" />

<CheckBox android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="New CheckBox"
    android:id="@+id/checkBox" />

<RadioButton android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="New RadioButton"
    android:id="@+id/radioButton" />

<Switch android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="New Switch"
    android:id="@+id/switchButton" />

<SeekBar android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/seekBar" />

<TextView android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="New Text"
    android:id="@+id/textView" />

<EditText android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/editText"
    android:hint="Input" />

Со всеми новыми добавлениями макет будет выглядеть так:

Если вы прочитали спецификацию Material Design, я уверен, что вы можете сказать, что в настоящее время активность использует оттенки индиго для colorPrimary и colorPrimaryDark. Для colorAccent используется оттенок розового. Это цвета по умолчанию, указанные в Android Studio. Вы можете найти их шестнадцатеричные эквиваленты в res/values/colors.xml вашего проекта.

Чтобы применить MyTheme, тему, созданную нами на предыдущем шаге, к вашей активности, откройте файл манифеста вашего проекта и добавьте атрибут android:theme в определение активности. Задайте значение @style/MyTheme.

<activity android:name=".MainActivity"
    android:theme="@style/MyTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

Аналогично, вы можете применить тему ко всему вашему приложению, установив значение атрибута android: theme в определении приложения в @style/MyTheme.

Если вы сейчас посмотрите на свою активность, то она будет выглядеть совсем по-другому.

Заключение

В этом уроке вы узнали, как создавать и применять пользовательские стили и темы Android. Не стесняйтесь использовать эти знания, чтобы придать новые и лучшие виды вашим приложениям. Однако старайтесь не слишком увлекаться — большинство пользователей Android сегодня так привыкли к Material Design, что отклонение от его рекомендаций может их раздражать.

Чтобы узнать больше о стилях и темах, я предлагаю вам ознакомиться с руководством по стилям и темам.

Источник

Темы

Последнее обновление: 16.10.2021

Кроме применение отдельных стилей к отдельным элементам, мы можем задавать стили для всего приложения или activity в виде тем.
Тема предтавляет коллекцию атрибутов, которые применяются в целом ко всему приложению, классу activity или иерархии виджетов.

Мы можем сами создать тему. Однако Android уже предоставляет несколько предустановленных тем для стилизации приложения,
например, Theme.AppCompat.Light.DarkActionBar и ряд других.

По умолчанию приложение уже применяет темы. Так, откроем файл AndroidManifest.xml. В нем мы можем увидеть следующее определение элемента application, представляющего приложение:

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.ViewApp">

Задание темы происходит с помощью атрибута android:theme. В данном случае используется ресурс, который называется в моем случае
Theme.ViewApp. По умолчанию файлы тем определены в папке res/values.
В частности, здесь можно найти условный каталог themes, в котором по умолчанию есть два элемента: themes.xml:

Один файл представляет светлую тему, а другой — темную. Например, откроем файл themes.xml со светлой темой:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ViewApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Здесь мы можем увидеть, что тема определяется как и стиль с помощью элемента style..
Атрибут parent указывает на родительскую тему, от которой текущая тема берет все стилевые характеристики.
То есть тема «Theme.ViewApp» использует другую тему — «Theme.MaterialComponents.DayNight.DarkActionBar». И кроме того, определяет ряд своих собственных стилей.

Также можно заметить, что здесь определяются не только характеристики для атрибутов, но и семантические имена, например, colorPrimary, которому сопоставлен ресурс «@color/purple_500».

При необходимости мы можем изменить эти характеристики или дополнить тему новыми стилевыми характеристиками. Например, изменим цвет свойства colorPrimary, которое применяется в том числе
в качестве фонового цвета заголовка и кнопки:

<item name="colorPrimary">#1565C0</item>

И соответственно изменится цвет по умолчанию для фона заголовка и кнопки:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Android"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Создание собственной темы

Вместо использования встроенных тем мы можем создать свою. Для этого добавим в папку res/values новый файл mythemes.xml и определим в нем следующее содержимое:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="Theme.AppCompat.Light">
        <item name="android:textColor">#FF018786</item>
        <item name="android:textSize">28sp</item>
    </style>
</resources>

Итак, мы создали стиль «MyTheme», который унаследован от стиля Theme.AppCompat.Light. В этом стиле мы переопределили
два свойства: высоту шрифта (textSize) — 28sp, а также цвет текста (textColor) — #FF018786.

Теперь определим этот стиль в качестве темы приложения в файле AndroidManifest.xml:

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
		
        android:theme="@style/MyTheme"><!-- применение темы -->

Пусть у нас будет следующая разметка в activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Android Lollipop"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Android Marshmallow"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView1"
        />
    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Android Nougat"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Как видно, для элементов TextView не устанавливается атрибут textSize и textColor, однако поскольку они определены в теме,
которая применяется глобально к нашему приложению, то элементы TextView будут подхватывать эти стилевые характеристики:

Применение темы к activity

Выше темы применялись глобально ко всему приложению. Но также можно применить их к отдельному классу Activity. Для этого надо подкоррективать файл манифеста
AndroidManifest. Например:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.viewapp"
    android:versionCode="1"
    android:versionName="1.0">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"

        android:theme="@style/Theme.ViewApp">
        <activity android:name=".MainActivity" android:theme="@style/MyTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Атрибут android:theme элемента <activity> указывает на применяемую к MainActivity тему. То есть глобально к приложению применяется
тема «Theme.ViewApp», а к MainActivity — «MyTheme».

Применение темы к иерархии виджетов

Также можно применить тему к иерархии виджетов, установив атрибут android:theme у элемента, к которому (включая его
вложенные элементы) мы хотим применить тему. Например, примение темы к ConstraintLayout и ее элементам:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
	
	android:theme="@style/MyTheme">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Android Lollipop"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Источник

1	<View android:layout_width="100dp"
2	android:layout_height="100dp"
3	android:layout_margin="5dp"
4	android:background="#009688"
5	android:id="@+id/box1" />
6
7	<View android:layout_width="100dp"
8	android:layout_height="100dp"
9	android:background="#00BCD4"
10	android:layout_margin="5dp"
11	android:id="@+id/box2" />

1	<style name="MyBox">
2	<item name="android:layout_width">100dp</item>
3	<item name="android:layout_height">100dp</item>
4	<item name="android:layout_margin">5dp</item>
5	</style>

1	<style name="MyBox.TEAL">
2	<item name="android:background">#009688</item>
3	</style>
4
5	<style name="MyBox.CYAN">
6	<item name="android:background">#00BCD4</item>
7	</style>

1	<View android:id="@+id/box1"
2	style="@style/TealBox" />
3
4	<View android:id="@+id/box2"
5	style="@style/MyBox.CYAN" />

1	<!-- Base application theme. -->
2	<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
3	<item name="colorPrimary">@color/colorPrimary</item>
4	<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
5	<item name="colorAccent">@color/colorAccent</item>
6	</style>

1	<Button android:layout_width="match_parent"
2	android:layout_height="wrap_content"
3	android:text="normal"
4	android:id="@+id/normal_button" />
5
6	<Button android:layout_width="match_parent"
7	android:layout_height="wrap_content"
8	android:text="borderless"
9	android:id="@+id/borderless_button"
10	style="@style/Widget.AppCompat.Button.Borderless" />
11
12	<Button android:layout_width="match_parent"
13	android:layout_height="wrap_content"
14	android:text="colored"
15	android:id="@+id/colored_button"
16	style="@style/Widget.AppCompat.Button.Colored" />
17
18	<CheckBox android:layout_width="match_parent"
19	android:layout_height="wrap_content"
20	android:text="New CheckBox"
21	android:id="@+id/checkBox" />
22
23	<RadioButton android:layout_width="match_parent"
24	android:layout_height="wrap_content"
25	android:text="New RadioButton"
26	android:id="@+id/radioButton" />
27
28	<Switch android:layout_width="match_parent"
29	android:layout_height="wrap_content"
30	android:text="New Switch"
31	android:id="@+id/switchButton" />
32
33	<SeekBar android:layout_width="match_parent"
34	android:layout_height="wrap_content"
35	android:id="@+id/seekBar" />
36
37	<TextView android:layout_width="match_parent"
38	android:layout_height="wrap_content"
39	android:text="New Text"
40	android:id="@+id/textView" />
41
42	<EditText android:layout_width="match_parent"
43	android:layout_height="wrap_content"
44	android:id="@+id/editText"
45	android:hint="Input" />

1	<activity android:name=".MainActivity"
2	android:theme="@style/MyTheme">
3	<intent-filter>
4	<action android:name="android.intent.action.MAIN" />
5	<category android:name="android.intent.category.LAUNCHER" />
6	</intent-filter>
7	</activity>

Темы и стили

Общая информация

Стили

res/values/styles.xml

Быстрое создание стилей через Android Studio

Наследование стилей

Свойства стиля

Извлечение свойств в стили

Динамическое изменение стилей

Тема

Темы для диалоговых окон

Темы для диалоговых окон для старых устройств

Стили для компонентов

Темы для компонентов

Выбор темы в зависимости от версии платформы

Использование стилей и тем платформы

Новые темы в Android 4.4

Темы для View

Общие советы

Дополнительное чтение

Реклама

Method 1: Changing default theme

Method 2: Add the theme to Android Studio by importing jar file

Method 3: Adding theme from Android Studio plugin section

Method 4: Adding theme by copying ICLS file to a particular directory

Method 1: Changing default theme

Method 2: Add the theme to Android Studio by importing jar file

Method 3: Adding theme from Android Studio plugin section

Method 4: Adding theme by copying ICLS file to a particular directory

Switch theme:

Install new themes

As plugin from plugins.jetbrains.com

О чем пойдет речь:

Начнем с основ

Тема

Стиль

Атрибут

Наследование тем и стилей

ThemeOverlay

Последовательность применения тем и стилей ко View-компоненту

Да прибудет с нами Material Components

Перейдем к практике

Что там по темной теме?

А если мы хотим все делать самостоятельно?

Что нам следует учитывать при работе с темами и стилями?

1. Палитра цветов

2. Называть цвета своими именами

3. Абстрагироваться от конкретного цвета, если он меняется в разных темах

4. Не бояться создавать ресурсные файлы

5. Переиспользовать по максимуму

6. Использовать векторные ресурсы и tint

7. ?android:attr/… vs ?attr/…

8. Всегда указывать родителя для стиля

9. Тема, стиль или… ?

10. Использовать TextAppearance

Заключение

Полезные ссылки:

Using a built-in theme

Using a third-party theme

Removing a third-party theme

Conclusion

1. Создание стилей

2. Расширение стилей

3. Создание тем

4. Применение тем

Заключение

Темы

Создание собственной темы

Применение темы к activity

Применение темы к иерархии виджетов

Читайте также: