Wave Animation in Android

Wave Animation is one of the most commonly used features in Android app. You can see this animation in most of the shopping apps, music player apps, and many more. Using this Wave Animation makes the User Experience attractive. In this article, we are going to see how to implement Wave Animation in Android. A sample GIF is given below to get an idea about what we are going to do in this article.

Applications of Wave Animation

• Use for giving decorative animated effect in an Android app.
• Wave Animation is used in most of the apps on the splash screen.
• You can see this Wave animation in most of the Music Applications.

Attributes of Wave Animation

Attributes	Description
app:mwhWaveHeight	Use to give height to the curves of the Wave.
app:mwhStartColor	Use to give starting color of the wave animation.
app:mwhCloseColor	Use to give closing color of the wave animation.
app:mwhGradientAngle	Use for giving angles to the curves.
app:mwhRunning	Use for giving Animation.
app:mwhVelocity	Use for displaying Velocity.
app:mwhProgress	Use for displaying the progress.
app:mwhWaves	Use for displaying multiple waves.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Add dependency of Wave Animation library in build.gradle file

Then Navigate to gradle scripts and then to build.gradle(Module) level. Add below line in build.gradle file in the dependencies section.

implementation ‘com.scwang.wave:MultiWaveHeader:1.0.0’

now click on Sync now it will sync your all files in build.gradle().

Step 3: Create a new Wave Animation in your activity_main.xml file

Navigate to the app > res > layout to open the activity_main.xml file. Below is the code for the activity_main.xml file. 

XML

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

    <!--code for wave animation-->
    <com.scwang.wave.MultiWaveHeader
        android:id="@+id/waveHeader"
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        app:mwhCloseColor="#41E64E"
        app:mwhStartColor="#15AC20"
        app:mwhWaveHeight="60dp" />

    <!--Text displayed on wave-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Hello! Geeks for Geeks"
        android:textColor="@color/white"
        android:textSize="20dp"
        android:textStyle="bold" />

</RelativeLayout>

Now click on the run option it will take some time to build Gradle. After that, you will get output on your device as given below.

Output: