Skip to content
Related Articles

Related Articles

Improve Article
Wave Animation in Android
  • Last Updated : 23 Feb, 2021

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.

Wave Animation in Android Sample GIF

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:mwhWaveHeightUse to give height to the curves of the Wave.
app:mwhStartColorUse to give starting color of the wave animation.
app:mwhCloseColorUse to give closing color of the wave animation.
 app:mwhGradientAngleUse for giving angles to the curves.
app:mwhRunningUse for giving Animation.
app:mwhVelocityUse for displaying Velocity.
 app:mwhProgressUse for displaying the progress.
app:mwhWavesUse 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: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:

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :