Анимация кнопки для андроид

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

Создаем новый проект, выбираем Blank Activity. Основные шаги создания будут следующими:

1) создаем интерфейс программы, состоящий всего то из одного элемента ImageView, который и будет играть роль кнопки;

2) создаем анимацию из набора изображений;

3) ну и напоследок кодим в MainActivity.java.

Начнем с работы с интерфейсом. Открываем файл activity_main.xml и добавляем туда элемент ImageView, задав ему определенные рамки, чтоб он в итоге не занимал нам весь экран:

Пока что Android Studio ругает нас на строчке android:background=»@drawable/anim_button», чтобы это исправить, переходим к выполнению второго пункта плана: создание анимации. Как вы наверное уже догадались, анимация в приложении будет представлена xml файлом anim_button.xml. Перед тем, как его создать, добавим в проект приложения несколько изображений, которые и будут составлять анимацию. Я не слишком крутой дизайнер (мягко говоря), поэтому если вам не понравиться мой набор картинок, можете подобрать что-нибудь свое. Изображения нужно поместить в папке res/drawable проекта.

Теперь в этой же папке res/drawable создаем новый xml файл по имени anim_button.xml и добавим в него наши картинки:

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

Переходим к работе в файле MainActivity.java. Нам нужно объявить и инициализировать переменные ImageView и AnimationDrawable, настроить файл anim_button.xml в качестве анимации для элемента ImageView и настроить запуск самой анимации при нажатии на элемент ImageView. Чтобы все это сделать, добавляем следующий код:

Ну вот и все на этот раз, запускаем и смотрим что получилось:

Кнопочка с ImageView работает нормально. Чтобы анимация повторилась 1 раз, в строке
animation.setOneShot(false) нужно выставить значение true.

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

Источник

Как создать плавающую кнопку для Android приложения

Sep 25, 2019 · 5 min read

Для начала создайте пустой Android проект.

Добавьте зависимость 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. Ваш код должен выглядеть так:

Источник

Анимация кнопки для андроид

Пошаговое описание процесса создания кнопки для приложения, при нажатии на которую будет проигрываться анимация. Такой эффект можно использовать для создания «объемных» кнопок и для других целей улучшения качества оформления приложения. Используется среда разработки Eclipse для Android и класс AnimationDrawable.

1. Сначала нужно подготовить кадры для анимированной кнопки. Эти кадры будут показаны в анимации друг за другом, что создаст эффект живого реального объекта. Кадры можно нарисовать вручную в Photoshop и сохранить в виде отдельных файлов формата PNG, либо можно экспортировать из готового GIF-а с помощью программы наподобие Easy2Convert GIF to PNG [1].

2. Добавьте картинки в проект Eclipse как ресурс. Для этого в Project Explorer создайте в папке res отдельную папку, и дайте ей имя drawable (если она еще не существует). После этого перетащите картинки анимации кнопки в эту папку. В ответ на запрос — «Копировать или создать ярлыки?» — выберите «Копировать». Предположим, что картинки анимации у Вас называются b01.png, b02.png, b03.png.

Внимание, это важно: имена файлов картинок должны начинаться с буквы, и в имени картинки не должно быть заглавных букв и пробелов (это правило касается всех файлов для ресурсов). В противном случае среда выдаст ошибку Syntax error on token «имя_картинки_без_расширения», invalid VariableDeclaratorId.

3. Создайте в папке button1 файл animbutton_description.xml (правая кнопка New -> Other. -> XML File). Добавьте в этот файл список анимации animation-list:

Здесь drawable имя папки, где находятся картинки, а b01, b02, b03 имена картинок без расширения png.

4. В визуальном редакторе файла activity_main.xml бросьте на экран формы приложения объект ImageView. Поменяйте у него свойства следующим образом:

Свойство	Значение	Описание
Id	@+id/imageView1	Идентификатор ресурса, которое используется для его поиска функцией findViewById (см. далее в примере кода).
ImageView -> Src	удалите старое значение	По умолчанию здесь вставлена картинка @drawable/ic_launcher (зеленый робот). Нам она не нужна, поэтому очистите это свойство.
View -> Background	@drawable/animbutton_description	Здесь подставляется путь и имя XML файла описания кадров для кнопки
View -> On Click	animButtonClick	Имя метода, который вызывается, если кликнуть на объект ImageView.

Примечание: правки можно делать как в визуальном редакторе, так и в текстовом виде, редактируя текстовый файл activity_main.xml. Переключение происходит нижними закладками «Graphical Layout» и «activity_main.xml».

В результате в файле activity_main.xml должно получиться примерно следующее описание ImageView:

5. Откройте модуль класса MainActivity (файл MainActivity.java) и добавьте в класс MainActivity две глобальные переменные:

6. Добавьте в обработчик события onCreate код для загрузки анимации и привязки его к размещенному на экране ImageView:

7. Создайте в классе MainActivity код для обработчика клика на ImageView, он должен запускать анимацию.

Читайте также: Игровые андроид тв боксы

