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.
Hope you like this tutorial please comment below and like my
Facebook page.
Comments
Post a Comment