How to implement a PIN code screen
43,263
Solution 1
Use LolliPin
A Material design Android pincode library. Supports Fingerprint.
<com.github.orangegangsters.lollipin.lib.views.PinCodeRoundView
android:id="@+id/pin_code_round_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/pin_code_round_top_margin"
android:layout_marginBottom="@dimen/pin_code_elements_margin"
app:lp_empty_pin_dot="@drawable/pin_empty_dot"
app:lp_full_pin_dot="@drawable/pin_full_dot"/>
Solution 2
Using this code in TextWatcher:
@Override
public void afterTextChanged(Editable s) {
switch (s.length()) {
case 4:
i4.setImageResource(R.drawable.circle2);
break;
case 3:
i4.setImageResource(R.drawable.circle);
i3.setImageResource(R.drawable.circle2);
break;
case 2:
i3.setImageResource(R.drawable.circle);
i2.setImageResource(R.drawable.circle2);
break;
case 1:
i2.setImageResource(R.drawable.circle);
i1.setImageResource(R.drawable.circle2);
break;
default:
i1.setImageResource(R.drawable.circle);
}
}
Solution 3
When i added lollipin in my project i got some erros.
Then i found some more libraries that are awesome too.
Check these out:
Remember these are views so they are a bit more customizable. Happy coding :)
Solution 4
Take a look at this JAVA class. You can also create multiple objects with a single line each if you need many PIN Views. For example on the registration page.
Author by
shrishyl47
Updated on May 08, 2021Comments
-
shrishyl47 about 3 years
How to code such type of password screen design, while after inputting the password the circles should change or imageview should change..??
Login.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:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="20dp" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:background="@color/light_grey" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Enter MPIN" android:textStyle="bold" android:textSize="18dp" android:layout_margin="10dp" android:layout_gravity="center_horizontal" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_gravity="center_horizontal" > <ImageView android:id="@+id/imageview_circle1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="6dp" android:src="@drawable/circle" /> <ImageView android:id="@+id/imageview_circle2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="6dp" android:src="@drawable/circle" /> <ImageView android:id="@+id/imageview_circle3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="6dp" android:src="@drawable/circle" /> <ImageView android:id="@+id/imageview_circle4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="6dp" android:src="@drawable/circle" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:background="@color/light_grey2" > <EditText android:id="@+id/editText_enter_mpin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="number" android:maxLength="4" android:visibility="visible" > </EditText> </LinearLayout> </LinearLayout> </LinearLayout>
LoginActivity.java
public class LoginActivity extends AppCompatActivity { private static final String TAG = "LoginActivity"; EditText enter_mpin; ImageView i1, i2, i3, i4; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login); i1 = (ImageView) findViewById(R.id.imageview_circle1); i2 = (ImageView) findViewById(R.id.imageview_circle2); i3 = (ImageView) findViewById(R.id.imageview_circle3); i4 = (ImageView) findViewById(R.id.imageview_circle4); enter_mpin = (EditText) findViewById(R.id.editText_enter_mpin); enter_mpin.requestFocus(); enter_mpin.setInputType(InputType.TYPE_CLASS_NUMBER); enter_mpin.setFocusableInTouchMode(true); enter_mpin.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { } @Override public void afterTextChanged(Editable s) { Log.d(TAG, "onKey: screen key pressed"); i1.setImageResource(R.drawable.circle2); } }); } }
circle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <stroke android:width="2dp" android:color="#6ab17b" /> <size android:width="25dp" android:height="25dp" /> </shape>
circle2.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#505253"/> <size android:width="25dp" android:height="25dp" /> </shape>
-
SAndroidD over 6 yearshow can change the text of title. Please suggest me
-
Amit Vaghela over 6 yearsif you are using this lib than go in AppLockActivity abstact class in that getStepText() method, now just change text pin_code_step_disable or directly using string.xml change these texts@SAndroidD
-
SAndroidD over 6 yearsThanks buddy it helps me lot
-
SAndroidD over 6 yearsand one more thing how to change the pin keyboard text color
-
SAndroidD over 6 yearsis KeyTextColor of KeyboardView? But it is not working
-
SAndroidD over 6 yearsIn activity_pin_code.xml file there is keyboard . I want to change the keyboard key color. Its default color is gray I want to change into white
-
Kevin about 5 yearsThis library is no longer being maintained and there is a crash in it when the device lacks a fingerprint scanner.
-
Sharone Lev over 4 yearsYou can make the code more simple and modular, use this tutorial I wrote: medium.com/@Lev_Sharone/…