Detecting number of digits of user input in android edit text

Question

I'm working on a project and I need to lock my own app with a PIN code.

I want to use four circles as background of my edittext and fill each circle when user enters a digit. Just like iOS lock screen.

How can I fill these circles when there's an input?

Answer 1

Here's a quick example I put together for you to get started.

You should firstly define what your ellipse's for the pass-code will look like, I've defined mine inside two files inside my drawable folder:

elipse.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <gradient android:startColor="#8BE807" android:endColor="#68B002" android:angle="270" />
</shape>

ellipse_checked.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <gradient android:startColor="#C7C7C7" android:endColor="#8A8A8A" android:angle="270"/>
</shape>

Next I have added four ellipses (View's) and an ExitText to my view like so:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/ellipse"
        android:id="@+id/elipse1"
        android:layout_margin="10dip" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/ellipse"
        android:id="@+id/elipse2"
        android:layout_margin="10dip" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/ellipse"
        android:id="@+id/elipse3"
        android:layout_margin="10dip" />

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/ellipse"
        android:id="@+id/elipse4"
        android:layout_margin="10dip" />

</LinearLayout>

<EditText
    android:layout_width="100dip"
    android:layout_height="wrap_content"
    android:inputType="textPassword"
    android:ems="10"
    android:id="@+id/txtPass"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dip"
    android:textAlignment="center"
    android:maxLength="4"
    android:gravity="center" />

</LinearLayout>

Then inside my MainActivity I have:

int passlen = 0;
Drawable mDrawableElipseChecked;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Used to change our pass-code ellipses style
    mDrawableElipseChecked = this.getResources().getDrawable(R.drawable.ellipse_checked);

    // Ellipses
    final View elipse1 = findViewById(R.id.elipse1);
    final View elipse2 = findViewById(R.id.elipse2);
    final View elipse3 = findViewById(R.id.elipse3);
    final View elipse4 = findViewById(R.id.elipse4);

    // Listen for text changes to our pass-code EditText
    final EditText txtPass = (EditText) findViewById(R.id.txtPass);
    txtPass.setOnKeyListener(new View.OnKeyListener() {
        @Override
        public boolean onKey(View view, int i, KeyEvent keyEvent) {

            if (keyEvent.getAction() == KeyEvent.ACTION_UP) {

                // Crude example of how to "check" / "un-check" our 
                // ellipses NOTE: You should write a better implementation 
                // for handling deletes etc
                passlen = txtPass.getText().length();
                if (passlen == 1) {
                    elipse1.setBackground(mDrawableElipseChecked);
                } else if (passlen == 2)
                    elipse2.setBackground(mDrawableElipseChecked);
                else if (passlen == 3)
                    elipse3.setBackground(mDrawableElipseChecked);
                else if (passlen == 4)
                    elipse4.setBackground(mDrawableElipseChecked);
                else {
                    return true;
                }
            }
            return false;
        }
    });

}

You should now have a very simple example of how to implement pass-code like functionality to an app.

Note: This is a simple demo of how to get started implementing a pass-code like screen, you should adapt and improve this to suit your needs.