Android togglebutton animated vector

Работа с анимацией. AnimatedVectorDrawableCompat

В этой стате хотел бы всем рассказать и показать на практике, как можно делать анимацию в Android приложении при помощи AnimatedVectorDrawableCompat, например свои кастомные кнопки, ImageView, FloatingActionButton.

На сегодняшний день информации по этому поводу в сети не так много, точней ее совсем — нет. Все, что мне удалось найти — это недавние представленные новшества Google, а именно:

Этого по сути мало, чтобы понять, как применить на практике AnimatedVectorDrawableCompat.

Теперь непосредственно перейдем к применению.

На первом этапе нам нужно избавиться от того, чтоб фреймворк превращал иконку в .png. С версии 23.3.0 можно использовать .xml и для это нужно в Gradle app level добавить следующий flag:

И в зависимость подключить последнюю версию AppComapt:

Далее, в примере я буду использовать квадрат (синий), который будет немного накрывать своими углами круг (красный).
На выходе мы должны задействовать 2 объекта и заставить их непрерывно двигаться соответственно по оси X (квадрат) и Y (круг).

Создаем Drawable Resource File, называем файл — icon.xml и кладем в папку drawable:

Для хранения анимации в своем проекте мы создаем папку animator — res/animator
В нее мы положим два объекта и назовем их соответственно:

Здесь же мы и указали, что объекты будут двигать по оси X и Y, откуда будут начинать движение, а также бесконечность движений.

Если у вас больше именованных групп, которые нужно анимировать — то вот в этой директории их и нужно создавать, соответсвенно и больше групп будут в основном файле — icon.xml

Теперь создаем непосредственно анимированный файл, на который будем ссылаться в layout или в коде — res/drawable/anim_icon:

Примечание: Android Studio подчёркивает красным animated-vector (если мин.версия проекта меньше 21), но если вы подключили flag, как указанно в начале — все заработает.

Теперь мы можем обращаться к анимированным векторам в xml. Это может быть — ImageView, ImageButton, FloatingActinonButton:

Обращаемся из кода к векторам. Здесь я также повесил OnClickListener и сохранил состояние при перевороте:

Примечание: не забудьте подтянуть зависимость:

Результат проделанной работы:

Недавно появилась возможность объединить файлы my_vector.xml и anim_vector в одном anim_vector (теперь отдельный файл res/drawable/my_vector.xml не нужен), а также добавить сюда и файлы-аниматоры (objectAnimator) таким образом получится один файл на всю анимацию.

Представили это Google на I/O, но к сожалению — не работает. На видео с 14 минуты говориться об этом.

Источник

Android AnimatedVectorDrawable

Android Tutorial

In this tutorial, we’ll be discussing AnimatedVectorDrawable and implementing it in various ways in our android application. Having an idea of VectorDrawables would make the below article easier to understand.

AnimatedVectorDrawable

AnimatedVectorDrawable class was introduced since API 21 and is used to animate Vector Drawables beautifully and easily.

Following are some of the things that you can perform with AnimatedVectorDrawable:

• Rotate, Scale, Translate VectorDrawables
• Animate the VectorDrawable such as fill color etc.
• Draw paths and do Path Morphing

Typically to animate the Vector Drawable we define the animations using the ObjectAnimator class.

ShapeShifter is a popular tool to visually create an AnimatedVectorDrawable.

For this, we need to import a Vector Asset/ SVG file.

We’ve got a sample vector drawable xml file named ic_settings.xml as shown below:

Let’s import this in ShapeShifter to create an AnimatedVectorDrawable:

Firstly, we need to add the vector drawable inside a group layer in order to add animations to it.

We’ve set the vector drawable to rotate by 270 degrees.
You must set the pivotX and pivotY about which the VectorDrawable would rotate.

Following are some of the properties that can be set on the AnimatedVectorDrawable:

• rotation
• pivotX
• pivotY
• scaleX
• scaleY
• translateX
• translateY
• pathData
• fillColor
• strokeColor
• strokeWidth
• strokeAlpha
• fillAlpha
• trimPathStart
• trimPathEnd
• trimPathOffset

