An animated path view following the methods in a blog post from Romain Guy
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.idea
library
sample
.gitignore
README.md

README.md

AnimatedPathView

Android Arsenal

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);