Signup/Sign In

Jay-Goo WaveLineView in Android App

Posted in Programming   LAST UPDATED: OCTOBER 20, 2021

    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

    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.

    WaveLineView

    When we move the Volume SeekBar.

    WaveLineView

    When we move the Sensibility SeekBar.

    WaveLineView

    When we move the Speed SeekBar.

    WaveLineView

    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:

    Published by: onlyklohan
    Tags:AndroidAndroid StudioWaveLineView
    IF YOU LIKE IT, THEN SHARE IT
     

    RELATED POSTS