Related Articles

Related Articles

How to Add WaveLineView in Android?
  • Difficulty Level : Medium
  • Last Updated : 31 Aug, 2020

In this article,  WaveLineView is implemented in android. WaveLineView provides us a very beautiful UI. It can be used when the user has to wait for some time. WaveLineView makes our layout very attractive and hence enhancing the user experience of the app. WaveLineView provide two methods startAnim() and stopAnim(). WaveLineView can be used wherever the developer want the user to wait for some time. Also Progress Bar can be used instead of this but because of its unique UI, it will attract user and hence users wait for enough time. It also provides full control to Developer as they can customize it according to the requirements.

Approach:

Step 1: Add the support Library in your root build.gradle file (not your 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.

XML

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 the dependency in the dependencies section. It has an inbuilt WaveLineView and allows to add the view directly.

XML



filter_none

edit
close

play_arrow

link
brightness_4
code

       
dependencies {         
        implementation 'com.github.Jay-Goo:WaveLineView:v1.0.4'         
}

chevron_right


Step 3: Add the following code in the activity_main.xml file. In this file, we add WaveLineView 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">
  
    <jaygoo.widget.wlv.WaveLineView
        android:id="@+id/waveLineView"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        app:wlvBackgroundColor="@android:color/white"
        app:wlvMoveSpeed="290"
        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 4: Add the following code in MainActivity.java file. WaveLineView provide us two method startAnim() and stopAnim().  startAnim() start the animation and stopAnim() stops it.

MainActivity.java

filter_none

edit
close

play_arrow

link
brightness_4
code

    
package com.madhav.maheshwari.wavelineview;
  
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import jaygoo.widget.wlv.WaveLineView;
  
public class MainActivity extends AppCompatActivity {
    WaveLineView waveLineView;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        waveLineView = findViewById(R.id.waveLineView);
        waveLineView.startAnim();
    }
}

chevron_right


Output:

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up
Recommended Articles
Page :