How to Add WaveLineView in Android?

In this article,  WaveLineView is implemented in android. WaveLineView provides us with 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 wants 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 users and hence users wait for enough time. It also provides full control to Developers as they can customize it according to the requirements.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Add the Required Dependencies

Navigate to the Gradle Scripts > build.gradle(Module:app) and Add the Below Dependency in the Dependencies section.

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

Add the Support Library in your settings.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.

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        
        // add the following
        maven { url "https://jitpack.io" }
    }
}

After adding this Dependency, Sync the Project and now we will move towards its implementation.

Step 3: Working with the XML Files

Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail. In this file, we add WaveLineView to the layout. 

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">

    <jaygoo.widget.wlv.WaveLineView
        android:id="@+id/waveLineView"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:wlvBackgroundColor="@android:color/white"
        app:wlvMoveSpeed="290" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail. WaveLineView provide us two method startAnim() and stopAnim().  startAnim() start the animation and stopAnim() stops it. 

Java

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

Kotlin

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import jaygoo.widget.wlv.WaveLineView

class MainActivity : AppCompatActivity() {

    private lateinit var waveLineView: WaveLineView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        waveLineView = findViewById<WaveLineView>(R.id.waveLineView)
        waveLineView.startAnim()
    }
}

Output: