Android view with both path from constructed path or from svg

android-pathview

You want to animate svg or normal Paths?
Change the color, pathWidth or add svg.
Animate the "procentage" property to make the animation.

There are two types of paths :

1. From Svg

<com.eftimoff.androipathview.PathView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/pathView"
    android:layout_width="150dp"
    android:layout_height="150dp"
    app:pathColor="@android:color/white"
    app:svg="@raw/settings"
    app:pathWidth="5"/>

Result

2. From Path

<com.eftimoff.androipathview.PathView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/pathView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:pathColor="@android:color/white"
    app:pathWidth="3"/>

In Code

    final Path path = new Path();
        path.moveTo(0.0f, 0.0f);
        path.lineTo(length / 4f, 0.0f);
        path.lineTo(length, height / 2.0f);
        path.lineTo(length / 4f, height);
        path.lineTo(0.0f, height);
	    path.lineTo(length * 3f / 4f, height / 2f);
	    path.lineTo(0.0f, 0.0f);
	    path.close();
	
pathView.setPath(path);

Result

Use the animator for parallel animation

    pathView.getPathAnimator()
        .delay(100)
        .duration(500)
        .listenerStart(new AnimationListenerStart())
        .listenerEnd(new AnimationListenerEnd())
        .interpolator(new AccelerateDecelerateInterpolator())
        .start();

Use the animator for sequential animation

    pathView.getSequentialPathAnimator()
        .delay(100)
        .duration(500)
        .listenerStart(new AnimationListenerStart())
        .listenerEnd(new AnimationListenerEnd())
        .interpolator(new AccelerateDecelerateInterpolator())
        .start();

If you want to use the svg colors.

    pathView.useNaturalColors();

If you want to draw the real SVG after the path animation.

It is in still in development.

    pathView.setFillAfter(true);

GitHub