Kick Out the Wrong Password Android Animation

Posted by on
Hello friends now a day many of android applications are making and the successful measure of popular application is their UI, Clean up and animation effect too. In my previous article  i show you how to use beautiful form submit animation. Just look at that tutorial.

In this tutorial you are gonna see kick out the wrong password animation for Android application. Most of android application need authentication and find wrong password if any intruder want to access.

For fast android development : How to Use JRebel for Android

We use that form but not in traditional way just look at below demo and tell me about it.


Cool isn't it...
If you think it is cool and want to implement this then dive in the code now.

What we do in our animation ?

Firstly it showing normal form with CircularImageView and single EditText.
When you entered wrong password and click on submit button then it lock image move and kick the wrong password and remain blank the password and fadeout a red message "Wrong password" and after some time it gone and EditText is blank again.

Play and edit with Full source code : HungerMoji - Android Notification Game 

In layout here we create password layout(layout_password.xml) separately from normal form for avoid confusion and then include that layout in our main layout(activity_main.xml).

layout_password.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:background="@drawable/bg_edit_text"
    android:orientation="horizontal">
 
 
    <ImageView
        android:id="@+id/ivLock"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:padding="10dp"
        android:src="@drawable/ic_locked_padlock" />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/etPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_edit_text"
            android:inputType="textPassword"
            android:paddingBottom="5dp"
            android:paddingLeft="10dp"
            android:paddingTop="5dp"
            android:text="Hello"
            android:textSize="30sp" />

       <LinearLayout
            android:id="@+id/llParent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:gravity="center"
            android:orientation="horizontal"
            android:paddingBottom="5dp"
            android:paddingLeft="10dp"
            android:paddingTop="5dp">

            <ImageView
                android:id="@+id/ivDummy"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_dot"
                android:visibility="gone" />

            <EditText
                android:id="@+id/etDummy"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:focusable="true"
                android:focusableInTouchMode="true"></EditText>
        </LinearLayout>
    </FrameLayout>
</LinearLayout>

What we done above in layout ?


  • Line 10-15 : It is a padlock ImageView which will move and take a role to kick out the wrong password from EditText.
  • Line 33-57 : This linear layout will holds all dots generated during animation. Padding, margin of this linear layout must be in match with Edit text.
  • Line 44-49 : This is just to simulate position of dots. Visibility of this image view must be in GONE state.
  • Line 51-56 : This is used to remove focus of password edittext.

Now we implement animation in our layout from activity.
Main_Activity.java
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnticipateInterpolator;
import android.view.animation.CycleInterpolator;
import android.view.animation.RotateAnimation;
import android.view.animation.TranslateAnimation;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;



public class MainActivity extends AppCompatActivity {

    EditText etPassword, etDummy;
    Button btnLogin;
    private LinearLayout llParent;
    private ImageView ivLock;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        etPassword = (EditText) findViewById(R.id.etPassword);
        etDummy = (EditText) findViewById(R.id.etDummy);
        ivLock = (ImageView) findViewById(R.id.ivLock);
        llParent = (LinearLayout) findViewById(R.id.llParent);
        btnLogin = (Button) findViewById(R.id.btnLogin);

        btnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //  Hide cursor/focus from edit text after click
                removeFocus();

                String password = etPassword.getText().toString();
                etPassword.setText("");

                validatePassword(password);
            }
        });
    }

    private void validatePassword(String password) {
        //  TODO Perform password validation here and if failed then proceed with below

        int passLength = password.length();
        playHangingAnimation(ivLock);

        //  Generate number of dots (imageview) similar to length of input password
        for (int i = 0; i < passLength; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(R.drawable.ic_dot);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            params.setMargins(3, 0, 3, 0);
            imageView.setLayoutParams(params);
            llParent.addView(imageView);

            //  Play animation for each and every dots separately
            playKickOutAnimation(imageView, i);
        }
    }

    private void playKickOutAnimation(final View view, int i) {
        //  Parameters are startPositionX,endPositionX, startPositionY, endPositionY
        //  Intentionally changed position of X at runtime based on i(index of dot) to give elastic effect
        //  Play around these numbers and let community know if any combination is giving better result :)
        Animation animation = new TranslateAnimation(-20 + i * 5, 400, 0, 0);

        //  Intentionally changed duration at runtime based on i(index of dot) to give elastic effect
        animation.setDuration(700 + i * 20);

        //  To give kick out effect. Read about all Inter polator here - http://cogitolearning.co.uk/?p=1078
        animation.setInterpolator(new AnticipateInterpolator());

        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //  Remove dots from screen once animation has been stopped
                llParent.removeView(view);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        view.startAnimation(animation);
    }

    private void playHangingAnimation(View v) {
        int pivot = Animation.RELATIVE_TO_SELF;
        //  Parameter defines how many times the cycle should happen
        CycleInterpolator interpolator = new CycleInterpolator(2.5f);
        //  Parameters are fromDegree,toDegree,positionXType(from self in this case),positionX,positionYType,positionY
        //  Play around these values to get to know the behaviour more closely
        RotateAnimation animation = new RotateAnimation(0, 20, pivot, 0.47f, pivot, 0.05f);
        animation.setStartOffset(100);
        animation.setDuration(900);
        animation.setRepeatCount(0);// Animation.INFINITE
        animation.setInterpolator(interpolator);
        v.startAnimation(animation);
    }

    private void removeFocus() {
        etPassword.clearFocus();
        etDummy.requestFocus();
        InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
        imm.hideSoftInputFromWindow(etDummy.getApplicationWindowToken(), 0);
    }
}

What we do in activity above ?


  • Firstly we got value of EditText and call validatePassword(password) function in onCreate from line 36-48 and definition of that is start from line 50-69 in which we perform password validation here and if failed then proceed with below and call playHangingAnimation(ivLock) whose play a role to animate padlock from line 103-115.
  • Generate number of dots (imageview) similar to length of input password  and then play animation for each and every dots separately by calling playKickOutAnimation(imageView, i) from line 71-101.
  • And finally we removeFocus from Edit text from line 117-122.

Download Source code

Hope you like this tutorial please comment below and like my Facebook page.



Comments

Post a Comment