LineAnimationView in Android with Example

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 application 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 developer.
• One can add drawable 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:drawableAminationSpeed="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.startAnimateArrow();
      }
  
      @Override
      public Path setOnPathUpdateListener(int bitmapPositionX,
                                          int bitmapPositionY) {
          // create a new Path object
          Path p = new Path();
  
          // moveTo(float x, float y) takes two parameter
          // The x and y are the start of a new contour
          // moveTo set the beginning of the next
          // contour to the point (x,y)
          p.moveTo(animator.getWidth() / 2, 0);
  
          // cubicTo(float x1, float y1, float x2, float y2,
          // float x3, float y3) takes six parameter
          // The x1 and y1 are the 1st control
          // point on a cubic curve
          // The x2 and y2 are the 2nd control
          // point on a cubic curve
          // The x3 and y3 are the end point
          // on a cubic curve
          // Add a cubic bezier from the last point,
          // approaching control points
          // (x1,y1) and (x2,y2), and ending at (x3,y3).
          // If no moveTo() call has been
          // made for this contour, the first point is
          // automatically set to (0,0).
          p.cubicTo(0, animator.getHeight() / 2, animator.getWidth(),
            animator.getHeight() / 2,
            animator.getWidth() / 2, animator.getHeight());
  
          return p;
      }
  
      @Override
      public void setOnAnimationCompleteListener() {
  
      }
  }

Output: Run on Emulator