How to implement a PIN code screen

Question

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>

Have you some code to show? Adding a click listener to the buttons and knowing how many values have been entered should be straightforward — OneCricketeer, May 26 '16 at 06:54
You could have the circles with a blank drawables as background and then as the user types you load the black circles as drawables. You should first make an attempt and if you encounter problems, you can post questions regarding your specific problem. — ishmaelMakitla, May 26 '16 at 06:57

Amit Vaghela · Answer 1 · 2016-05-26T10:12:50.067

15

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"/>

edited May 26 '16 at 10:12

answered May 26 '16 at 07:03

Amit Vaghela

22,772
22
86
142

how can change the text of title. Please suggest me – SAndroidD Sep 06 '17 at 11:19
1

if 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 – Amit Vaghela Sep 06 '17 at 11:45
Thanks buddy it helps me lot – SAndroidD Sep 06 '17 at 12:43
and one more thing how to change the pin keyboard text color – SAndroidD Sep 06 '17 at 12:44
is KeyTextColor of KeyboardView? But it is not working – SAndroidD Sep 07 '17 at 06:13
In 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 – SAndroidD Sep 07 '17 at 06:25
1

This library is no longer being maintained and there is a crash in it when the device lacks a fingerprint scanner. – Kevin Feb 19 '19 at 13:27

Ishaan Kumar · Answer 2 · 2020-10-27T09:04:12.250

4

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 :)

edited Oct 27 '20 at 09:04

answered Jun 11 '17 at 22:21

Ishaan Kumar

968
1
11
24

score 4 · Answer 3 · answered Nov 14 '18 at 20:00

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);
                }
            }

You can make the code more simple and modular, use this tutorial I wrote: https://medium.com/@Lev_Sharone/create-your-own-customized-pin-code-layout-in-3-simple-steps-e36d560689f8 — Sharone Lev, Nov 20 '19 at 15:20

score 1 · Answer 4 · answered May 07 '21 at 12:35

1

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.

answered May 07 '21 at 12:35

Monu

877
1
9
27

score 0 · Answer 5 · answered Jan 04 '23 at 14:43

Add implementation 'com.alimuzaffar.lib:pinentryedittext:1.3.10' to your dependencies inside build.gradle file and keep below code in your login layout.

<com.alimuzaffar.lib.pin.PinEntryEditText
    android:id="+id/pass" 
    android:layout_width="250dp"    
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:maxLength="6"
    android:inputType="numberPassword" />

#xml #android

How to implement a PIN code screen

5 Answers5