Вызов метода stop нужен для перезапуска анимации, без него анимация на нашей кнопке будет работать только 1 раз.

На скриншоте видно, как работает анимированная кнопка.

Источник

Установить эффект нажатия кнопки в Android

Я новичок в разработке приложений для Android и понял, что, в конце концов, для конечного пользователя действительно важен пользовательский интерфейс приложения.

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

Я хотел бы знать, есть ли способ вернуть исходный эффект или программно установить какой-либо эффект щелчка.

4 ответа

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

А затем добавьте прослушиватель кликов:

Сохраните это как чертеж и установите в качестве фона:

Это всего лишь простой пример. Вы можете сами создавать более сложные.

Благодаря ответу Амира Хорева я понял, что мне действительно нужно. Я основал свое решение на его ответе, но вместо вызова метода setBackgroundColor () я использовал метод setColorFilter () вместо фона представления, чтобы вызвать как события ACTION_DOWN, так и ACTION_UP. Итак, теперь я могу установить цветовой фильтр для любой кнопки. Вот как окончательно выглядел код:

Я также написал такую функцию, как public void triggerActionDownEvent(Button button); , чтобы я мог вызывать эту функцию вместо того, чтобы писать весь предыдущий код для каждой кнопки. Теперь мне нужно будет следить за тем, чтобы одновременно нажималась не более одной кнопки.

Предлагаю программно настроить цвет или изображение. Ты можешь использовать:

Источник

Анимации в Android по полочкам (Часть 1. Базовые анимации)

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

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

Часть 1. Базовые анимации
Часть 2. Комплексные анимации
Часть 3. «Низкоуровневые» анимации

Часть 1. Базовые анимации

1. Кадр за кадром

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

Всё что нужно сделать это создать xml со ссылками на каждый кадр:

И запустить анимацию (Здесь и далее все примеры будут приведены на Kotlin):

Сложные по графике анимации, небольших размеров и подготовленные во внешнем редакторе.

Возможность достичь любой сложности эффектов

Большое потребление ресурсов и, как следствие, довольно затратный импорт в приложение с возможностью получить OutOfMemory. Если по каким-то причинам вам нужно показывать большое количество кадров, то придётся писать свою реализацию с постепенной подгрузкой изображений в память. Но если так пришлось делать, возможно проще прибегнуть к видео?

2. Анимация свойств объекта (aka Property Animator)

Если нам нужно всего-лишь передвинуть что-нибудь на несколько пикселей в сторону или изменить прозрачность, чтобы не плодить миллион очень похожих друг на друга кадров на помощь приходит Animator. Фактически с помощью него можно анимировать любое свойство любых объектов.

Базовый абстрактный класс называется Animator, у него есть несколько наследников, нам важны:

ValueAnimator — позволяет анимировать любое свойство
ObjectAnimator — наследуется от ValueAnimator и имеет упрощённый интерфейс для анимации свойств View.
ViewPropertyAnimator — Предоставляет ещё один удобный интерфейс для анимации View. Не унаследован от Animator и используется в методе View::animate()

Анимацию выше можно описать как в коде:

так и в XML ( animator/open_animator.xml ):

Так-же есть возможность описать нашу анимацию переходов между стейтами View, что соответсвенно, с лёгкостью позволит создать анимированные переходы между стейтами у любых View. Описанная в XML анимация будет автоматически запущена при смене состояния View.
animator/state_animator.xml

Анимация View объектов и любых их параметров
Анимация любых других параметров

В некоторой степени требовательны к ресурсам

3. Анимация View (aka View animation)

До появления Animator в Android были только Animations. Основной недостаток которых был в том что они анимировали только представление вида и никак на самом деле не изменяли его свойства. Поэтому если хочется анимировать перемещение какого-либо элемента, то дополнительно по окончанию анимации нужно изменить ещё его свойства. Такой подход так или иначе не очень удобен, если вам нужна чуть более сложная анимация или нужно отлавливать нажатия в момент анимации.

Анимацию можно запустить как в коде:

так и в XML (обратите внимание, что синтаксис отличается от xml для Animator):
anim/open_animation.xml

Там, где API не позволяет использовать Animator.

Устаревший API, меняет только представление вида.

4. Анимация векторных ресурсов (aka AnimatedVectorDrawable)

На мой взгляд самая интересная часть в Android анимациях. Можно относительно малыми силами добиваться сложных и интересных эффектов. Трансформации иконок в Android сделаны именно так.

VectorDrawable состоит из Path и Group элементов. Создание анимации сводится к тому, чтобы прописать движение к этим элементам. Андроид на картинке выше, в коде будет выглядеть так:

Чтобы не писать XML вручную можно воспользоваться онлайн инструментом.

Начиная с API 25 векторные анимации отрисовываются в RenderThread, поэтому, даже если мы загрузим чем-то наш UI Thread (но мы же никогда так не делаем, да?), анимации всё равно будут проигрываться плавно.

Иконки
Анимационные эффекты

Нет возможности вручную управлять точкой анимации во времени (т.е. фактически отсутствует какой-либо метод, вроде setCurrentTime)

Источник