How to implement View Shaker in Android

View Shaker is an animation in which, the UI of screen vibrates for a limited period of time. This can be implemented on the whole layout or some particular widget. It is a very common effect that developers use, especially to show incorrect credentials.

View Shaker helps us to animate the widgets. Various effects can be added to it.
Effects

1. Attention

Flash, Pulse, RubberBand, Shake, Swing, Wobble, Bounce, Tada, StandUp, Wave

In this article we will see an example of adding such a effect in an app.

In this example, a user wants to log into Lazyroar portal. The user enters the wrong password and then clicks on the login button. Then we can animate our view making the app more responsive, using View Shaker.
Approach

1. Add the support Library in build.gradle file and add dependency in the dependencies section. This library has various animations effect described above. It helps in making our application more responsive and dynamic.

   
   

   
   
   

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

2. Now add the following code in the activity_main.xml file. This code add one textview, two edittexts and a button on activity_main.

   activity_main.xml

   
   

   
   
   

   <?xml version="1.0" encoding="utf-8"?> <LinearLayout     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"     android:orientation="vertical">        <TextView         android:textStyle="bold"         android:textSize="24sp"         android:textColor="#219806"         android:layout_margin="15dp"         android:layout_gravity="center"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="GeeksForGeeks"         />     <EditText         android:id="@+id/editText1"         android:layout_margin="15dp"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:hint="Enter ID"         />     <EditText         android:id="@+id/editText2"         android:layout_margin="15dp"         android:inputType="textPassword"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:hint="Enter Password"         />     <Button         android:id="@+id/button"         android:layout_margin="25dp"         android:layout_gravity="center"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Log In"/> </LinearLayout>

3. Now add the following code in the MainActivity.java file. onClickListener is added to Log In button which adds the Shake effect on both the edittext.The different functions like duration sets the duration, repeat set the number of times the effect should be repeated and playOn sets the effect on a particular widget.

   MainActivity.java

   
   

   
   
   

   package org.neveropen.gfgviewshaker;    import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import com.daimajia.androidanimations     .library     .Techniques; import com.daimajia.androidanimations     .library     .YoYo;    public class MainActivity     extends AppCompatActivity {        Button login;     EditText id, password;     @Override     protected void onCreate(         Bundle savedInstanceState)     {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);            login = findViewById(R.id.button);         id = findViewById(R.id.editText1);         password = findViewById(R.id.editText2);            login.setOnClickListener(             new View.OnClickListener() {                    @Override                 public void onClick(View v)                 {                     YoYo.with(Techniques.Shake)                         .duration(500)                         .repeat(2)                         .playOn(id);                        YoYo.with(Techniques.Shake)                         .duration(500)                         .repeat(2)                         .playOn(password);                 }             });     } }

Output: