Forum Xamarin.Android

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

Xamarin.Android Animated Vector Drawable, setting the animation in code.

Hi.

I have been really struggling to find any good information on how to create an animation with a vector drawable in code in Xamarin.Android.

I have successfully got an animation working purely in with using XMLs.

with a animatehand.xml
<?xml version="1.0" encoding="utf-8" ?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:name="needle" android:propertyName="rotation" android:duration="2000" android:valueFrom="0" android:valueTo="1080" android:interpolator="@android:anim/accelerate_decelerate_interpolator"/> </set>
this is the clockanimation.xml
<?xml version="1.0" encoding="utf-8" ?> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/fullclock"> <target android:name="needle" android:animation="@anim/animatehand"/> </animated-vector>
and the fullclock.xml
<?xml version="1.0" encoding="utf-8" ?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="99.99845dp" android:height="99.99489dp" android:viewportWidth="26.457922" android:viewportHeight="26.456982"> <group android:name="face" android:pivotX="13.22" android:pivotY="13.22"> <path android:pathData="M13.229,13.2285m-13.2274,0a13.2269,13.2274 90.0155,1 1,26.4548 0a13.2269,13.2274 90.0155,1 1,-26.4548 0" android:strokeWidth="0.1" android:fillColor="#808080" android:strokeColor="#000000"/> <path android:pathData="M13.229,13.2285m-11.9513,0a11.9509,11.9513 90.0765,1 1,23.9026 0a11.9509,11.9513 90.0765,1 1,-23.9026 0" android:strokeAlpha="0.309237" android:strokeWidth="0.1" android:fillColor="#f2f2f2" android:strokeColor="#808080"/> <path android:pathData="m13.229,22.2148l0.9717,1.3374L13.229,24.8897l-0.9717,-1.3374z" android:strokeAlpha="0.309237" android:strokeWidth="0.0918885" android:fillColor="#f2f2f2" android:strokeColor="#000000"/> </group> <group android:name="needle" android:pivotX="13" android:pivotY="13"> <path android:pathData="m13.229,23.5523 l1.1186,-10.7632h-2.2372zM13.232,13.4289a0.2073,0.2209 0,0 1,-0.003 0,0.2073 0.2209,0 0,1 -0.2073,-0.2209 0.2073,0.2209 0,0 1,0.2073 -0.2209,0.2073 0.2209,0 0,1 0.2073,0.2209 0.2073,0.2209 0,0 1,-0.2038 0.2209z" android:strokeWidth="0.0151836" android:fillColor="#333333" android:strokeColor="#000000"/> </group> </vector>

This is all well and good for static animations, I need to be able to set the stopping point of the hand to a particular angle, so I need to be able to define the animation in the code.

I found a blog post on doing this (the code in the blog post is in Kotlin), which is what I have tried to implement in Xamarin.

This is my layerlist.xml
<?xml version="1.0" encoding="utf-8" ?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/face" android:drawable="@drawable/clockface"> </item> <item android:id="@+id/hand"> <rotate android:drawable="@drawable/hand" /> </item> </layer-list>

I broke up the fullclock.xml in to two clockface.xml and hand.xml

clockface.xml
<?xml version="1.0" encoding="utf-8" ?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="99.99845dp" android:height="99.99489dp" android:viewportWidth="26.457922" android:viewportHeight="26.456982"> <group android:name="face" android:pivotX="13.22" android:pivotY="13.22"> <path android:pathData="M13.229,13.2285m-13.2274,0a13.2269,13.2274 90.0155,1 1,26.4548 0a13.2269,13.2274 90.0155,1 1,-26.4548 0" android:strokeWidth="0.1" android:fillColor="#808080" android:strokeColor="#000000"/> <path android:pathData="M13.229,13.2285m-11.9513,0a11.9509,11.9513 90.0765,1 1,23.9026 0a11.9509,11.9513 90.0765,1 1,-23.9026 0" android:strokeAlpha="0.309237" android:strokeWidth="0.1" android:fillColor="#f2f2f2" android:strokeColor="#808080"/> <path android:pathData="m13.229,22.2148l0.9717,1.3374L13.229,24.8897l-0.9717,-1.3374z" android:strokeAlpha="0.309237" android:strokeWidth="0.0918885" android:fillColor="#f2f2f2" android:strokeColor="#000000"/> </group> </vector>

hand.xml
<?xml version="1.0" encoding="utf-8" ?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="99.99845dp" android:height="99.99489dp" android:viewportWidth="26.457922" android:viewportHeight="26.456982"> <group android:name="needle" android:pivotX="13" android:pivotY="13"> <path android:pathData="m13.229,23.5523 l1.1186,-10.7632h-2.2372zM13.232,13.4289a0.2073,0.2209 0,0 1,-0.003 0,0.2073 0.2209,0 0,1 -0.2073,-0.2209 0.2073,0.2209 0,0 1,0.2073 -0.2209,0.2073 0.2209,0 0,1 0.2073,0.2209 0.2073,0.2209 0,0 1,-0.2038 0.2209z" android:strokeWidth="0.0151836" android:fillColor="#333333" android:strokeColor="#000000"/> </group> </vector>

in my activity_main.xml I have the following ImageView
<ImageView android:id="@+id/ClockTest" android:layout_width="100sp" android:layout_height="100sp" android:layout_column="0" android:gravity="center" android:scaleType="center" android:src="@drawable/layerlist" />

this is the code that I thought would create the animation, which is in my MainActivity.cs
`
AnimatorSet animset; // class field

This is all in OnCreate

ImageView iva = FindViewById<ImageView>(Resource.Id.ClockTest);

var animationlayer = iva.Drawable as LayerDrawable;
var _ned = animationlayer?.FindDrawableByLayerId(Resource.Id.hand);

var rotate = ObjectAnimator.OfFloat(_ned, "rotation", 0f, 360f).SetDuration(3000);

animset = new AnimatorSet();
animset.SetInterpolator(new AccelerateDecelerateInterpolator());
animset.Play(rotate).With(ObjectAnimator.OfFloat(_ned, "pivotX", 13.22f)).With(ObjectAnimator.OfFloat(_ned, "pivotY", 13.22f));

In a Button Click event handler.

animset.Start() 

`

The animation does not play. I cannot see what I'm missing.
Can anyone offer any assistance or advice on this please. The subject of Animated Vector Drawables seems to be one people only do in XML for tutorial purposes.

Thanks
Andy

Answers

  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited December 2020

    how to create an animation with a vector drawable in code in Xamarin.Android.

    To create the animation programmatically, try using the AnimatedVectorDrawable class.

    Check the code:

    AnimatedVectorDrawable drawable= (AnimatedVectorDrawable)this.GetDrawable(Resource.Drawable.animated_vector);
    imageView.SetImageDrawable(drawable);
    drawable.Start();
    

    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

Sign In or Register to comment.