LineAnimationView in Android with Example

Last Updated : 29 Aug, 2024

LineAnimationView is an animation library that helps to gain the attention of the user. It is useful for creating very beautiful animation. In this animation, an object emerges from the bottom and goes to the top. Some useful features and applications of LineAnimationView are:

Use this view where if you want the user to wait for some time.
ProgressBar can be used instead of this but because of its unique UI, it will attract the user and hence users wait for enough time.
It also provides full control to the developer.
One can add drawables to the LineAnimation View according to the requirements.

Approach

Step 1: Add the support Library in the root build.gradle file (not in module build.gradle file).

This library jitpack is a novel package repository. It is made for JVM so that any library which is present in github and Bitbucket can be directly used in the application.

allprojects {           
 repositories {           
        maven { url 'https://jitpack.io' }           
     }          
}

Step 2: Add the support library in build.gradle file and add dependency in the dependencies section.

implementation 'com.github.tushar09:LineAnimation:1.1.9'

Step 3: Paste the png file in drawable folder and add it into the LineAnimationView in activity_main.xml file.

Download the png file from this Link.

Step 4: Add the following code in activity_main.xml file. In this file add the LineAnimation View to the layout.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.captaindroid.lineanimation.Animator
        android:id="@+id/lineAnimatorView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:dashPathSize="12dp"
        app:dashPathGap="12dp"
        app:pathColor="@color/colorAccent"
        app:pathStrokeWidth="4dp"
        app:drawable="@drawable/ic_water"
        app:enableDashPath="true"
        app:drawableAnimationSpeed="5"
        app:repeatable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
    Step 5: Add the following code in MainActivity.java file. In this file add PathListener to the LineAnimation View. 
MainActivity.java
    
        package org.geeksforgeeks.lineanimation;

import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Path;
import android.os.Bundle;
import com.captaindroid.lineanimation.Animator;
import com.captaindroid.lineanimation.utils.OnPathListener;

public class MainActivity extends AppCompatActivity implements OnPathListener {
    private Animator animator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        animator = findViewById(R.id.lineAnimatorView);
        animator.setOnPathListener(this);
        animator.startAnimateArrow();
    }

    @Override
    public Path setOnPathUpdateListener(int bitmapPositionX, int bitmapPositionY) {
        // Create a new Path object
        Path path = new Path();
        
        // Move to the starting point of the path
        path.moveTo(animator.getWidth() / 2, 0);
        
        // Create a cubic Bezier curve from the start point to the end point
        path.cubicTo(0, animator.getHeight() / 2, animator.getWidth(),
          animator.getHeight() / 2, animator.getWidth() / 2, animator.getHeight());

        return path;
    }

    @Override
    public void setOnAnimationCompleteListener() {
        // Implement any actions to be taken when the animation is complete
    }
}