Awesome

AnimatedPathView

An animated path view following the methods in a blog post from Romain Guy here: http://www.curious-creature.org/2013/12/21/android-recipe-4-path-tracing/ Per the blog post, I will be adding SVG support soon.

Usage

You can set the path by calling:

animatedPathView.setPath(Path p);

And you can set the percentage (0.0f to 1.0f) of the path being shown by calling:

animatedPathView.setPercentage(float f);

You can also set the resize the path you created by calling:

animatedPathView.scalePathBy(float x, float y);

FYI: As of right now, WRAP_CONTENT is disabled in order set paths relative to view with view.getWidth() and such. I will be fixing this in the future. So layout_width and layout_height must be specified!

Example: This will create a path that will draw a border around the top half of the screen and an X through the middle of it.

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.mattkula.animatedpathview.sample"
    android:orientation="vertical" 
    android:layout_width="fill_parent"     
    android:layout_height="fill_parent">
    
    <com.mattkula.animatedpathview.library.AnimatedPathView 
        android:id="@+id/animated_path" 
        android:layout_width="fill_parent" 
        android:layout_height="0dp" 
        android:layout_weight="1" 
        app:strokeColor="@android:color/holo_red_light" 
        app:strokeWidth="10"/>
        
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="0dp" 
        android:layout_weight="1" 
        android:text="Press top half of screen"/>
        
</LinearLayout>

final AnimatedPathView view = (AnimatedPathView)findViewById(R.id.animated_path);

view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        view.getViewTreeObserver().removeGlobalOnLayoutListener(this);

        Path p = new Path();
        p.moveTo(0, 0);
        p.lineTo(view.getWidth(), 0);
        p.lineTo(view.getWidth(), view.getHeight());
        p.lineTo(0, view.getHeight());
        p.lineTo(0, 0);
        p.lineTo(view.getWidth(), view.getHeight());
        p.lineTo(view.getWidth(), 0);
        p.lineTo(0, view.getHeight());
        view.setPath(p);
    }
});

view.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        ObjectAnimator anim = ObjectAnimator.ofFloat(view, "percentage", 0.0f, 1.0f);
        anim.setDuration(2000);
        anim.setInterpolator(new LinearInterpolator());
        anim.start();
    }
});

If you just want to use straight lines, you can use an array of points to specify your path such as:

float[][] points = new float[][]{
        {0, 0},
        {view.getWidth(), 0},
        {view.getWidth(), view.getHeight()},
        {0, view.getHeight()},
        {0, 0},
        {view.getWidth(), view.getHeight()},
        {view.getWidth(), 0},
        {0, view.getHeight()}
};
view.setPath(points);