Android studio меняющийся цвет

Светофор

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

В качестве примера напишем программу под условным названием «Светофор». Интерфейс программы будет выглядеть следующим образом. На красном экране расположены три кнопки и одна текстовая надпись. При нажатии кнопок фон программы будет меняться на соответствующий цвет, который закреплён за определённой кнопкой. Я попробую вам показать решение задачи с разных сторон, чтобы вы почувствовали себя увереннее.

Первые шаги вполне очевидны. Создаём новый проект на основе «Hello, World» и перетаскиваем с панели инструментов три кнопки. Когда будете размещать кнопку, попробуйте потаскать её по разным позициям внутри экрана активности. Вы будете замечать различные всплывающие линии, подсказывающие о стандартных отступах от края или о центральной оси по вертикали и горизонтали. Это удобно, когда вы точно знаете, где нужно разместить один компонент.

В нашем случае мы поступим иначе. Сначала просто перетащим три кнопки на экран, не думая о позиционировании. Далее в окне Component Tree выделяем три кнопки, удерживая клавишу Shift, вызываем контекстное меню и выбираем команды Center Horizontally и потом Center Vertically. Кнопки равномерно распределятся по экрану.

Контекстное меню можно вызвать и напрямую у кнопок на экране. Достаточно указателем мыши начертить ограничивающий прямоугольник вокруг всех кнопок и щёлкнуть правой кнопкой.

В окне Component Tree выделите строку button. У вас должно появиться окно свойств Properties. Давайте избавимся от стандартных идентификаторов, а будем сразу приучаться давать осмысленные имена. Например, для первой кнопки присвоим свойству id значение button_red вместо стандартного @+id/button

Для второй кнопки присвоим значение button_yellow.

Аналогично настраиваем третью кнопку button_green. Вы можете использовать другой стиль, например, назвать идентификатор как red_button вместо button_red. Главное, придерживаться выбранного стиля.

Строковые ресурсы

Теперь нам нужно заменить текст на кнопках на слова Красный, Жёлтый и Зелёный. На прошлом уроке мы просто присвоили свойству Text нужную строку. Но на самом деле это неправильный подход и даже среда разработки выводит предупреждающие значки у кнопок, если вы переключитесь в режим Text. По правилам, строки нужно хранить в строковых ресурсах. Подобный подход даёт разработчику множество преимуществ, в частности, быструю локализацию приложения. Считайте это стандартом, которого нужно придерживаться.

Процесс создания строковых ресурсов очень прост. Переключитесь обратно в режим Design и выберите кнопку button_red. В окне свойств найдите свойство text. Рядом находится кнопка. Щёлкните по ней, у вас откроется диалоговое окно Resources.

Нажмите на выпадающий список Add new resource для создания нового строкового ресурса и выберите New string Value.

В новом окне New String Value Resource в первом поле Resource Name введите название ресурса, например, red, а во втором поле Resource Value введите текст для кнопки (напр. Красный). Остальные поля не трогаем. Аналогичным образом поступите с другими двумя кнопками (Жёлтый и Зёленый).

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

Мы совсем забыли про элемент TextView. Исправим упущение. Разместим компонент под кнопками и снова сделаем выравнивание.

Пусть на нём выводится текст, извещающий о текущем цвете фона приложения. Так как в ресурсах у нас уже есть слова Красный, Жёлтый и Зелёный, изначально предназначенные для кнопок, то мы не будем создавать новые строковые ресурсы, а воспользуемся готовыми наработками. По умолчанию у нас используется красный цвет. В окне свойств выбираем свойство text для TextView и нажимаем кнопку рядом с ней для вызова знакомого диалогового окна. На этот раз мы не будем щёлкать на кнопке New Resource, а сразу выберем ресурс red, которая, как мы помним, содержит текст Красный и щёлкнем кнопку OK (можно сделать сразу двойной щелчок на строке).

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

С текстом разобрались. Но где остальные настройки? В окне свойств Properties можно увидить все доступные атрибуты для компонента. Если вы не помните точное название, то воспользуйтесь поиском. Я помню, что для размера шрифта используется что-то со словом size. Вспомнил, это textSize. Выбираем нужное значение из выпадающего списка.

Рекомендую постоянно переключаться в режим Text и смотреть, что происходит в коде. Это позволит вам увереннее разбираться в коде и читать чужой код. Как правило, новички предпочитают работать через визуальные инструменты, а программисты с опытом самостоятельно пишут практически весь код. Нужно найти разумный баланс между двумя подходами. Всё придёт со временем.

Со строками вроде разобрались. Давайте теперь в ресурсах зададим цвета для фона программы. Ресурсы для цветов принято хранить в отдельном файле res/values/colors.xml, хотя технически никто не запрещает хранить их в том же файле strings.xml.

Откроем указанный файл и добавим ресурс жёлтого цвета между тегами resources:

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

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

Самостоятельно добавьте ресурс для красного цвета под именем redColor.

Если вам знаком такой формат цвета, то трудностей добавление новых цветов подобным способом вам не доставит. Если нужно выбрать более сложный цвет, то проще воспользоваться мастером, как мы это делали в уроке «Hello Kitty», когда выбирали розовый цвет, а затем полученный цвет скопировать в ресурсы.

Определив в ресурсах все необходимые цвета, можно сразу присвоить красный цвет для контейнера ConstraintLayout. В окне свойств находим для данного элемента свойство background. Снова нажимаем кнопку, чтобы открыть диалоговое окно. В окне выбираем раздел Color и ищем свой ресурс redColor.

Если посмотреть в текстовом режиме, то увидите строчку android:background=»@color/redColor» для тега ConstraintLayout.

Так как мы будем менять фон у ConstraintLayout, то присвоим ему идентификатор root_layout (корневой элемент разметки).

Общий каркас приложения завершён. У нас есть три кнопки с соответствующими текстами, текстовая надпись со словом Красный, и красный фон, используемый в контейнере ConstraintLayout. Пора приступать к программной логике программы. А пока можно запустить приложение, чтобы убедиться, что мы не сделали ошибок в разметке.

Код для программы (Kotlin)

Наша задача — обработать щелчки трёх кнопок и менять цвет фона приложения, а также текст в TextView.

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

Читайте также:  Тест по андроид студио

Пример для Java

На прошлом занятии мы уже познакомились с удобным способом обработки события onClick. Давайте закрепим пройденный материал и повторим тот же код для первой кнопки. Пропишем вручную событие onClick в теге Button:

Вспоминаем — в режиме Text помещаем курсор на названии метода и нажимаем комбинацию Alt+Enter, чтобы создать заготовку щелчка первой кнопки в классе MainActivity.

Объявим переменные в классе и получим к ним доступ в методе onCreate():

Напоминаю, что код нужно писать вручную, а не копировать с сайта. Тогда многие вопросы отпадут и вам не придётся бежать на форум с криками, что ничего не работает.

Кстати, этот код вызвал трудности у новичков. Меня завалили письмами и устроили вой на форуме. Раньше в студии по умолчанию использовался компонент RelativeLayout и пример был написан под него. Новички размещали кнопки в ConstraintLayout, а в код вставляли строчки:

Для не слишком догадливых программистов подчёркиваю — ConstraintLayout и RelativeLayout — это разные вещи. Вы же не путаете кота с собакой, хотя у них есть и хвосты и лапы. Не нужно писать код с использованием несуществующих компонентов, точнее не надо копировать и вставлять мой код. Иначе никогда не научитесь писать программы.

Пишем код для щелчка кнопки с надписью «Красный»:

Мы обращаемся к созданным ресурсам через специальный класс R и через точку указываем тип ресурсов, а затем имя ресурса.

Для кнопки «Зелёный» напишите код самостоятельно, добавив метод onGreenButtonClick().

Для кнопки «Жёлтый» напишем код в традиционной манере через слушателя OnClickListener. В методе onCreate() добавляем:

Раньше для изменения кода использовался код:

В Android 6 (API 23) метод getColor(int id) объявили устаревшим и студия теперь подчёркивает данный метод. Можно заменить на один из двух вариантов:

