Share My Creation (b4a) AnimatedVectorDrawable

To show AnimatedVectorDrawable we need 3 XML components:

1. VectorDrawable (.xml) - The static vector shapes
2. ObjectAnimator (.xml) - The animation definitions
3. AnimatedVectorDrawable (.xml) - Connects vectors with animations

A barebone working B4A code with all three XML components is on Github: https://github.com/jkhazraji/AnimatedVectorDrawable-inb4a . It depicts an analog clock that starts at12:00. Any AnimatedVectorDrawable bundle that complies with the above scheme can be shown with it. However, the AAPT tool supports a new Android format that bundles several related XML files together, we can merge the XML files from this example into one XML file. XML files can be created from scratch or generated in manifest file.
A demo video captured from an emulator shows an animated vector drawable. It is neither gif nor any other animated format:



Try this new format xml file:

 <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:aapt="http://schemas.android.com/aapt" >
     <aapt:attr name="android:drawable">
         <vector
             android:height="64dp"
             android:width="64dp"
             android:viewportHeight="600"
             android:viewportWidth="600" >
             <group
                 android:name="rotationGroup"
                 android:pivotX="300.0"
                 android:pivotY="300.0"
                 android:rotation="45.0" >
                 <path
                     android:name="v"
                     android:fillColor="#000000"
                     android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
             </group>
         </vector>
     </aapt:attr>

     <target android:name="rotationGroup"> *
         <aapt:attr name="android:animation">
             <objectAnimator
             android:duration="6000"
             android:propertyName="rotation"
             android:valueFrom="0"
             android:valueTo="360" />
         </aapt:attr>
     </target>

     <target android:name="v" >
         <aapt:attr name="android:animation">
             <set>
                 <objectAnimator
                     android:duration="3000"
                     android:propertyName="pathData"
                     android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
                     android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
                     android:valueType="pathType"/>
             </set>
         </aapt:attr>
      </target>
 </animated-vector>

Note: comma in manifest file should be escaped (https://www.b4x.com/android/forum/t...manifest-script-createresource.99783/#content)
If you like donate to get the clock xml files and see how it works.

 

[AnandGupta]

Looks good, congratulation for effort.

What are benefit over gif/apng , other than smaller size ?
What extra jar/libraries will be required ?

 

[jkhazraji]

Looks good, congratulation for effort.

What are benefit over gif/apng , other than smaller size ?
What extra jar/libraries will be required ?

Thanks for your words. These are xml text files that can be customized for different needs and settings. They are resolution-independent and can be scaled infinitely. Their colors can be changed as well as type of animation. In GIF/APNG, they have to be re-created or updated as they are binary format. Any Android interpolator can be used for their animation and I think they are more memory-effecient.
No need for extra jar files or libraries as they are in the core Android library and dealt with as resources that can be embedded in any relevant view.

 

[jkhazraji]

Here is another one taken from the Github : https://github.com/chiuki/animated-vector-drawable.

 

[jkhazraji]

 

[alwaysalearner]

Thank You! I used https://shapeshifter.design to design and export the animated vector If anyone is interested, I have attached example code . Run it in Release mode . In debug, there is no animation

 

[TILogistic]

Looks good, congratulation for effort.

What are benefit over gif/apng , other than smaller size ?
What extra jar/libraries will be required ?

These are resources for Android only.

Vector drawables overview | Views | Android Developers

This document explains the overall usage of the vector drawable resources through either framework APIs or support libraries

developer.android.com

 

[TILogistic]

Thank You! I used https://shapeshifter.design to design and export the animated vector If anyone is interested, I have attached example code . Run it in Release mode . In debug, there is no animation
View attachment 169598View attachment 169599View attachment 169600

use:

 

[TILogistic]

other see:

View Animation | Views | Android Developers

You can use the view animation system to perform tweened animation on Views. Tween animation calculates the animation with information such as the start point, end point, size, rotation, and other common aspects of an animation. A tween animation can …

developer.android.com

XmlLayoutBuilder - Load Xml layouts

Edit: this tutorial was written before CreateResouce keyword was available. Simpler usage example: https://www.b4x.com/android/forum/threads/make-edittext-cursor-more-visible.114148/ The standard way to build the UI in Basic4android is with the visual designer / designer script. You can also...

www.b4x.com

 

[jkhazraji]

Thank You! I used https://shapeshifter.design to design and export the animated vector If anyone is interested, I have attached example code . Run it in Release mode . In debug, there is no animation
View attachment 169598View attachment 169599View attachment 169600

just make avid_anim.XML and avdmod_anim.XML readonly in res folder and it will run in debug mode or include them in manifest

 

[jkhazraji]

other see:

View Animation | Views | Android Developers

You can use the view animation system to perform tweened animation on Views. Tween animation calculates the animation with information such as the start point, end point, size, rotation, and other common aspects of an animation. A tween animation can …

developer.android.com

XmlLayoutBuilder - Load Xml layouts

Edit: this tutorial was written before CreateResouce keyword was available. Simpler usage example: https://www.b4x.com/android/forum/threads/make-edittext-cursor-more-visible.114148/ The standard way to build the UI in Basic4android is with the visual designer / designer script. You can also...

www.b4x.com

Thanks for your enrichment

 

[jkhazraji]

Thank You! I used https://shapeshifter.design to design and export the animated vector If anyone is interested, I have attached example code . Run it in Release mode . In debug, there is no animation
View attachment 169598View attachment 169599View attachment 169600

However, the post is not about creating animated vector file. It is about using them in b4a.

 

[jkhazraji]

Thank You! I used https://shapeshifter.design to design and export the animated vector If anyone is interested, I have attached example code . Run it in Release mode . In debug, there is no animation
View attachment 169598View attachment 169599View attachment 169600

That's nice!