Android toggle button style

ToggleButton (Кнопка-переключатель)

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

Компонент ToggleButton по своей функциональности похож на флажок (checkbox) или переключатель (radiobutton) — это кнопка, которая может находиться в одном из двух состояний: активна (On) или неактивна (Off). По умолчанию на кнопке написано «Оn», если она активна, и «Off» — если нет. По внешнему виду это обычная кнопка с декоративной полоской в нижней части, которая подсвечивается в включенном состоянии (имитация LED-индикатора).

Находится в разделе Widgets:

Если надписи On/Off для вашей программы не подходят, их можно изменить при помощи свойств Text on (атрибут android:textOn) и Text off (атрибут android:textOff). Поскольку надписи Оn и Off на кнопке-переключателе являются отдельными атрибутами, атрибут android: text не используется, он доступен, так как наследуется от ТextView, но в данном случае без него можно обойтись. В программном коде им соответствуют методы setTextOff() и setTextOn().

По умолчанию, ToggleButton находится в выключенном состоянии, чтобы его «включить», установите свойство checked в значение true. Свойству соответствует метод setChecked(boolean checked).

Основное событие ToggleButton — изменение состояния кнопки onCheckedChanged().

Напишем демонстрационную программу с использованием ToggleButton. Добавим на форму метку, изображение и кнопку-переключатель:

Для создания обработчика события изменения состояния кнопки необходима реализация интерфейса CompoundButton.OnCheckedChangeListener. Интерфейс имеет единственный метод onCheckedChanged(), который необходимо переопределить в нашем классе. При обработке события для определения состояния используется параметр isChecked.

Стилизация

Создайте два изображения для каждого состояния кнопки-переключателя в формате 9-patch, например, btn_toggle_off.9.png и btn_toggle_on.9.png. Разместите картинки в папке res/drawable-hdpi/ (или в других).

Далее создаются два XML-файла в папке res/drawable:

btn_toggle_bg.xml (отвечает за фон):

btn_toggle.xml (выводит нужное изображение в разных состояниях)

Также можно определить стиль и тему для кнопки. В файле res/values/themes.xml пропишите:

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

Источник

Android toggle button style

Android Toggle Button

September 15, 2017

Toggle button represents two states and state changes between on and off every time ToggleButton is clicked. Like CheckBox, it can be used to capture input for two state input fields.

In this post, I’ll show how to style toggle button, create custom styles for it, and customize toggle button by setting custom background and button.

Toggle Button Element

Toggle Button Default Style

Below screen shot shows toggle button in on and off state with default material style when application theme is set to material theme Theme.AppCompat.

Toggle Button Custom Style

You can customize appcompact material theme to change Toggle button colors. You can customize toggle button text color, toggle button on color, toggle button off color, toggle button normal color, toggle button highlight color by setting textColorPrimary, colorAccent, colorControlNormal, colorButtonNormal, and colorControlHighlight color attributes respectively in your custom theme. Apply the defined custom theme at application level by setting theme attribute of application element in manifest xml file.

Individual Toggle Button Custom Style

Above toggle button customization was done at application theme level. Customizing colors at application level impacts not only all toggle buttons but also other ui controls in your application.

If you want to customize particular toggle buttons, you can create custom style by inheriting toggle button material theme Widget.Material.Light.Button.Toggle and setting required properties as shown below.

Toggle Button Text

Toggle button text can be change by setting testOn and textOff attributes in xml or code. Below xml code and screenshot show textOn and textOff attribute setting and its output.

Toggle Button Click Event Handling

Toggle button event can be handled by adding CompoundButton.OnCheckedChangeListener to it using setOnCheckedChangeListener method as shown below. Using isChecked parameter passed to onCheckedChanged method, you can get toggle state of toggle button.

Custom Toggle Button

You can create custom toggle button by defining xml drawable and using it as background of toggle button by setting background attribute to it. Since color of lines of toggle button need to change based on the check state, a selector is defined for it.

Custom toggle button drawable xml

Custom toggle button color selector

Custom toggle button output

Toggle Button Image

You can customize toggle button by creating image selector drawable and setting it as button for ToggleButton.

To customize toggle button this way, you need to provide your own images for two states. In order for the custom button to appear properly, you need to provide different sizes of images for different screen sizes by saving them in the appropriate size specific drawable folders and also set ToggleButton layoutWidth and layoutHeight to match image size.

About

Android app development tutorials and web app development tutorials with programming examples and code samples.

Источник

Тайны кнопок в Android. Часть 2: Рефакторинг верстки

Приветствую, уважаемое сообщество.

