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
| Attributes |
Format |
Description |
| backgroundColor |
color |
Use to set the Background color |
| wlvLineColor |
color |
Use to set the Line Color |
| wlvThickLineWidth |
dimension |
Use to set the width of the thick wavy curve in the middle |
| wlvFineLineWidth |
dimension |
Use to set the width of the three thin wavy curves |
| wlvMoveSpeed |
float |
Use to set the speed of the wave movement, the default value is 290F, the direction is from left to right, you can use a negative number to change the direction of movement |
| wlvSamplingSize |
integer |
Use to set the Sampling rate, the larger the animation effect, the more detailed it is, the default is 64 |
| wlvSensibility |
integer |
Use to set the Sensitivity, range [1,10], the larger the more sensitive, the default value is 5 |
So, let's implement a simple WaveLineView in our android app.
Step 1: Create a new Project
-
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)
-
Choose "Empty Activity" from the project template window and click Next
-
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))
-
Next click on the Finish button after filling in the above details
-
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:
