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. Attension
      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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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);
                    }
                });
        }
    }

    chevron_right

    
    

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.