Now from the ShapeShifter, click Export – AnimatedVectorDrawable to generate the xml version of the AnimatedVectorDrawable:

We’ve set the long path data as a string resource in the strings.xml file.

The name attribute of the target element in the AnimatedVectorDrawable corresponds to the name of the group, which is animated. The animation attribute takes the animator class which is object animator here.

To make the AnimatedVectorDrawable animate forever, we’ve added a repeatCount to infinite in the ObjectAnimator tag.

Now that we have got the AnimatedVectorDrawable we can set it on our ImageView(any related view) by:
android:src=»https://www.journaldev.com/23261/@drawable/avd_settings» .

Still the animated vector drawable won’t animate!

In order to make it animate, we need to do:

Animatable is an interface that contains methods to handle animations on drawables.
Methods like – start() , stop() , isRunning()

Setting AnimatedVectorDrawable Programmatically

this is the Context.

In the following section, we’ll be creating different types of AnimatedVectorDrawable

Project Structure

The code for the activity_main.xml layout is given below:

We’ve already seen the avd_settings.xml file.

Let’s see avd_jd.xml next.

The ic_jd.xml that we’ve written is:

The avd_jd.xml code generated from the ShapeShifter is:

In the above XML code, we’ve done scale, animate and rotate separately on both the paths.
Notice that each path has a name property which is linked to the respective target.

The XML properties are self-explanatory. And once you get a hang of it, you can write the AnimatedVectorDrawable XML code directly without the need of ShapeShifter.

The avd_cross2tick.xml and avd_tick2cross.xml are used to transform a tickmark vector drawable into a cross vector drawable. Thus it transforms paths.
The codes for the object animators are separately put inside the animator folder inside the res directory.

You can find their complete implementations in the source code/Github repository at the end of this tutorial. We’re skipping this due to space constraints.

The code for the MainActivity.java is given below:

Here we’ve set the AnimatedVectorDrawable on two ImageView and two FloatingActionButtons.

In order to listen to animation start and end, we can register Animation Callbacks on the AnimatedVectorDrawable as:

Note: registerAnimationCallback works on Android M(23) and above only.

The output of the application in action is :

This brings an end to this tutorial. You can download the project from the link below or check out the GitHub repository for the complete XML codes of all the AnimatedVectorDrawables.

Источник

Векторная анимация в приложениях android (Animated Vector Drawable)

Как использовать векторную анимацию (Animated Vector Drawable) в андроид-приложениях. Как загрузть в приложение android свою векторную картинку и как анимировать векторные изображения.

На прошлом уроке по дизайну андроид-приложений мы говорили об использовании векторной графики и научились создавать векторные ресурсы в Андроид Студио.

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

При анимации вылетает клас каст ексепшин, но почему?
switch_circle.xml

AppCompatImageButton switchCircle = (AppCompatImageButton) view.findViewById(R.id.switchButtonCircle);
Drawable drawable = switchCircle.getDrawable();
((Animatable) drawable).start();

switch_circle_animated_vector.xml

stacktrace

java.lang.ClassCastException: android.graphics.drawable.VectorDrawable cannot be cast to android.graphics.drawable.Animatable
at com.plorial.telegramcamera.CameraPreviewFragment$1.onClick(CameraPreviewFragment.java:65)
at android.view.View.performClick(View.java:5198)
at android.view.View$PerformClick.run(View.java:21147)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:148)
at android.app.ActivityThread.main(ActivityThread.java:5417)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

Для отправки комментария вам необходимо авторизоваться.

Источник

Векторная анимация в Андроид (Часть первая)

Уже довольно давно в Андроиде существует возможность использовать векторные ресурсы вместо png нарезки. Такая возможность появилась с релизом Android 5.0 Lollipop и API 21. Для более ранних версий системы, мы можем использовать AppCompat (библиотека совместимости), благодаря которой статичный вектор будет работать с API 7 (Android 2.1), а анимированный с API 11 (Android 3.0 Honeycomb).

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

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

Вектор на Андроид?

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

К сожалению (или к счастью), в Андроиде нельзя использовать svg файлы напрямую, по крайней мере, без использования сторонних библиотек. Причина очень проста и состоит в том, что SVG формат очень комплексный и богатый на возможности и поддержка столь богатого функционала сложна и не целесообразна для таких простых вещей как иконки, ну и не стоит забывать о проблеме производительности и совместимости. Именно поэтому в андроиде используют более простой формат, который, тем не менее, во многом похож на svg.

Векторная графика представлена в виде двух классов VectorDrawable и AnimatedVectorDrawable. Из названия классов понятно, что первый отвечает за статичный вектор, а второй за его анимацию. Классы описываются обычным XML ресурсом.

Для начала рассмотрим VectorDrawable, который имеет следующую структуру:

В элементе содержатся параметры высоты и ширины объекта. Внутри есть элемент который может содержать в себе элементы

и а так же другие группы. В параметрах элемента указывается информация о трансформации (смещении, масштабе и угле) и имени которое мы будем использовать для применения анимации. Элементы

и описывают геометрию и цвет объекта.

Для того чтобы добавить анимацию мы используем класс ObjectAnimator который просто применяем на объекты VectorDrawable. Мы можем применять анимацию как к общей группе так и к конкретному

. Анимация может представлять собой простую манипуляцию параметрами объекта так и сложный морфинг.

Раньше для реализации анимации в приложении необходимо было использовать как минимум 3 xml файла: 1 файл для VectorDrawable который необходимо анимировать, другой для аниматора описывающего анимацию и последний файл — объединяющий непосредственно аниматор и VectorDrawable. Чем сложнее анимация, тем больше файлов необходимо создавать, что часто приводило к путанице.

На Google I/O 2016 был представлен новый формат — XML bundle. Он позволяет описывать векторную анимацию одним файлом.

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

Готовим вектор под андроид

Для начала нам нужен любой графический редактор, который умеет на выходе выдавать svg файл. К счастью, их великое множество: Photoshop, Illustrator, Sketch, Inkscape, Affinity Designer и т.д.

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

Для примера я сделал простую иконку замка и разделил её на два шейпа (группы) для последующей анимации. Сохраняем в svg и обязательно проверяем корректность экспорта. Очень часто проблемы возникают со stroke и от избыточной вложенности объектов. Как правило, старайтесь по максимуму объединять всё в один объект, а stroke переводить в shape(outline).

Конвертация SVG в XML

Есть несколько способов сделать конвертацию svg файла в xml.

Первый способ — это сделать всё руками. Это конечно, не очень удобно, но ничего сложного тут нет. Просто переносим куски из svg в xml используя правильные имена параметров. Ниже я выделил куски, которые практически полностью совпадают.

Второй способ — В Android Studio есть инструмент Vector Asset Studio, который позволяет автоматически выполнить перевод SVG файла в XML. Ресурсы можно выбирать из библиотеки иконок или указать свой SVG файл. Благодаря превью можно сразу оценить корректность экспорта. Есть полезные настройки.

Третий способ — это использовать онлайн инструменты, например http://inloop.github.io/svg2android/. Лично я предпочитаю именно его, так как в нем есть полезные настройки по оптимизации файла и самое главное — возможность выгрузить и забрать все пакетом. К сожалению, нет превью результата.

В первой части мы подробно рассмотрели структуру векторных ресурсов на андроид и способы конвертации ресурсов из svg в xml. В следующей части мы рассмотрим несколько способов работы с анимацией.

Ребята из Google проделали хорошую работу и постепенно делают работу с вектором все более удобной. Это безусловно подталкивает разработчиков к его большему распространению. Векторные ресурсы также легки в использовании как и их растровые аналоги и при этом дают массу таких преимуществ как: естественная поддержка любых плотностей экранов и возможность переиспользования изображения в различных размерах и цветах.

Все используемые материалы можно найти на GitHub: XML Bundle, Файлы замка.

Источник