Android animation to draw alphabet

Question

I am stuck at the animation part which is kinda tough for me, I need to draw this green sign like this. I tried this Github guide achieve my requirement but with using Path i can only move view with the help of coordinates and i am far from the result i need. I am not sure where to start to get the desired result from animation. I am avoiding embeded GIF and any heavy library to get my result. Please help in this kind of animation, I know it's pretty tough to get this kind of animation via code.

Any help will be appreciate. Thanks

If above video link is not working please check this : Video Link

Answer 1

There is a great tool for creating animating vectors like this. https://shapeshifter.design/ I have created your example there and I will try to explain how in next few steps.

In bottom left corner next to File, Import and Export click to add window to add new Path. After path is added select it and navigate to pathData field. First we will start with animated part, add this to pathData

M 4 6 L 22 2 L 2 22 L 19.5 3.5 L 4 6

You can check more information about M, L, Z commands here https://stackoverflow.com/a/42138513/13481732

Also set fill color to whatever you need.

In the bottom left corner for recently created path or in top right corner next to path name, select stopwatch and add pathData animation.

For first animation set

startTime = 0
endTime = 100 //CHANGE THIS BASE ON YOUR NEEDS
interpolator = Linear
fromValue = M 4 6 L 4 6 L 4 6 Z
toValue = M 4 6 L 22 2 L 19 3.5 Z

Then add another animation (There is + sign on added pathData animation in bottom left corner) and set next values

startTime = 100 //CHANGE THIS BASE ON YOUR NEEDS
endTime = 200 //CHANGE THIS BASE ON YOUR NEEDS
interpolator = Linear
fromValue = M 4 6 L 22 2 L 19 3.5 Z M 22 2 L 22 2 L 19 3.5 Z
toValue = M 4 6 L 22 2 L 19 3.5 Z M 22 2 L 2 22 L 19 3.5 Z

Then for white parts add two new paths. In top set pathData to this:

M 9 7.5 L 11.5 11 L 12.5 10 L 10.5 7.5 Z

In bottom set pathData to this:

M 13 12.5 L 15.5 15.5 L 17 15.5 L 14 11.5 Z

To change background color, in bottom left corner select vector and then in field canvasColor set your background Color.

After you are done you can export it as Animated Vector Drawable and add it to your project. When you add generated .xml file to project open it and change width and height.

This is an example how to start animation:

Drawable drawable = imageView.getDrawable();
if( drawable instanceof AnimatedVectorDrawable ) {
    AnimatedVectorDrawable animation = (AnimatedVectorDrawable) drawable;
    animation.start();
}

Answer 2

The reason you are not able to use Path because Path moves an object from one place to another to produce animation. Whereas your video is creating an object(the Green section) as part of the animation. So you have two options.

Option 1 Create an SVG and add it as an animated vector drawable within your code. You can use an online tool to create SVG from your video. And then add that SVG into your drawables and create a pathmorph XML to change the color from black to green. Example on [Android Developer Website][1]

Usually it will involve two steps

Step 1: Get SVG file for your animation using a video to SVG converter.

Step 2: Change color of your SVG Path from black to green. You can read some sample code for that. Or you can use the AnimatedSVGview library for dynamically adding green color to your SVG.

Option 2 An easier way is to convert this video to Gif and then just display it using Glide.

ImageView imageView = (ImageView) findViewById(R.id.imageView); Glide.with(this).asGif().load(R.raw.image_gif).into(imageView);