Android EditText Shake Animation Programmatically Animated edit text

Android Edittext Shake Animation tutorial with example is written here.

To make animated edit text Programmatically, we need to use Animation class.

Generally, we use the shake effect on EditText to get user’s attention on several occasions.

We require user attention when he enter’s any false information.

There are many ways to tell user about wrong inputs in the EditText.

Such methods are showing toast, showing snack bar, setError method etc. are there.

To make this process more attractive, we can shake edittext which produces animation effects.

For example, we can shake edittext vertically, horizontally or in some other direction.

In this tutorial, you will learn to use above shake and animation methods.

We can do this from XML code as well as Programmatically from JAVA class.

Ending View

Step 1. Drawable File

Create a new XML file under res->drawable directory.

Give it a name edittext.xml and add the following source code in it.

  • This file enable us to give border size and border color to EditText.
  • We can also provide corner radius to edittext using above code.
  • Gradient effect makes edittext more attractive that can be set in the above file.

Step 2. Anim folder files

Make a new folder in res directory and name it as “anim” 

In the “anim” folder, make a new XML resource file named shake.xml

See the below image for directory structure

Android EditText Shake Animation

anim Directory

Write the below code block in shake.xml

  • First line is for duration between every two cycle of shake movement.
  • Higher the value of first line, system will take more time between two cycle. It means that animation will take more time to complete.
  • Second line is fromXDelta and last line is toXDelta.
  • fromXDelta  is directing the point from where edittext will start to move towards the right side.
  • Movement of edittext is left to right in this case.
  • toXDelta is the point where edittext will stop and will go back to fromXDelta  point (right to left).

So edittext will move left to right (0 to 10) and will come back from 10 to 0 (right to left).

  • Third line is indicating another file named shake_cycler.xml
  • So make a new file in the anim folder and give it a name shake_cycle.xml

Copy the following source code in shake_cycle.xml

  • It is just defining the number of cycles for the animations.
  • You can directly increase or decrease the cycles from this file.

Step 3. Main File Changes

Now we need to update activity_main.xml and MainActivity.java files.

Add the following Code block in activity_main.xml 

  • There are three pairs containing Edittext, Textview and Button.
  • Textview is giving information about the type of animation.
  • Edittext is experiencing the shake animation.

But when the user clicks on button, this animation will take place.

Write Down the below coding lines in MainActivity.java

  • Let us read the above code in deeply.
  • First few lines of onCreate() method is defining the edittexts and buttons.

Now look at the below code

  • When the user clicks the button, compiler will execute the above code.
  • We have used Animation class in this method of shaking.
  • Just pass the shake.xml file from anim folder as I have written in the above code.
  • Now start the animation with object of the Animation class by passing it to startAnimation method..

Consider the following code

  • Above code will generate vertical animation Programmatically.
  • For this, I have used shakeError() method as you can see in the above code.

Code structure for shakeError() method is as the following

  • First line is defining the X and Y points. Both X points are 0 because we do want only vertical animation.
  • Stating Y point is 0 and Ending Y point is 20. So edittext will move from 0 to 20 (up to down) and vise versa.
  • Second line is just setting the duration between two cycle.
  • Third line is defining the number of cycles for shake animations.

Now read the below code block

  • Above code is using shakeCircle() to make animations.

Coding lines for shakeCircle() method is as below

  • It is the same as the  shakeError() error.
  • Just the X and Y points are different.
  • You can play around with the various values of X and Y points to generate many animations.

Download Source Code For Android EditText Shake Animation

[sociallocker]Download Code For ShakeEditTextExample[/sociallocker]

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *