Как сделать стиль для кнопки android

Обновлено: 01.07.2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

В layout-файл main.xml напишем следующее и сохраним:

Открываем MainActivity.java. Описание объектов вынесем за пределы метода onCreate. Это сделано для того, чтобы мы могли из любого метода обращаться к ним. В onCreate мы эти объекты заполним с помощью уже пройденного нами метода findViewById. В итоге должен получиться такой код:

Обновляем секцию import (CTRL+SHIFT+O). Объекты tvOut, btnOk и btnCancel соответствуют View-элементам экрана и мы можем с ними работать. Нам надо научить кнопку реагировать на нажатие. Для этого у кнопки есть метод setOnClickListener (View.OnClickListener l). На вход подается объект с интерфейсом View.OnClickListener. Именно этому объекту кнопка поручит обрабатывать нажатия. Давайте создадим такой объект. Код продолжаем писать в onCreate:

Eclipse подчеркивает OnClickListener красной линией

т.к. пока не знает его. Необходимо обновить секцию import. Жмем CTRL+SHIFT+O, Eclipse показывает нам, что он знает два интерфейса с именем onClickListener и предлагает выбрать. Нам нужен View.OnClickListener, т.к. метод кнопки setOnClickListener принимает на вход именно его.

В методе onClick пишем:

В итоге должен получится такой код:

Все сохраняем и запускаем. Жмем на кнопку ОК и видим. Что текст изменился

Нажатие на Cancel пока ни к чему не приводит, т.к. для нее мы обработчик не создали и не присвоили. Давайте сделаем это аналогично, как для кнопки OK. Сначала мы создаем обработчик:

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

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

Давайте еще раз проговорим механизм обработки событий на примере нажатия кнопки. Сама кнопка обрабатывать нажатия не умеет, ей нужен обработчик (его также называют слушателем - listener), который присваивается с помощью метода setOnClickListener. Когда на кнопку нажимают, обработчик реагирует и выполняет код из метода onClick. Это можно изобразить так:

Соответственно для реализации необходимо выполнить следующие шаги:

- создаем обработчик
- заполняем метод onClick
- присваиваем обработчик кнопке

и система обработки событий готова.

На следующем уроке:

- научимся использовать один обработчик для нескольких View-элементов
- научим Activity выступать в качестве обработчика

- в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование

- ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня

- новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме

Добавьте зависимость Android Design, потому что FAB находится в этой библиотеке. Скопируйте и вставьте её в свой проект.

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

Я расскажу о привязке данных только то, что понадобится для этого проекта. Для привязки данных вам больше не нужно писать findViewById . Вы можете хранить XML в одной переменной и использовать его в FAB activity.

Чтобы включить привязку данных, вставьте в build.gradle (app level) эти строки:

После запуска Activity_fab должен выглядеть так:

Теперь оберните этот код в тег для того, чтобы привязка данных работала.

coordinatorLayout — это мощный FrameLayout . Используйте его, если хотите взаимодействовать с более чем одним дочерним представлением или макетом верхнего уровня decor/chrome.

Давайте добавим LinearLayout в coordinatorLayout . Добавьте следующий код:

Теперь можно добавить плавающую кнопку действия (FAB) в linear layout.

Добавьте этот код в colors.xml .

Нам нужно добавить три иконки, которые будут отображаться на кнопках. Я использую иконки Android Material. Вы можете использовать свои собственные иконки.

Привязываем иконку add к кнопке FAB. Ваш код должен выглядеть так:

Приступим к анимации FAB.

Создайте класс аниматора с именем ViewAnimation.java . Далее добавьте в этот класс все наши методы анимации.

Добавьте следующий метод в класс анимации:

Вот что должно быть в классе анимации:

Теперь давайте перейдём к классу activity и реализуем нашу анимацию для FAB.

Давайте разберём этот этап:

ActivityFabBinding : нужно для привязки данных. Сначала вы должны написать Activity, затем его имя (я присвоил имя Fab), а затем добавить привязку.

isRotate : логическое значение. Оно зависит от состояния кнопки. Если true, значит FAB повёрнут, а если false — то нет.

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

Запустите приложение, и вы увидите красивую, плавную анимацию FAB!

Теперь добавим дочерние кнопки FAB, которые будут появляться сверху при нажатии на кнопку add. Вот так:

Чтобы сделать это, откройте свой основной XML, где мы ранее добавили кнопку FAB, и вставьте следующий код FAB:

Это дочерние кнопки.

Обратите внимание, что значение fabSize установлено как mini . Сверьте свой код с этим:

Давайте добавим несколько новых функций в файл ViewAnimation.java .

Эти три функции позволяют добиться плавной анимации для наших мини FAB-ов.

showIn() : отвечает за сворачивание FAB-ов внутрь при нажатии.

showOut() : отвечает за появление FAB-ов при нажатии.

init() : отвечает за то, чтобы кнопки при запуске приложения были скрыты.

Пока ничего не происходит. Давайте шаг за шагом реализуем остальной функционал.

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

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