Introduction

In this article, we are going to create a Wave View in Android using Android Studio. It is a type of library which makes a wave in the UI. By using this, we can show the progress status in percentage. This view is widely used in mobile apps.
Step 1
Create a new project in Android Studio.
Android
Give a name to the project and click "Next".
Android
Select the "Phone and Tablet" option and click "Next".
Android
Select an empty activity and click "Next".
Android
At last, give the activity a name and click on "Finish".
Android
Step 2
Locate the Gradle Scripts>>Build. Gradle 1.
Android
And, type the following dependency in your app's build.gradle.
Android
Then, Click the sync button in the top right corner and repeat this for step 3.
Android
Code copy is here,
  1. maven{
  2. url 'https://jitpack.io'
  3. }
Step 3
Locate the Gradle Scripts>>Build. Gradle 2.
Android
Type the following dependency in your app's build.gradle.
Android
The code copy is here.
  1. compile 'com.github.john990:WaveView:v0.9'
Step 4
Next, go to app >> res >> layout >> activity_main.xml. Select activity page.
Android
Just type the code as following.
Android
The code copy is here.
  1. <SeekBar
  2. android:id="@+id/seekBar"
  3. android:max="100"
  4. android:layout_alignParentBottom="true"
  5. android:layout_width="match_parent"
  6. android:layout_height="wrap_content" />
  8. <com.john.waveview.Wave
  9. android:id="@+id/waveView"
  10. android:layout_above="@id/seekBar"
  11. android:background="#FF702E8C"
  12. android:layout_width="match_parent"
  13. android:layout_height="match_parent"
  14. app:above_wave_color="@android:color/white"
  15. app:blow_wave_color="@android:color/white"
  16. app:wave_height="large"
  17. app:wave_length="large"
  18. app:wave_hz="fast"
  19. />
Step 5
Next, go to app >> java>>Mainactivity.java. Select Mainactivity page.
Android
And just type the code as follows
Android
  1. import com.john.waveview.WaveView;
  3. public class MainActivity extends AppCompatActivity {
  5. @Override
  6. protected void onCreate(Bundle savedInstanceState) {
  7. super.onCreate(savedInstanceState);
  8. setContentView(R.layout.activity_main);
  10. final WaveView waveView =(WaveView)findViewById(R.id.waveView);
  11. SeekBar seekBar =(SeekBar)findViewById(R.id.seekBar);
  12. waveView.setProgress(seekBar.getProgress());
  13. seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
  14. @Override
  15. public void onProgressChanged(SeekBar seekBar, int progress, boolean b) {
  16. waveView.setProgress(progress);
  17. }
  19. @Override
  20. public void onStartTrackingTouch(SeekBar seekBar) {
  22. }
  24. @Override
  25. public void onStopTrackingTouch(SeekBar seekBar) {
  27. }
  28. });
Step 6
Verify the preview.
After the code is applied, the preview will appear like this.
Android
Step 7
Next, go to Android Studio and deploy the application. Select an Emulator or your mobile with USB debugging enabled. Give it a few seconds to make installations and set permissions.
Android
Run the application in your desired emulator (Shift + F10).
Android
Explanation of source code
The source code used in the activitymain.xml file will insert the Wave View into the app and render the animation with attributes given.

Summary

We have just created the app to see how the Wave View works and learned where to use it.
*Support and Share, Thank you*