Android UI. Делаем кнопки в стиле Twitter Bootstrap
Ниже рассказывается как создать кнопки в стиле Twitter Bootstrap для Android приложения. Данный стиль взят для примера что бы разобраться в концпеции создания собственных стилей. Пример кода выложен на github. Репозиторий будет попoлняться примерами для других элементов. Так что можно подписываться.
Android SDK предлагает несколько вариантов для создания собственных стилей.
Начнём с самого простого. Создададим кнопку на основе нескольких графических файлов отображающих отдельные состояни кнопок. (default, selected, focused, pressed и т.д.) Поддерживаются форматы .png, .jpg, или .gif.
Добавляем в активити код для кнопки.
В папке res/drawable создаём файл button_primary_selector.xml
Этот файл делает роутинг графиков в зависимости от текущего состояния кнопки
Добавляем графики для каждого состояния кнопки в ту же папку. Расширение файла указывать не надо. Недостатком данного примера является невозможность динамического скалирования кнопок.
Использование формата Nine-Patch File
Решаем проблему скалирования элементов следующим образом. В случае кнопки нужны по крайней мере два png файла соответствующие нормальному и нажатому состояниям.
Исходный график нормального состояния для primary button 
Конвертация происходит с помощью утилиты draw9patch. Её можно найти в ANDROID_SDK_HOME/tools/.
После запуска перетягиваем график в открывшееся окно. И по краю картинки помечаем пиксели входящие в скалируемого контента. Примерно так 
Справа предлагается превью. Если результат удовлетворительный. Через меню сохраняем файл в папку drawable. Повторяем процедуру для графиков всех состояний кнопки.
Подключение кнопки происходит также как в предыдущем примере
Shape Drawable
Вместо графиков можно описывать элементы с помощью XML.
Пример селектора для двух состояний:
При изменении состояния файл читается сверху вниз и первый элемент с подходящим статусом будет выполнен.
Последний элемент в данном примере будет выполнятся если состояние предыдущих элементов не соответствует состоянию кнопки.
Этот пример можно дополнить для отображения других состояний добавив элементы item с соответствующим атрибутом
Например для selected
. android:state_selected="true" . Описание состояний можно также вынести в отдельные файлы. Например нажатая кнопка будет описываться так в файле button_primary_pressed.xml
В селекторе расширение (.xml) также не указывается.
Вместо StateList можно также использовать LayerList. Этот подход отличается от предудыщего тем что элементы не имеют атрибута состояния. Все элементы будут отработаны. Последний элемент отрисовывается сверху.
В результате получаем
Примеры кода для создания стиля кнопок с помощью StateList и Shape Drawable можно посмотреть здесьandroid-custom-style-ui.
Дополнительная информация и источники можно найти здесь.
Как изменить стиль кнопок приложения в Android Studio
Как изменить дизайн кнопок приложения? Очень просто – создайте собственный стиль и примените его для кнопки.
В файл res/values/style.xml добавьте такой код:
Измените элементы стиля в соответствии с вашими требованиями – укажите цвет фона кнопки, отступы и свойства шрифта для текста, выравнивание и т.д.
В вашем файле XML примените стиль:
Также можно применить кнопке системные стили. На картинке примеры кнопок с соответствующими стилями:
Привет применения системного стиля для кнопки:
Вам також може сподобатися
Уроки по android разработке на Java 0 1 021
Если вы читаете это, то скорее всего, являетесь обладателем смартфона на Android. Предположим, когда-нибудь
Инструменты android разработчика 0 636
Как ускорить эмулятор AVD? как установить google Play на эмулятор Genymotion? Как подключить Google
Уроки по android разработке на Java 0 120
Вернуться к уроку 9 Перейти к уроку 10 [mlw_quizmaster quiz=9]
Уроки по android разработке на Java 0 137
Вернуться к уроку 13 Перейти к уроку 14
Инструменты android разработчика 0 766
Виктория Сулейманова из Rambler поделится опытом тестирования RxJava. За последний год реактивное программирование прочно
#9 — Добавление кнопки
Используя библиотеку widget можно добавлять различные объекты внутрь приложения. В уроке мы добавим две новые кнопки для увеличения значения слайдера на +1 или -1.
Видеоурок
Полезные ссылки:
- Документация по кнопкам .
Для создания кнопок используется библиотека widget , которая дает мощный функционал для создания UI элементов. Чтобы создать кнопку будем использовать метод newButton , который принимает множество параметров для описания свойств кнопки.
Для отслеживания нажатия на кнопку используйте «listener»:
btn = widget.newButton < shape = 'rect', -- Форма width = 50, height = 50, -- Размеры left = 19, top = 100, -- Расположение fontSize = 40, -- Размер шрифта fillColor = < default=< 76 / 255 >, over= < 150 / 255 >>, -- Цвет labelColor = < default=< 1 >, over= < 0 >>, -- Цвет текста label = "-", -- Надпись -- Отслеживание нажатия onPress = function(event) print("Нажали на кнопку") end end >В качестве изображения для кнопки можно использовать любую картинку или же создать кнопку используя стандартные формы и стили для кнопок в Corona.
Как использовать кнопки с индикатором загрузки в дизайне интерфейсов: 5 действенных советов
Пользовательский опыт — главный критерий, который отличает плохой user interface от хорошего. Дизайнер должен забыть о красивых картинках и сосредоточиться на юзабилити. Если в процессе изучения интерфейса люди столкнутся с проблемами — они закроют приложение или сайт и воспользуются решениями конкурентов.
В этом материале поговорим о том, как использовать кнопки с индикатором загрузки для улучшения user experience.
Какие проблемы они решают
Каждый элемент в UI играет определённую роль. Кнопки запускают выполнение определённых действий: загрузка контента, добавление в корзину, переход на сайт. Некоторые дизайнеры знают, что баттоны бывают неактивными и активными. Ещё у них есть состояние загрузки.
Если загрузка выполняется больше 2 секунд, пользователю надо показать дополнительную информацию, иначе он потеряет контроль над ситуацией.
Представьте, что после установки новостного приложения юзера просят создать учётную запись. Он заполняет длинную анкету, выбирает категории интересов, привязывает социальные сети и отправляет информацию. Система долго обрабатывает информацию на сервере. Человек ждёт минуту-две, а потом закрывает и удаляет приложение.
Для решения проблемы надо привязать к кнопке индикатор прогресса. Эту задачу решает программист, но принцип работы может продумать дизайнер.
Пользователи хотят не просто установить на смартфон приложение. С его помощью они решают определённые задачи: просмотр контента, покупки или общение в социальных сетях. Если после клика на кнопку корзины нет никаких оповещений, человек не поймёт, что делать дальше. Из-за этого недочёта бизнес потеряет конверсию и лояльность клиента.
Индикатор прогресса — интерактивный диалог, который отображает состояние системы. Нажали кнопку отправки, появился progressbar и дополнительные объяснения не нужны. Хороший user interface в обязательном порядке предоставляет информацию о ходе выполнения операции. Бывают случаи, когда визуальные элементы спасают ситуацию. Они приходят на помощь, если действие выполняется слишком долго или система перегружена запросами.
Чтобы сохранить положительный пользовательский опыт, надо показать, что операция в обработке и через несколько секунд будет завершена. Такой подход можно применять не только для визуального отображения хода загрузки или скачивания. Он будет полезен при выполнении любых важных действий.
Хороший дизайнер доводит проекты до момента появления продукта в общем доступе. Он первым тестирует приложение или веб-сайт, находит недочёты по юзабилити и сообщает клиенту. Это выводит сотрудничество на новый уровень. Если у заказчика в будущем появятся новые проекты, есть все шансы, что он обратится к специалисту, который проявил себя хорошо.
Специалисты по юзабилити и UX советуют добавлять прогресс-бары или кнопки с индикатором для всех операций, которые выполняются больше двух секунд. Пользователь следит за ходом выполнения и понимает, сколько времени осталось до конца. Красивая анимация снизит негативные впечатления от ожидания и покажет, что разработчики поставили удобство на первое место.
Загрузка может длиться 5-10 секунд или даже несколько минут. Главное, чтобы время было сопоставимо с пользой, которую получит человек. Если он заполняет форму и на отправку данных уходит 5 минут, мало кто будет ждать. Когда речь идёт о скачивании важного файла, который сложно найти, подождать можно. Особенно, если загрузка осуществляется в фоновом режиме.
Типы индикаторов
Прогресс-бары отображают ход выполнения и показывают, сколько времени потребуется для завершения. Разработчики часто используют стандартные варианты, которые дают меньше информации.
Давайте разберёмся, как правильно использовать инструменты визуализации на примерах.
Петлевая анимация
Самый распространённый вариант для отображения активной операции. Использовать бесконечный спиннер можно для действий, которые длятся не больше 10 секунд. Если время ожидания перешагнёт отметку, юзер закроет сайт или приложение.
Петлевая анимация подходит для прелоадера и отображения загрузки контента. Её можно использовать на информационных и коммерческих сайтах. В первом случае для бесконечного скролла при подгрузке дополнительных блоков. Во втором — как анимацию для появления новых «плиток» товаров.
Процентный индикатор
Распространённый формат, который чётко отображает ход выполнения операции от 0 до 100%. Если добавить крутые эффекты, пользователи с удовольствием будут за ними наблюдать. Индикатор сопровождает нас везде: установка приложений на смартфоне и компьютере, загрузка файлов, просмотр видеоконтента.
В примере выше кнопка загрузки трансформируется в красивый блок. Анимация плавная и приятная.
Прогресс-бар
Элемент сообщает о выполнения действия, но не говорит сколько нужно ждать. Его можно представить в виде круга или линии. В двух случаях человек не видит процентов, но примерно знает, на каком этапе находится задача.
На картинке выше показан пример прогресс-бара в виде круга. Аналогичным образом можно использовать линию или разработать более сложную визуализацию. Наглядно, просто и контроль остаётся у пользователя.
Способы применения
Любой элемент UI надо использовать по назначению. Хороший интерфейс отличается логичностью, последовательностью и наличием обратной связи. Если добавить анимацию и progressbar без необходимости, можно запутать аудиторию, а не упростить решение задачи.
Отображение прогресса
Кнопка с прогресс-баром показывает состояние загрузки. Пользователи видят, что система обрабатывает информацию и не будут нажимать её снова. Они подождут, пока круг или линия заполнятся и поймут, что всё готово.
Некоторые дизайнеры добавляют состояние загрузки для баттона, но отображают его в другом месте. Так делать не стоит. Внимание сосредоточено на кнопке, значит и взаимодействовать надо с ней.
Индикатор прогресса должен быть оформлен в общем стиле, чтобы он не выглядел как чужеродный элемент. Текст должен быть хорошо виден поверх бэкграунда. Можно добавить полупрозрачный эффект и выделить прелоадер более ярким цветом.
Способ реализации, который отображен выше, состоит из нескольких шагов. После клика появляется окно с линией и поясняющим сообщением. Затем отображается уведомление об успешном выполнении задачи. В конце кнопка возвращается в привычное состояние.
Ошибки действий
Обратная связь должна присутствовать везде. Особенно, если речь идёт о кнопках, запускающих выполнение важных операций. Индикаторы загрузки информируют пользователей. С их помощью можно показать, что действие не выполнено. Люди поймут, что надо запустить процесс снова или вернуться через несколько минут.
Пример сделан почти идеально. Нестандартная анимация показывает, что скачивание началось и в определённый момент появляется ошибка. После перезапуска файл загружается полностью. Не хватает только пояснения о причинах неполадки. Можно добавить небольшой блок и написать, что загрузка не удалась из-за плохого соединения.
Проверка данных
Индикаторы можно использовать не только для отображения ошибок или прогресса. Способов применения много. При правильном подходе не составит труда адаптировать механизм под нестандартную задачу.
Посмотрите, как разработчик добавил проверку пароля на соответствие заданным требованиям. При наборе символов заполнитель линии показывает, сколько осталось до финиша. Через определённое время полоска становится зелёной и появляется галочка.
Анимация плавная, переходы чётко прослеживаются, задержка при сохранении комбинации минимальная. Способ реализации однозначно понравится аудитории.
Загрузка и выполнение действий
Чаще всего индикаторы и прогресс-бары используют для скачивания и загрузки файлов. Можно пойти дальше и добавить статус выполнения к важным действиям: подписка на обновления по email, активация sim-карты и другие операции.
Посмотрите, насколько изящно реализована анимация. Сначала тележка заполняется, затем показывается иконка, которая подтверждает успешное завершение.
Советы по использованию
Кнопки с индикатором загрузки оберегают пользовательский опыт, только если они правильно реализованы. До появления сайта или приложения в открытом доступе надо протестировать разные сценарии взаимодействия: плохое соединение, отказ системы, внутренние ошибки.
Объясните, что происходит
Если пользователь понимает, какая операция выполняется, он не будет беспокоиться. Текстовые подсказки дадут полезную информацию и будут держать в курсе событий.
Кнопка просто сохраняет данные, можно было добавить анимацию и не тратить время на разработку нестандартного сценария. Разработчики решили, что лучше добавить уведомление о завершении операции, чтобы юзер контролировал ситуацию.
Отвлекайте от ожидания
Задача прогресс-бара заключается не только в информировании. Нестандартная анимация переключает внимание и человек забывает про ожидание. Люди не любят тратить время. Если отправка анкеты или загрузка файла будет длиться слишком долго, пострадает user experience. Чтобы избежать этого, добавьте креативную анимацию.
Показывайте время
Подсказка с длительностью выполнения задачи покажет, что у процесса есть конец. Просто напишите: «Активация подписки займет не более 3 минут. Мы проверим данные кредитной карты у платёжного агрегатора».
Представьте, что на смартфоне появилось уведомление об обновлении. После перезагрузки смартфона появился процентный индикатор, который отображает ход установки. Если дополнить его примерным временем ожидания, пользователь может отложить телефон и вернуться к нему через 3-5-10 минут.
Укажите объём работы
В некоторых случаях progressbar теряет информативность. Если время выполнения нельзя предсказать заранее, добавьте отображение шагов.
Способ реализации на картинке ниже — идеальный вариант для сложных задач. Человек понимает, что 3 из 22 сообщений отправлены и надо ещё подождать.
Проведите тестирование
Если индикатор остановится на отметке 99% и пользователь не увидит поясняющих сообщений, он откажется от выполнения задачи. Надо проверить разные сценарии взаимодействия и добавить текстовые подсказки.
Если отправка данных была прервана из-за проблем с интернетом — юзер должен об этом знать. Тогда он захочет потратить время ещё раз и запустит процесс заново.
Добавьте плавность
Индикаторы, которые двигаются с рывками или чрезмерным замедлением сильно раздражают. Пользователю хочется, чтобы область заполнилась быстро, и загрузка прошла успешно. Сделайте анимацию плавной и красивой.
Можно использовать простой приём, чтобы создать эффект быстрого прогресса. Сначала замедлить загрузку, а ближе к концу ускорить движение. Эта небольшая деталь увеличит интерактивность и покажет, что система работает быстро.
Индикаторы прогресса отлично справляются с задачей, но они всего лишь сообщают об ожидании. Представьте, что надо 3 минуты смотреть на ход часов. В такие моменты кажется, что время замедлилось.
В некоторых случаях прогресс-бары можно заменить скелетонами или скелетами. Это визуальная структура макета, которая показывается перед загрузкой данных. Инструмент используют крупные сервисы вроде Youtube и Facebook.
Отображение «холста» уменьшает дискомфорт от ожидания и показывает, как выглядит контент. Через несколько секунд серые области заполняются текстом и картинками. Никаких прелоадеров и спиннеров.
Каким бы реактивным не был сайт или приложение, на решение определённых задач понадобится время. Кнопки с индикатором прогресса — отличный способ визуализировать ход выполнения операции и отдать контроль в руки юзеров.
Веб-студия IDBI ставит пользовательский опыт на первое место. Давайте вместе разработаем идеальный UI для вашего проекта.