В предыдущей статье мы, используя только верстку, сделали кнопку “включить/выключить”, и вот что у нас тогда получилось:

XML-код получился довольно увесистый. В этой статье я покажу, как сделать его по-настоящему красивым. Мы сократим код вдвое, убрав все, что может затруднить сопровождение нашего приложения или вызвать недовольство тим-лида. В этой статье мы будем использовать строковые ресурсы ( strings.xml ), ресурсы размерностей ( dimens.xml ), стили и темы ( styles.xml ). Если вы не знакомы с первой частью статьи, рекомендую хотя бы пробежать ее глазами.

Выглядит наша кнопка вот так:

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

Текстовые ресурсы strings.xml

Займемся рефакторингом кода. Там точно есть недостатки, например слово Телефония . Чтобы приложение можно было перевести на несколько языков, все текстовые константы должны быть собраны в файле strings.xml . Он уже создан и находится в каталоге res/values . Откроем его и заменим его содержимое на следующее:

Так мы объявили текстовую константу act_main_telephony . Теперь заменим текст кнопки android:textOn и android:textOff на ссылку @string/act_main_telephony :

Немного лучше, хотя объем кода от этого только вырос, но это плата за возможность удобной локализации приложения. Как именно его можно локализовать? Наш файл strings.xml размещен в каталоге res/values . Сейчас мы пишем в него русскоязычный текст. Допустим, мы хотим поддерживать еще и английский язык. Для этого мы создаем каталог res/values-en , и в нем создаем еще один файл strings.xml . Он должен содержать все те же константы, что и первый файл, но уже на английском. При запуске приложения Android ищет в приложении в первую очередь ту локаль, которая установлена у пользователя в системе по умолчанию. Если в приложении нет ресурсов для этой локали, то Android берет ресурсы из локали по умолчанию, то есть из каталога res/values без суффиксов. Там может быть текст на любом языке, не обязательно русском или английском. Этот ресурс будет использован, если пользователю не подходит любой другой имеющийся в приложении ресурс. Локализовать можно не только ресурсы values , но и любые другие, например часто локализуют drawable , если какой-то текст задан картинкой. Если вас интересуют подробности, рекомендую почитать интересную статью о локализации приложений от Google и о том, как Android выбирает наиболее подходящий ресурс. Если будет время, я постараюсь подготовить отдельную статью о локализации с примерами, так как этот вопрос достаточно обширный.

Стили и темы: styles.xml

Что делать, если нам нужно десять таких кнопок, отличающихся только надписью и левой иконкой? Копировать все? Тогда размер файла макета будет непомерно большой и содержать 80% повторяющегося кода. Здесь нам на помощь приходят стили. Давайте вынесем в стили все, что только может повторяться. К счастью, плагин ADT для Eclipse несколько облегчает процесс, если вы не очень знакомы с разработкой файлов стиля Android.

Для извлечения стиля откроем наш макет activity_main.xml в режиме Graphical Layout и выделим кнопку. Щелкнем на ней правой кнопкой мыши и выберем пункт Extract Style :

Укажем имя стиля: styleOnOffButton и оставим отмеченными все атрибуты, кроме android:drawableLeft , android:textOn и android:textOff , которые будут отличаться у каждой кнопки в нашем приложении. Остальные атрибуты будут вынесены в стиль:

Нажмите ОК. Полученный стиль можно увидеть в файле res/values/styles.xml :

А текст кнопки сильно уменьшился:

Теперь, чтобы сделать десять кнопок, нужно писать куда меньше текста, и минимум дублирования кода. Обратите внимание: атрибуты android:layout_width и android:layout_height в стиль не выносятся. Они обязательно должны присутствовать у каждого элемента в файле макета. Атрибут android:id , конечно же, свой у каждого объекта, поэтому тоже не выносится в стиль. Тем не менее, полученный код достаточно компактен, чтобы его было удобно переиспользовать.

Если вы сейчас запустите приложение, то увидите, что все “поплыло”, и результат совсем не тот, что мы ожидали. Почему? Потому что стиль хоть и создался, но к кнопке не применился.

Применить стиль к кнопке, можно, указав ей атрибут style=»@style/styleOnOffButton» . Это было бы сделано автоматически, если бы мы включили опцию Set style attribute on extracted elements при извлечении стиля. Оба пути сработают, но это не лучшие варианты, так как эту строку нужно будет прописывать каждому экземпляру кнопки в каждом окне. Хотелось бы этого избежать. Как правило, в приложениях используется один стиль для одинаковых элементов управления, это одно из базовых правило дизайна. То ессть все кнопки типа включить/выключить выглядят одинаково, отличаясь только иконками и текстом. Редко кто делает одну прямоугольную, другую кругленькую, а третью ромбиком.