Первый вариант подойдёт, если вы не поддерживаете старые устройства, а сразу пишете приложение для телефонов с API 23. Второй способ более универсальный. Его я и использовал.

Запускаем приложение и щёлкаем по кнопкам — текст в надписи и фон в приложении должны меняться в соответствии с нажатой кнопкой.

Полный текст кода будет выглядеть следующим образом (в ваших примерах скорее всего в секции import будут встречаться пакеты androidx вместо android.support, я не стал переделывать старый пример):

В качестве домашнего задания упростите код для трёх кнопок, создав для них общий метод onClick() (почитайте статью про кнопки).

Приведённая ниже информация немного устарела. В Android 5.0 используется другой стиль оформления заголовка программы и значка там теперь нет (хотя его можно туда поместить). Но значки всё равно нужны для отображения вашей программы на домашнем экране или в лаунчерах.

Поговорим о значках. По умолчанию студия использует изображение зелёного робота в качестве значка для вашей программы. Откройте в студии папку res/mipmap. Я уже рассказывал, что эта папка является виртуальной и в действительности существуют папки res/mipmap-hdpi, res/mipmap-mdpi, res/mipmap-xhdpi, res/mipmap-xxhdpi. В каждой из этих папок есть файл с одинаковым именем ic_launcher.png и недавно добавили ещё ic_launcher_round.png для Android 7. Вся разница между этими файлами заключается в размерах. В зависимости от разрешения экрана на устройстве система выбирает наиболее подходящий по размеру изображение и выводит его в качестве значка в заголовке приложения и на домашнем экране. Самый простой вариант заменить стандартное изображение на своё — создать своё изображение и заменить им имеющийся значок. Рекомендуется создавать под каждое разрешение свой значок. Причем здесь указаны не все варианты. В таком случае вам нужно создать самостоятельно папку, например, mipmap-xxxhdpi и разместить там картинку требуемого размера. Если вы пропустите какой-то размер, то система попробует взять какой-нибудь значок с этим именем из другой папки и смаштабировать его. Но лучше так не делать.

Если вы не хотите менять существующие стандартные значки, а хотите использовать значки под другим именем, то в этом случае подготовьте все необходимые размеры, разместите их во всех папках mipmap- под своим именем, а затем в манифесте замените строчку у атрибута android:icon:

В состав студии входит набор предопределённых значков и генератор собственных значков. Щёлкните правой кнопкой на папке drawable или mipmap и выберите в меню New | Image Asset.

Откроется диалоговое окно, где вы можете указать в качестве источника файл на компьютере, вариант из клипарта или набор символов. Также вы можете задать форму значка, цвет фона и прочие параметры. Уверен, что вы разберётесь самостоятельно.

Кроме значков для различных разрешений, генератор создаст дополнительный файл с суффиксом -web, который будет скопирован в папку main. Этот файл используется для Google Play, когда будете размещать приложение в магазине приложений и давать описание к нему.

Источник

Темы и стили

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

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

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

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

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

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

Похожие темы: android:theme=»@style/Theme.AppCompat.Light.Dialog», android:theme=»@style/Theme.AppCompat.Light.Dialog.MinWidth», android:theme=»@style/Theme.AppCompat.Dialog.MinWidth».

Тему можно применить не только к отдельной активности, но и ко всем активностям приложения, если прописать в теге application.

Кстати, вы можете разработать свою тему на основе существующих и сохранить ее в файле res/values/styles.xml.

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

Стили

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

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

Предположим, у нас есть следующий код разметки для TextView:

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

res/values/styles.xml

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

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

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

Читайте также:  Google вылетает на android

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы решили в своём проекте использовать стили и вам нужно быстро переместить нужные атрибуты, то Android Studio предлагает быстрый механизм для этой операции. В текстовом режиме ставите курсор на названии компонента, например, ImageView, затем щёлкаете правой кнопкой мыши и выбираете Refactor | Extract | Style. . В диалоговом окне выбираете нужные атрибуты для переноса в стили и выбираете имя стиля.

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

Ни разу не приходилось пользоваться, но вдруг пригодится.

Тема — это более ёмкое понятие. По существу, тема — стиль, который относится ко всему экрану активности или приложению, а не к отдельному компоненту приложения. Таким образом, тема имеет свои атрибуты и свою область применения.

Темы похожи на определения стилей. Точно так же, как стили, темы объявляются в XML-файле элементами

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

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

  • android:windowNoTitle: используйте значение true, чтобы скрыть заголовок
  • android:windowFullscreen: используйте значение true, чтобы скрыть строку состояния и освободить место для приложения
  • android:windowBackground: ресурс цвета или drawable для фона
  • android:windowContentOverlay: Drawable, который рисуется поверх содержимого окна. По умолчанию, это тень от строки состояния. Можно использовать null (@null в XML-файле) для удаления ресурса.

В Android 5.0 появились новые темы, которые получили название Material Design.

  • @android:style/Theme.Material (тёмная версия)
  • @android:style/Theme.Material.Light (светлая версия)
  • @android:style/Theme.Material.Light.DarkActionBar (светлая версия с тёмным заголовком)

В Android 9.0 темы Material Design продолжили развитие, они будут активно внедряться в ближайшее время.

  • Theme.MaterialComponents
  • Theme.MaterialComponents.NoActionBar
  • Theme.MaterialComponents.Light
  • Theme.MaterialComponents.Light.NoActionBar
  • Theme.MaterialComponents.Light.DarkActionBar

Для Material Design были разработаны новые атрибуты тем.

  • android:colorPrimary: основной цвет для интерфейса программы — панель, кнопки и т.д.
  • android:colorPrimaryDark: цвет для системных элементов — строка состояния
  • android:colorAccent: Цвет по умолчанию для компонентов, которые находятся в фокусе или активны
  • android:colorControlNormal: Цвет для неактивных компонентов
  • android:colorControlActivated: Цвет для активных компонентов
  • android:colorControlHighlight: Цвет для нажатых элементов интерфейса
  • colorSwitchThumbNormal: и т.д. изучаем документацию

Позже были добавлены другие атрибуты: colorPrimaryVariant, colorOnPrimary, colorSecondary, colorSecondaryVariant, colorOnSecondary, colorError, colorOnError, colorSurface, colorOnSurface, colorBackground, colorOnBackground.

Настройка цветов происходит по определённым правилам. На сайте http://www.google.com/design/spec/style/color.html# есть таблица цветов. Обратите внимание на числа слева. Основным цветом (colorPrimary) считается цвет под номером 500, он идёт первым в таблицах. Этот цвет должен использоваться в качестве заголовка (Toolbar).

Допустим, мы делаем специальное приложение для рыжего кота. Создадим новый файл res/values/colors.xml. На указанном сайте находим таблицу цветов оранжевого цвета Orange и будем использовать предлагаемое значение.

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

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

Читайте также:  Virtual android multiple accounts root

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сам пока не проверял.

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

В библиотеке совместимости версии 22.1.0 появилась поддержка Material Design для диалоговых окон.

Для начала вызовем диалоговое окно стандартным способом:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Последний пункт у меня закомментирован. Он позволяет настроить тему для ActionBar. Можете поиграться с ним. Для сравнения ниже представлены скриншоты стандартного окна активности с чёрными полосками снизу и сверху и стилизованной активности. Для наглядности я выбрал оранжевый цвет для фона активности.

Если говорить об эволюции тем и стилей, то в Android 2.x темы были в зачаточном состоянии. В Android 3/4 дизайнеры проделали огромную работу, чтобы система стала красивой и предложили тему Holo. В новой версии Android 5.0 работа над стилями была продолжена и была представлена новая концепция стиля под названием Material Design с подробной документацией по её использованию.

В статье Android App Launching Made Gorgeous рассматривается интересный случай, когда неправильное использование тем приводит к некрасивому эффекту — сначала загружается пустой экран, а затем уже экран вашей активности.

Темы для View

В статье говорилось, что отдельные компоненты должны использовать стили, а активности — темы. В Android 5.0 Lollipop, а также старые устройства с API 11 через библиотеку совместимости AppCompat могут также использовать темы:

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

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

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

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

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

Общие советы

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

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

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

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

Источник

Оцените статью