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.

line-animation

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 bigbucket can be directly used in the application.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Step 3: Paste the png file in drawable folder and add it into the LineAnimaionView 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

       
    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        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>

    chevron_right

    
    

  • Step 5: Add the following code in MainActivity.java file. In this file add PathListner to the LineAnimation View.

    MainActivity.java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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() {
      
        }
    }

    chevron_right