Это дает нам возможность прописать стиль в теме. Откройте файл styles.xml и найдите там следующий текст:

Это тема нашего приложения. Давайте укажем, что все кнопки ToggleButton должны иметь один и тот же стиль, наш стиль:

Что такое android:buttonStyleToggle , что еще можно стилизовать, и где об этом почитать? Я так и не смог найти полноценную документацию по стилям. Если кто-то ее видел, пожалуйста напишите в комментариях. Поэтому я обращаюсь напрямую к исходникам Android, к счастью они открыты для всех. Я работаю с ADT, и у меня исходники стилей Android лежат здесь: adt-bundle-windows\sdk\platforms\android- \data\res\values\themes.xml . Скачиваются исходники при помощи утилиты Android SDK Manager, которая запускается прямо из Eclipse, меню Window->Android SDK Manager .

И еще одно исправление мы должны сделать. Созданный нами стиль не наследуется от стиля кнопок, а это значит, что наш элемент управления потерял способность нажиматься. Это легко проверить, если сейчас запустить приложение и попробовать нажать кнопку. Как это вылечить? Нужно наследовать наш стиль от стиля android:style/Widget.Button.Toggle — это стиль всех ToggleButton по умолчанию:

Откуда я взял android:style/Widget.Button.Toggle ? Из тех же исходников Android, файл styles.xml .

Ресурсы размерностей: dimens.xml

Теперь все работает, как надо. Но мы должны сделать еще пару небольших улучшений. Как вы заметили, в стиле styleOnOffButton есть атрибут android:textSize , который задан константой 24sp . Если в нашем приложении будет еще какой-то текст, кроме кнопок, вероятно мы захотим его сделать таким же по размеру для сохранения общего стиля. А это значит, что константу 24sp мы будем еще не раз использовать в разных местах. И если мы потом захотим поэкспериментировать с размером текста, то нам придется менять эти константы по всему приложению. Чтобы этого избежать, давайте объявим именованную константу размера. Откроем файл res/values/dimens.xml и заменим все его содержимое следующим:

Как видите, кроме text_size здесь есть еще одна константа — activity_padding . Если вспомнить код нашего макета, то там мы увидим константу android:padding=»6dp» в теге RelativeLayout . А так как отступы от границ экрана у всех окон приложения также логично делать одинаковыми, это значение само-собой напрашивается в константы.

Теперь заменим константу 24sp в стиле на новый ресурс @dimen/text_size :

И текст тега RelativeLayout в файле activity_main.xml с константой в ресурсах:

И еще немного о стилях

Давайте еще раз подумаем о стилях. Мы сделали одинаковый стиль для всех ToggleButton , так почему бы не сделать стиль для всех окон? Тем более, что кроме отступов от границ у всех окон будет общий цвет фона. Такой стиль будет простой, нам не нужно его ни от чего наследовать, давайте пропишем его вручную. Откроем файл styles.xml и добавим в конец перед закрывающим тегом следующий код:

Вот еще один способ задавать цвет — в файле ресурсов с помощью тега color .

Не каждый RelativeLayout — главный элемент Activity, поэтому мы не можем прописать стиль всем RelativeLayout , как мы поступили с ToggleButton . В этом случае стиль нужно указывать явно в тех элементах, где это нужно, используя атрибут style . Давайте пропишем стиль нашему макету и посмотрим, что в и тоге у нас получилось:

Все атрибуты окон у нас в стилях. Для каждой новой Activity достаточно указать стиль style=»@style/styleActivity» ее корневому элементу, и окно будет выглядеть так же, как и другие окна приложения.

Заключение

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

И вот, что получилось:

Правда стало красивее? Все общие атрибуты кнопок и окон в стилях. Создавая новые кнопки, мы будем прописывать им только те атрибуты, которые отличают новую кнопку от других: иконка, название, идентификатор, расположение в родительском элементе.

Все числовые константы спрятаны в файле dimens.xml , никакого копипаста одних и тех же констант у нас не будет. Все строковые константы — в файле strings.xml . Для локализации приложения под другие языки достаточно перевести только этот файл.

Разница между исходным и оптимизированным вариантом заметна даже на одном элементе окна. В реальных приложениях их в окне десятки, а потому оптимизированный код будет на порядок проще читать и сопровождать. Мое самое большое приложение iPUMB — ПУМБ online содержит около 40 activity. Если бы не стили, мне пришлось бы копировать оформление окон по 40 раз, и если дизайнеры придумают что-то новое, мне пришлось бы 40 раз этот код менять.

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

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

Источник