Android EditText with star image for password

Setting password is now a days common thing and in this tutorial I am going to explain you how you can create simple Password Screen without any third party library.

 

Download Code

 

 

Let’s start with creating UI first

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.supportmania.stylishedittext.MainActivity">

    <EditText
        android:id="@+id/pin1EditText"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/edittext_bg_without_star"
        android:cursorVisible="false"
        android:gravity="center"
        android:maxLength="1"
        android:textColor="@android:color/transparent"
        app:layout_constraintEnd_toStartOf="@+id/pin2EditText"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <EditText
        android:id="@+id/pin2EditText"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/edittext_bg_without_star"
        android:cursorVisible="false"
        android:gravity="center"
        android:maxLength="1"
        android:textColor="@android:color/transparent"
        app:layout_constraintEnd_toStartOf="@+id/pin3EditText"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/pin1EditText"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <EditText
        android:id="@+id/pin3EditText"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/edittext_bg_without_star"
        android:cursorVisible="false"
        android:gravity="center"
        android:maxLength="1"
        android:textColor="@android:color/transparent"
        app:layout_constraintEnd_toStartOf="@+id/pin4EditText"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/pin2EditText"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <EditText
        android:id="@+id/pin4EditText"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/edittext_bg_without_star"
        android:cursorVisible="false"
        android:gravity="center"
        android:maxLength="1"
        android:textColor="@android:color/transparent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/pin3EditText"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />
</android.support.constraint.ConstraintLayout>

In above xml you will find some minor features to provide some enhanced user experience. Such as

    • Hide cursor while entering password using
android:cursorVisible="false"
    • Set default background after entering password
android:background="@drawable/edittext_bg_without_star"
    • and before entering password
android:background="@drawable/edittext_bg_with_star"
    • Setting max length of user input text to 1 so as to restrict entering multiple characters in single EditText.
android:maxLength="1"

Now let’s focus on creating Star ⭐ for EditText password as highlighted in above .gif

ic_star.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF4081"
        android:pathData="M12,17.27L18.18,21l-1.64,-7.03L22,9.24l-7.19,-0.61L12,2 9.19,8.63 2,9.24l5.46,4.73L5.82,21z"/>
</vector>

edittext_bg_with_star.xml  

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"
            android:thickness="2dp">
            <solid android:color="#e6e6e6"/>
            <stroke
                android:width="0.1dp"
                android:color="#FF4081" />
        </shape>
    </item>
    <item
        android:drawable="@drawable/ic_star"
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"/>
</layer-list>

edittext_bg_without_star.xml  

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:thickness="2dp">
    <corners android:radius="2dp" />
    <padding android:bottom="5dp" />
    <solid android:color="#e6e6e6" />
    <stroke
        android:width="1dp"
        android:color="#FF4081" />
</shape>

Now we are done with creating assets for our password field. So create main layout as activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.supportmania.stylishedittext.MainActivity">


    <EditText
        android:id="@+id/pin1EditText"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/edittext_bg_without_star"
        android:cursorVisible="false"
        android:gravity="center"
        android:maxLength="1"
        android:textColor="@android:color/transparent"
        app:layout_constraintEnd_toStartOf="@+id/pin2EditText"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <EditText
        android:id="@+id/pin2EditText"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/edittext_bg_without_star"
        android:cursorVisible="false"
        android:gravity="center"
        android:maxLength="1"
        android:textColor="@android:color/transparent"
        app:layout_constraintEnd_toStartOf="@+id/pin3EditText"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/pin1EditText"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <EditText
        android:id="@+id/pin3EditText"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/edittext_bg_without_star"
        android:cursorVisible="false"
        android:gravity="center"
        android:maxLength="1"
        android:textColor="@android:color/transparent"
        app:layout_constraintEnd_toStartOf="@+id/pin4EditText"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/pin2EditText"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />

    <EditText
        android:id="@+id/pin4EditText"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/edittext_bg_without_star"
        android:cursorVisible="false"
        android:gravity="center"
        android:maxLength="1"
        android:textColor="@android:color/transparent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/pin3EditText"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" />
</android.support.constraint.ConstraintLayout>

It’s time to know about Java Code which will handle user input and at runtime it will load respected UI for password field.

MainActivity.java

package com.supportmania.stylishedittext;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {
    EditText etxtPin1, etxtPin2, etxtPin3, etxtPin4;

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

    private void setupUI() {
        etxtPin1 = (EditText) findViewById(R.id.pin1EditText);
        etxtPin2 = (EditText) findViewById(R.id.pin2EditText);
        etxtPin3 = (EditText) findViewById(R.id.pin3EditText);
        etxtPin4 = (EditText) findViewById(R.id.pin4EditText);
    }

    private void handleEditTextListener() {
        try {
            etxtPin1.addTextChangedListener(new TextWatcher() {

                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {
                }

                @Override
                public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                }

                @Override
                public void afterTextChanged(Editable s) {
                    if (etxtPin1.getText().toString().trim().length() == 1) {
                        etxtPin1.clearFocus();
                        etxtPin2.requestFocus();
                        etxtPin1.setBackgroundResource(R.drawable.edittext_bg_with_star);
                    } else {
                        etxtPin1.setBackgroundResource(R.drawable.edittext_bg_without_star);
                    }
                }
            });

            etxtPin2.addTextChangedListener(new TextWatcher() {

                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {
                }

                @Override
                public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                }

                @Override
                public void afterTextChanged(Editable s) {
                    if (etxtPin2.getText().toString().trim().length() == 1) {
                        etxtPin2.clearFocus();
                        etxtPin3.requestFocus();
                        etxtPin2.setBackgroundResource(R.drawable.edittext_bg_with_star);
                    } else {
                        etxtPin2.setBackgroundResource(R.drawable.edittext_bg_without_star);
                        etxtPin2.clearFocus();
                        etxtPin1.requestFocus();

                    }
                }
            });
            etxtPin3.addTextChangedListener(new TextWatcher() {
                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {
                }

                @Override
                public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                }

                @Override
                public void afterTextChanged(Editable s) {
                    if (etxtPin3.getText().toString().trim().length() == 1) {
                        etxtPin3.clearFocus();
                        etxtPin4.requestFocus();
                        etxtPin3.setBackgroundResource(R.drawable.edittext_bg_with_star);
                    } else {
                        etxtPin3.setBackgroundResource(R.drawable.edittext_bg_without_star);
                        etxtPin3.clearFocus();
                        etxtPin2.requestFocus();

                    }
                }
            });
            etxtPin4.addTextChangedListener(new TextWatcher() {
                @Override
                public void onTextChanged(CharSequence s, int start, int before, int count) {
                }

                @Override
                public void beforeTextChanged(CharSequence s, int start, int count, int after) {
                }

                @Override
                public void afterTextChanged(Editable s) {
                    if (etxtPin4.getText().toString().trim().length() == 1) {
                        etxtPin4.requestFocus();
                        etxtPin4.setBackgroundResource(R.drawable.edittext_bg_with_star);
                    } else {
                        etxtPin4.setBackgroundResource(R.drawable.edittext_bg_without_star);
                        etxtPin4.clearFocus();
                        etxtPin3.requestFocus();
                    }
                }
            });
        } catch (Exception e) {
            e.toString();
        }
    }
}

 

Hey 🕺 !!! You are done 💥 Hope you understood…

Have any doubts?  Please write down in comment section.

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of