Jay-Goo WaveLineView in Android App

We have seen different types of app in which the different beautiful animations are shown (When the app is loading, when a file or image/video is downloading/ uploading, or when performing some heavy task ). It will make the UI of your Android app more beautiful and interactive and also help the user to remember it for a long time. This type of animation effect vary from app to app and some developers use third-party libraries to add this animation while other developers make their custom animations according to the look and feel of their app.

What is WaveLineView?

To add the above features to our app, we need an external library and WaveLineView is the library that is used to add beautiful wave line animation to our app. So it will make the app more attractive and UI-friendly with minimal code. You can learn more about WaveLineView from GitHub here.

Attributes of WaveLineView

So, let's implement a simple WaveLineView in our android app.

Step 1: Create a new Project

1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to set up Android Studio and create your first Android project)

2. Choose "Empty Activity" from the project template window and click Next

3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ), and minimum SDK(we are using API 21: Android 5.0 (Lollipop))

4. Next click on the Finish button after filling in the above details

5. Now, wait for the project to finish building.

Step 2: Adding the WaveLineView dependency

To show the wave line animation in our app, we have to implement the WaveLineView in our app, to do so follow the below steps.

Go to Gradle Scripts -> build.gradle (project level, not in the module build.gradle file) section and add below code inside repositories as shown below.

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:4.1.3"


    }
}

