Разработчики могут менять оформление своего приложения так, как им только вздумается, для этого существует множество различных возможностей и инструментов. Можно использовать настройку тем, стилей, можно использовать сторонние библиотеки (вспоминаем урок о 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. На этом пока все, удачи в изучении!