Анимация круговой галочки Android

Я искал то же самое, этот пост почти все объясняет. Код из этого поста:

drawable/check_mark.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <group android:name="background">
        <path
            android:name="circle"
            android:fillColor="@color/colorPrimary"
            android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0" />
    </group>
    <group android:name="check">
        <path
            android:name="tick"
            android:pathData="M6,11 l0,0 l0,0"
            android:strokeColor="@color/colorAccent"
            android:strokeWidth="1" />
    </group>

</vector>

drawable-v21/animated_check.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/check_mark">
    <target
        android:name="tick"
        android:animation="@anim/check_animation" />
</animated-vector>

anim/check_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:ordering="sequentially"
    android:shareInterpolator="false">
    <!-- Step 1 -->
    <objectAnimator
        android:duration="@android:integer/config_shortAnimTime"
        android:propertyName="pathData"
        android:valueFrom="M6,11 l0,0 l0,0"
        android:valueTo="M6,11 l3.5,4 l0,0"
        android:valueType="pathType" />
    <!-- Step 2 -->
    <objectAnimator
        android:duration="@android:integer/config_shortAnimTime"
        android:propertyName="pathData"
        android:valueFrom="M6,11 l3.5,4 l0,0"
        android:valueTo="M6,11 l3.5,4 l8,-7"
        android:valueType="pathType" />
</set>

Использование

XML макета

<ImageView
    android:id="@+id/imageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:visibility="visible"
    app:srcCompat="@drawable/animated_check" />

Java-класс

mImgCheck = (ImageView) findViewById(R.id.imageView);
((Animatable) mImgCheck.getDrawable()).start();

Вы можете сделать это с помощью библиотеки Lottie, которую создали ребята из Airbnb.

Он имеет большие наборы значков и анимацию, которые можно легко интегрировать с использованием языка разработки Android, т.е. Java и Kotlin.

А вот и ссылка на тиковую анимацию, которую вы искали.

Чтобы использовать этот значок, вам необходимо загрузить json файл этого значка, добавить его в свою папку assets и следовать инструкциям на странице документация.

Анимация создания галочки может быть достигнута путем анимации атрибута trimPathEnd пути галочки (см. https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html). Значение атрибута trimPathEnd означает процент пути, где должен быть конец, обрезая все, что выходит за этот процент. Анимация trimPathEnd от 0 до 1 покажет от 0% до 100% пути галочки.

В следующем определении AnimatedVectorDrawable мы ссылаемся на анимацию с именем trim_path:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@drawable/vector_drawable_ic_check_circle_white_48px">
    <target
            android:name="check"
            android:animation="@anim/trim_path"/>
</animated-vector>

Затем в anim/trim_path.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
            android:duration="1000"
            android:propertyName="trimPathEnd"
            android:valueFrom="0"
            android:valueTo="1"/>
</set>

Это должно создать AnimatedVectorDrawable с флажком, растущим от 0% до 100%. Точно так же вы можете анимировать trimPathEnd на круге. Обратите внимание, что вам может понадобиться продублировать путь круга, чтобы один круг был серым и статичным, а другой круг был синим и анимировался сверху.

Это решение написано в одном xml-файле:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    xmlns:tools="http://schemas.android.com/tools"
    tools:targetApi="lollipop">
    <aapt:attr name="android:drawable">
        <vector
            android:width="50dp"
            android:height="50dp"
            android:viewportWidth="24.0"
            android:viewportHeight="24.0">
            <group android:name="check">
                <path
                    android:name="done"
                    android:pathData="M6,11 l0,0 l0,0"
                    android:strokeWidth="1"
                    android:strokeColor="@color/black" />
            </group>

        </vector>
    </aapt:attr>
    <target android:name="done">
        <aapt:attr name="android:animation">
            <set
                android:interpolator="@android:anim/accelerate_interpolator"
                android:ordering="sequentially"
                android:shareInterpolator="false">
                <!-- Step 1 -->
                <objectAnimator
                    android:duration="@android:integer/config_shortAnimTime"
                    android:propertyName="pathData"
                    android:valueFrom="M6,11 l0,0 l0,0"
                    android:valueTo="M6,11 l3.5,4 l0,0"
                    android:valueType="pathType" />
                <!-- Step 2 -->
                <objectAnimator
                    android:duration="@android:integer/config_shortAnimTime"
                    android:propertyName="pathData"
                    android:valueFrom="M6,11 l3.5,4 l0,0"
                    android:valueTo="M6,11 l3.5,4 l8,-7"
                    android:valueType="pathType" />
            </set>
        </aapt:attr>
    </target>

Меня устраивает. Просто следуйте приведенному выше XML-коду @s-hunter. в вашей деятельности изменить код. как показано ниже:

mImgCheck = (ImageView) findViewById(R.id.imageView);        
Drawable drawable = mImgCheck.getDrawable();
((Animatable) drawable).start();

Вы можете добавить rippleBackground для лучшего вида.