allprojects {
    repositories {
        google()
        jcenter()
        repositories {
            //adding the jitpack
            maven { url 'https://jitpack.io' }
        }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

Next, go to Gradle Scripts -> build.gradle (Module: app) section and import below dependencies and click the "sync Now" show at the top:

dependencies {
 //adding the wave line view library
    implementation 'com.github.Jay-Goo:WaveLineView:v1.0.4'
}

Step 3: Modify activity_main.xml

Now, go to app -> res -> layout -> activity_main.xml, remove the default TextView and change the Layout to RelativeLayout and then add a WaveLineView, Button, and LinearLayout with orientation vertical and inside LinearLayout we add several SeekBars to change different values of WaveLineView as shown below:

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout 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">


    <!-- Wave line View -->
    <jaygoo.widget.wlv.WaveLineView
        app:wlvLineColor = "@color/design_default_color_primary"
        android:layout_marginTop = "14dp"
        android:layout_marginBottom = "12dp"
        android:layout_marginStart = "6dp"
        android:layout_marginEnd = "8dp"
        android:layout_centerInParent = "true"
        android:layout_centerHorizontal = "true"
        android:layout_centerVertical = "true"
        android:id = "@+id/waveLineView"
        android:layout_width = "match_parent"
        android:layout_height = "120dp"
        app:wlvBackgroundColor = "@android:color/white"
        app:wlvMoveSpeed = "290" />

    <!-- button to start the wave line animation -->
    <Button
        android:id  =  "@+id/buttonStart"
        android:textStyle  =  "bold"
        android:includeFontPadding  =  "true"
        android:paddingTop  =  "19dp"
        android:paddingBottom  =  "17dp"
        android:paddingStart  =  "12dp"
        android:paddingEnd  =  "9dp"
        android:backgroundTint  =  "#03A9F4"
        android:text  =  "Start Wave Line Animation"
        android:textSize  =  "16sp"
        android:textColor  =  "#ffff"
        android:textAllCaps  =  "true"
        android:textAlignment  =  "center"
        android:layout_marginBottom  =  "80dp"
        android:layout_marginStart  =  "15dp"
        android:layout_marginTop  =  "9dp"
        android:layout_marginEnd  =  "16dp"
        android:layout_alignParentBottom  =  "true"
        android:layout_width  =  "match_parent"
        android:layout_height  =  "80dp"
        tools:ignore = "HardcodedText" />


    <!-- button to stop the wave line animation -->
    <Button
        android:id  =  "@+id/buttonStop"
        android:textStyle  =  "bold"
        android:includeFontPadding  =  "true"
        android:paddingTop  =  "19dp"
        android:paddingBottom  =  "17dp"
        android:paddingStart  =  "24dp"
        android:paddingEnd  =  "9dp"
        android:backgroundTint  =  "#FF2234"
        android:text  =  "Stop Wave Line Animation"
        android:textSize  =  "16sp"
        android:textColor  =  "#DFFFFFFF"
        android:textAllCaps  =  "true"
        android:textAlignment  =  "center"
        android:layout_marginBottom  =  "8dp"
        android:layout_marginStart  =  "30dp"
        android:layout_marginTop  =  "9dp"
        android:layout_marginEnd  =  "32dp"
        android:layout_alignParentBottom  =  "true"
        android:layout_width  =  "match_parent"
        android:layout_height  =  "wrap_content"
        tools:ignore = "HardcodedText" />


    <!-- vertical Linear Layout Containing SeekBars and TextViews -->
    <LinearLayout
        android:orientation = "vertical"
        android:layout_alignParentTop = "true"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content">

        <!-- Text view for  speed -->
         <TextView
       android:paddingBottom = "2dp"
       android:paddingEnd = "2dp"
       android:paddingStart = "5dp"
       android:paddingTop = "2dp"
       android:layout_marginBottom = "0dp"
       android:layout_marginTop = "2dp"
       android:layout_marginEnd = "16dp"
       android:layout_marginStart = "11dp"
       android:text = "Change Speed"
       android:layout_width = "match_parent"
       android:layout_height = "wrap_content"
       tools:ignore = "HardcodedText" />

        <!-- Speed Seek bar -->
        <SeekBar
        android:id = "@+id/seekBarSpeed"
        android:layout_marginBottom = "3dp"
        android:layout_marginStart = "12dp"
        android:layout_marginEnd = "4dp"
        android:paddingBottom = "2dp"
        android:paddingEnd = "2dp"
        android:paddingStart = "4dp"
        android:paddingTop = "4dp"
        android:layout_marginTop = "8dp"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"/>

        <!-- Text view for Volume -->
        <TextView
            android:paddingBottom = "2dp"
            android:paddingEnd = "2dp"
            android:paddingStart = "5dp"
            android:paddingTop = "2dp"
            android:layout_marginBottom = "0dp"
            android:layout_marginTop = "2dp"
            android:layout_marginEnd = "16dp"
            android:layout_marginStart = "11dp"
            android:text = "Change Volume"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            tools:ignore = "HardcodedText" />

        <!-- Volume Seek bar -->
        <SeekBar
            android:id = "@+id/seekBarVolume"
            android:layout_marginBottom = "3dp"
            android:layout_marginStart = "12dp"
            android:layout_marginEnd = "4dp"
            android:paddingBottom = "2dp"
            android:paddingEnd = "2dp"
            android:paddingStart = "4dp"
            android:paddingTop = "4dp"
            android:layout_marginTop = "8dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>

        <!-- Text view for Sensibility -->
        <TextView
            android:paddingBottom = "2dp"
            android:paddingEnd = "2dp"
            android:paddingStart = "5dp"
            android:paddingTop = "2dp"
            android:layout_marginBottom = "0dp"
            android:layout_marginTop = "2dp"
            android:layout_marginEnd = "16dp"
            android:layout_marginStart = "11dp"
            android:text = "Change Sensibility"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            tools:ignore = "HardcodedText" />

        <!-- Sensibility Seek bar -->
        <SeekBar
            android:id = "@+id/seekBarSensibility"
            android:layout_marginBottom = "3dp"
            android:layout_marginStart = "12dp"
            android:layout_marginEnd = "4dp"
            android:paddingBottom = "2dp"
            android:paddingEnd = "2dp"
            android:paddingStart = "4dp"
            android:paddingTop = "4dp"
            android:layout_marginTop = "8dp"
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>

    </LinearLayout>



</RelativeLayout>

Step 4: MainActivity.java file

Now, open the MainActivity.java file and import some basic classes as shown below:

import android.view.View;
import android.widget.Button;
import android.widget.SeekBar;
//wave line view library 
import jaygoo.widget.wlv.WaveLineView;

Next, we create the objects of WaveLineView, Button, and SeekBar inside MainActivity class as shown below.

//creating object of WaveLineView and start, stop Button
private WaveLineView waveLineView;
private Button startBtn, stopBtn;


//creating objects of 3 different seekBars
private SeekBar seekBarSpeed,seekBarVolume,seekBarSensibility;

Now, inside the onCreate method, we initialize the WaveLineView, Button, and SeekBars as shown below.

//initializing the object
waveLineView = (WaveLineView)findViewById(R.id.waveLineView);
startBtn=(Button)findViewById(R.id.buttonStart);
stopBtn=(Button)findViewById(R.id.buttonStop);

seekBarSpeed=(SeekBar)findViewById(R.id.seekBarSpeed);
seekBarVolume=(SeekBar)findViewById(R.id.seekBarVolume);
seekBarSensibility=(SeekBar)findViewById(R.id.seekBarSensibility);

Now, we create OnClickListener for startBtn and stopBtn and inside @Override public void onClick(View v) start and stop the wave line view animation as shown below.

//start button OnClickListener
        startBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //start the wave animation
                waveLineView.startAnim();
            }
        });


        //stop button OnClickListener
        stopBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //stop the wave animation
                waveLineView.stopAnim();
            }
        });

