how to create a vector drawable working with this library

[mohamadk]

Hi, thanks for this exciting library.
I have a question.
I use simple vectors in the android studio to supply this library but my vectors don't animate as I want.
I think that's beacuse of how vectors define in xml.
for seeing my problem you just need set a one of defalut vectors to VectorMasterView.
so my question is how should I create a vector that works with this great library?
I hope best wishes for you.

[harjot-oberai]

All vectors should work fine with the library, even the ones created by android studio (the default vectors). There is no special kind of vectors that are required.
Please attach the vector xml here and elaborate what kind of animation you want, only then will I be able to help you further.

[mohamadk]

this is my clock vector I'm using

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <path android:name="path0" android:fillColor="#FF000000" android:pathData="M11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12S17.52,2 11.99,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8zM12.5,7H11v6l5.25,3.15 0.75,-1.23 -4.5,-2.67z"/> </vector>

I want to animate like your lighting animation in sample code starts from a dot and reveal.
but it doesn't.
please try it yourself.

[harjot-oberai]

You should probably use another vector for clock. The one you are using cannot be animated in the way you want to. You need 2 separate paths, one for the outer circle, and one for the clock hands. I recommend that you use this vector : https://feathericons.com/icons/core/clock.svg

(I highly recommend Feather icons for svgs).

Just convert the above svg into vector asset using Android Studio. You will get the following vector file :

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"
        android:strokeLineCap="round"
        android:strokeColor="#000"
        android:fillColor="#00000000"
        android:strokeWidth="2"
        android:strokeLineJoin="round"/>
    <path
        android:pathData="M12,6l0,6l3,3"
        android:strokeLineCap="round"
        android:strokeColor="#000"
        android:fillColor="#00000000"
        android:strokeWidth="2"
        android:strokeLineJoin="round"/>
</vector>

Now you have different paths for the hands and the outer ring. So to animate the clock hands, just use the trim path animation on the path of the clock hands, as shown in the Readme.

You may also want to use RichPath library that makes animations of paths very simple.