Password Validation Animation -Android

Ever got annoyed by the ‘high standards’ of the password you are bound to set these days? Here is a concept of a small delighter.

Inspired by this article on flutter, I decided to create this in Android as it would be a fun as well a challenging task.

This design and concept is taken originally from Dribbble:

Password Guide

Entire source code is available on my github here.

In this article I will show you step by step how we can create this design and animation, so lets get started.

I will break the article into 3 parts

1. Creating the Design
2. Performing the validation
3. Creating the animations

Creating the User Interface:

The parent layout is a vertical LinearLayout which contains 3 children FrameLayout, EditText (to enter the password), Button (save button).

The important part here is the FrameLayout . In android we use a FrameLayout to stack child views on top of each other, with the most recent child on top of the stack.

So in the following layout we have a Circle at the bottom, followed by the lock icon and then we have 2 CardViews titled slightly at an angle. The top most CardView consists of 4 TextViews for each of the validation. The code for which is as follows:

Note that instead of TextView I have used a CustomTextView for animation purposes, we will see this in the animation part later.So this is all about the user interface, lets look at the validation part now.

Password Validation

Validation is pretty simple part as it is done using regex(regular expressions) in java and is as follows:

The 3 regular expressions used are :

String specialCharRegex= ".*[@#!$%^&+=].*";
String UpperCaseRegex= ".*[A-Z].*";
String NumberRegex= ".*[0-9].*";

We will then match this regex with the password string to see if the required regex is present in the password.

if(password.matches(specialCharRegex)){
  //special char present
}

And now the fun part, the animations.

Animations

There are 3 animations :

1. StrikeThroughText Animation

For this animation I used this library here and hence as mentioned earlier I used a CustomTextView provided by the library instead of TextView.The library is very easy to setup and we can do the animation by using just few lines of code.

StrikeThroughPainting strikeThroughPainting = new StrikeThroughPainting(CustomTextView);
// Basic Usage
strikeThroughPainting.strikeThrough();
// All Options
strikeThroughPainting
        .cutTextEdge(cutEdge)
        .color(strokeColor)
        .strokeWidth(strokeWidth)
        .mode(StrikeThroughPainting.MODE_DEFAULT)
        .linePosition(0.7F)
        .firstLinePosition(0.6F)
        .totalTime(10_000L)
        .callback(new StrikeThroughPainting.StrikeThroughPaintingCallback() {
            @Override
            public void onStrikeThroughEnd() {
                Snackbar.make(findViewById(R.id.container),
                        "Callback after animation", Snackbar.LENGTH_LONG).show();
            }
        })
        // do the draw!
        .strikeThrough();
// Clear Strike Through
strikeThroughPainting.clearStrikeThrough();

2. Translation from left to right

As you can see in the animation when a validation is satisfied, along with the StrikeThrough Animation the text moves slightly from left to right and then again backs to its original position.This is done as:

TranslateAnimation animation = new TranslateAnimation(0.0f, 75.0f,
        0.0f, 0.0f);
animation.setDuration(200);  // animation duration
animation.setRepeatCount(1);  // animation repeat count
animation.setRepeatMode(2);
validation1TextView.startAnimation(animation);      //animate from left to right and back

3. AllDone Image Popup (When all conditions are satisfied)

We will first define the scale_up and scale_down animations in XML in the res->anim directory.

Initially the Image will be hidden and when all the conditions are satisfied we will animate the image using above animations as:

Animation imageScaleUp = AnimationUtils.loadAnimation(this, R.anim.scale_up);
allDoneImageView.startAnimation(imageScaleUp);
allDoneImageView.setVisibility(View.VISIBLE);

and then to hide the image:

Animation imageScaleDown = AnimationUtils.loadAnimation(this, R.anim.scale_down);
allDoneImageView.startAnimation(imageScaleDown);
allDoneImageView.setVisibility(View.VISIBLE);

And this is it, we are done.

Thankyou for reading. This is my first attempt to write something, my first article as well and I wish to write more. If you liked it please leave a few claps.

You can reach me out at my other profiles:

LinkedIn

Github

Twitter