Now, we create OnSeekBarChangeListener for all the 3 seekbar ( seekBarSpeed, seekBarVolume, seekBarSensibility ) and change the waveLineView values as shown below.

 //adding OnSeekBarChangeListener to seekBarSpeed
        seekBarSpeed.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                //changing the move speed with the progress value of the seekBarSpeed
                waveLineView.setMoveSpeed(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });


        //adding OnSeekBarChangeListener to seekBarVolume
        seekBarVolume.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                //changing the volume  with the progress value of the seekBarVolume
                waveLineView.setVolume(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

        //adding OnSeekBarChangeListener to seekBarSensibility
        seekBarSensibility.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                //changing the Sensibility  with the progress value of the seekBarSensibility
                waveLineView.setSensibility(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

The complete code of the MainActivity.java is shown below:

package com.studytonight.project;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.SeekBar;
import jaygoo.widget.wlv.WaveLineView;

public class MainActivity extends AppCompatActivity {

    //creating object of WaveLineView and start, stop Button
    private WaveLineView waveLineView;
    private Button startBtn, stopBtn;

    //creating objects of 3 different seekBars
    private SeekBar seekBarSpeed,seekBarVolume,seekBarSensibility;

    @Override
    protected void onCreate( Bundle savedInstanceState ) {
        super.onCreate( savedInstanceState );
        setContentView( R.layout.activity_main );

        //initializing the object
        waveLineView = (WaveLineView)findViewById(R.id.waveLineView);
        startBtn=(Button)findViewById(R.id.buttonStart);
        stopBtn=(Button)findViewById(R.id.buttonStop);

        seekBarSpeed=(SeekBar)findViewById(R.id.seekBarSpeed);
        seekBarVolume=(SeekBar)findViewById(R.id.seekBarVolume);
        seekBarSensibility=(SeekBar)findViewById(R.id.seekBarSensibility);

        //start button OnClickListener
        startBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //start the wave animation
                waveLineView.startAnim();
            }
        });

        //stop button OnClickListener
        stopBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //stop the wave animation
                waveLineView.stopAnim();
            }
        });

        //adding OnSeekBarChangeListener to seekBarSpeed
        seekBarSpeed.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                //changing the move speed with the progress value of the seekBarSpeed
                waveLineView.setMoveSpeed(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

        //adding OnSeekBarChangeListener to seekBarVolume
        seekBarVolume.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                //changing the volume  with the progress value of the seekBarVolume
                waveLineView.setVolume(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

        //adding OnSeekBarChangeListener to seekBarSensibility
        seekBarSensibility.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                //changing the Sensibility  with the progress value of the seekBarSensibility
                waveLineView.setSensibility(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}

Now our app is ready, below is the output of the app

Output:

In the below snapshots, you can see how WaveLineView will look in the android application.

When we click on the start and stop button.

When we move the Volume SeekBar.

When we move the Sensibility SeekBar.

When we move the Speed SeekBar.

Conclusion:

In just 4 simple steps we have integrated and shown you the basic example for creating a beautiful wave line animation using WaveLineView in your android app. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.

You may also like:

• How to Create Circle Image View using CardView in Android App

• 5 Best and Most Useful Tools for Young Android Developers

• How to add a ScrollView in Android App

• Alert Dialog Using SweetAlert Dialog in Android App