Android View Shaker in Kotlin

View Shaker is an android animation in which the UI of the screen vibrates for a specific interval of time. We can implement this View shaker to the specific views of the application. View Shaker provides different animation effects which we can add to our views such as bounce, fade, float, and others. In this article, we will take a look at implementing this view shaker within our Android application using Kotlin. A sample video is given below to get an idea about what we are going to do in this article.

Note: To implement View Shaker in Android application in Java. Check out the following article: View Shaker in Android using Java 

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Adding dependency in build.gradle

Navigate to Gradle Scripts > build.gradle and add the below dependency in the dependencies section. 

implementation 'com.daimajia.easing:library:2.0@aar'
implementation 'com.daimajia.androidanimations:library:2.3@aar'

After adding this dependency simply sync your project to install it. 

Step 3: Adding images to the drawable folder 

Copy your image. Navigate to app > res > drawable folder and paste your image into the drawable folder. 

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--on below line we are creating a text view-->
    <TextView
        android:id="@+id/idTVData"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:gravity="center"
        android:padding="6dp"
        android:text="Geeks for Geeks"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />

    <!--on below line we are creating our image view-->
    <ImageView
        android:id="@+id/idIVimage"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_below="@id/idTVData"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:src="@drawable/android" />

    <!--on below line we are creating one more text view-->
    <TextView
        android:id="@+id/idTVAndroid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idIVimage"
        android:layout_marginTop="30dp"
        android:gravity="center"
        android:padding="8dp"
        android:text="Android development"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />

</RelativeLayout>

Step 5: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.gtappdevelopers.kotlingfgproject

import android.os.Bundle
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.daimajia.androidanimations.library.Techniques
import com.daimajia.androidanimations.library.YoYo

class MainActivity : AppCompatActivity() {

    // on below line we are creating
    // variables for text view and image view
    lateinit var androidTV: TextView
    lateinit var dataTV: TextView
    lateinit var androidIV: ImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // initializing variables of list view with their ids.
        androidIV = findViewById(R.id.idIVimage)
        androidTV = findViewById(R.id.idTVAndroid)
        dataTV = findViewById(R.id.idTVData)

        // on below line we are adding on
        // click listener for our image view.
        androidIV.setOnClickListener {

            // on the below line we are adding a shake
            // animation for our image view.
            YoYo.with(Techniques.Shake)
                // on below line we are setting
                // duration for our animation.
                .duration(500)

                // on below line we are setting repeat
                // duration for our animation
                .repeat(2)

                // on below line we are specifying view
                // on which we have to add this animation
                .playOn(androidIV)

            // on below line we are adding shake
            // animation for our image view.
            YoYo.with(Techniques.Shake)
                // on below line we are setting
                // duration for our animation.
                .duration(500)

                // on below line we are setting
                // repeat duration for our animation
                .repeat(2)

                // on below line we are specifying view
                // on which we have to add this animation
                .playOn(androidTV)

            // on below line we are adding shake
            // animation for our image view.
            YoYo.with(Techniques.Shake)

                // on below line we are setting
                // duration for our animation.
                .duration(500)

                // on below line we are setting
                // repeat duration for our animation
                .repeat(2)

                 // on below line we are specifying view
                 // on which we have to add this animation
                .playOn(dataTV)
        }

    }
}

Now run your application to see the output of it. 

Output: