Open In App

How to implement View Shaker in Android

Improve
Improve
Like Article
Like
Save
Share
Report

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
  2. Special
      Hinge, RollIn, RollOut, Landing, TakingOff, DropOut
  3. Bounce
      BounceIn, BounceInDown, BounceInLeft, BounceInRight, BounceInUp
  4. Fade
      FadeIn, FadeInUp, FadeInDown, FadeInLeft, FadeInRight
      FadeOut, FadeOutDown, FadeOutLeft, FadeOutRight, FadeOutUp
  5. Flip
      FlipInX, FlipOutX, FlipOutY
  6. Rotate
      RotateIn, RotateInDownLeft, RotateInDownRight, RotateInUpLeft, RotateInUpRight
      RotateOut, RotateOutDownLeft, RotateOutDownRight, RotateOutUpLeft, RotateOutUpRight
  7. Slide
      SlideInLeft, SlideInRight, SlideInUp, SlideInDown
      SlideOutLeft, SlideOutRight, SlideOutUp, SlideOutDown
  8. Zoom
      ZoomIn, ZoomInDown, ZoomInLeft, ZoomInRight, ZoomInUp
      ZoomOut, ZoomOutDown, ZoomOutLeft, ZoomOutRight, ZoomOutUp

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 GeeksforGeeks 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: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.geeksforgeeks.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:



Last Updated : 14 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads