How to implement View Shaker in Android
Last Updated :
14 Nov, 2022
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
- Attention
Flash, Pulse, RubberBand, Shake, Swing, Wobble, Bounce, Tada, StandUp, Wave
- Special
Hinge, RollIn, RollOut, Landing, TakingOff, DropOut
- Bounce
BounceIn, BounceInDown, BounceInLeft, BounceInRight, BounceInUp
- Fade
FadeIn, FadeInUp, FadeInDown, FadeInLeft, FadeInRight
FadeOut, FadeOutDown, FadeOutLeft, FadeOutRight, FadeOutUp
- Flip
FlipInX, FlipOutX, FlipOutY
- Rotate
RotateIn, RotateInDownLeft, RotateInDownRight, RotateInUpLeft, RotateInUpRight
RotateOut, RotateOutDownLeft, RotateOutDownRight, RotateOutUpLeft, RotateOutUpRight
- Slide
SlideInLeft, SlideInRight, SlideInUp, SlideInDown
SlideOutLeft, SlideOutRight, SlideOutUp, SlideOutDown
- 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
-
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.
XML
dependencies {
implementation 'com.daimajia.easing:library:2.0@aar'
implementation 'com.daimajia.androidanimations:library:2.3@aar'
}
- 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>
- 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:
Similar Reads
How to Implement TextSwitcher in Android? In Android, TextSwitcher is a useful tool for displaying text with animations. It can be seen as a special version of ViewSwitcher, where its children are only TextView elements. TextSwitcher allows us to add smooth transitions to text, making it part of the transition widget family. Whenever you ca
3 min read
How to Implement TNImage Library in Android? Android is an open-source operating system, based on the Linux kernel and used in mobile devices like smartphones, tablets, etc. Further, it was developed for smartwatches and Android TV. Each of them has a specialized interface. Android has been one of the best-selling OS for smartphones. Android O
3 min read
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 othe
4 min read
How to Implement Shapeable ImageView in Android? In Android, ShapeableImageView is used to change the shape of your image to circle, diamond, etc. Also, you can set a corner radius to your ImageView. You can do much more by using this ShapeableImageView with minimal code. So in this article, we are going to make a ShapableImageView in android. By
5 min read
How to add KenBurns View in Android? In this article, we will learn about how to add KenBurns View in android using java. KenBurns View is a useful library that is an extension of ImageView. It creates an immersive experience by animating its Drawable. We can use RandomTransitionGenerator to change the duration and acts as a interpolat
2 min read