How to Add Mask to an EditText in Android?

EditText is an android widget. It is a User Interface element used for entering and modifying data. It returns data in String format. Masking refers to the process of putting something in place of something else. Therefore by Masking an EditText, the blank space is replaced with some default text, known as Mask. This mask gets removed as soon as the user enters any character as input, and reappears when the text has been removed from the EditText. In this article, the masking is done with the help of JitPack Library, because it can be customized easily according to the need to implement various fields like phone number, date, etc. The code has been given in both Java and Kotlin Programming Language for Android.

Approach:

Add the support Library in your settings.gradle File. This library Jitpack is a novel package repository. It is made for JVM so that any library which is present in Github and Bitbucket can be directly used in the application. 

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        
        // add the following
        maven { url "https://jitpack.io" }
    }
}

Add the below dependency in the dependencies section of your App/Module build.gradle File. It is a simple Android EditText with custom mask support. Mask EditText is directly imported and is customized according to the use. 

dependencies {
    implementation 'ru.egslava:MaskedEditText:1.0.5'
}

Now add the following code in the activity_main.xml file. It will create three mask EditTexts and one button in activity_main.xml. 

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:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <br.com.sapereaude.maskedEditText.MaskedEditText
        android:hint="#### #### #### ####"
        android:layout_width="match_parent"
        android:inputType="number"
        app:mask="#### #### #### ####"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:id="@+id/card"/>
          <!-- Set the masked characters -->

    <br.com.sapereaude.maskedEditText.MaskedEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:id="@+id/phone"
        android:hint="9876543210"
        android:inputType="phone"
        app:keep_hint="true"
        app:mask="+91 ### ### ####"/>
        <!-- Set the masked characters -->


    <br.com.sapereaude.maskedEditText.MaskedEditText
        android:hint="##:##:####"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:id="@+id/Date"
        android:inputType="date"
        app:mask="##:##:####"/>
        <!-- Set the masked characters -->

    <Button
        android:id="@+id/showButton"
        android:layout_marginTop="40dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:textSize="18sp"
        android:text="Show"/>
</LinearLayout>

Now add the following code in the MainActivity File. All the three mask EditTexts and a button are defined. An onClickListener() is added on the button which creates a toast and shows all the data entered in the mask EditTexts. 

Java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.Toast;
import br.com.sapereaude.maskedEditText.MaskedEditText;

public class MainActivity extends AppCompatActivity {

    MaskedEditText creditCardText,phoneNumText,dateText;
    Button show;

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

        creditCardText = findViewById(R.id.card);
        phoneNumText = findViewById(R.id.phone);
        dateText = findViewById(R.id.Date);
        show = findViewById(R.id.showButton);

        show.setOnClickListener(v -> {
            // Display the information from the EditText with help of Toasts
            Toast.makeText(MainActivity.this, "Credit Card Number " + creditCardText.getText() + "\n Phone Number "
                    + phoneNumText.getText() + "\n Date " + dateText.getText(), Toast.LENGTH_LONG).show();
        });
    }
}

Kotlin

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.Toast
import br.com.sapereaude.maskedEditText.MaskedEditText

class MainActivity : AppCompatActivity() {

    lateinit var creditCardText: MaskedEditText
    lateinit var phoneNumText: MaskedEditText
    lateinit var dateText: MaskedEditText
    lateinit var show: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        creditCardText = findViewById(R.id.card)
        phoneNumText = findViewById(R.id.phone)
        dateText = findViewById(R.id.Date)
        show = findViewById(R.id.showButton)

        show.setOnClickListener {
            // Display the information from the EditText with help of Toasts
            Toast.makeText(this, ("Credit Card Number " + creditCardText.getText()) + "\n Phone Number "
                    + phoneNumText.getText().toString() + "\n Date " + dateText.getText(), Toast.LENGTH_LONG
            ).show()
        }
    }
}

Output: