How to add Mask to an EditText in Android - GeeksforGeeks

18 Feb, 2021
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.
Approach:
Add the support Library in your root build.gradle file (not your module build.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 bigbucket can be directly used in the application.allprojects {    repositories {        maven {            url "https://jitpack.io"        }    }}Add the below dependency in the dependencies section. 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.activity_main.xmlactivity_main.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"                  <!-- Set the masked characters -->        app:mask="#### #### #### ####"        android:layout_height="wrap_content"        android:layout_margin="20dp"        android:id="@+id/card"/>      <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"          <!-- Set the masked characters -->        app:mask="+91 ### ### ####"/>      <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"          <!-- Set the masked characters -->        app:mask="##:##:####"/>      <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.java 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.MainActivity.javaMainActivity.javapackage org.geeksforgeeks.gfgMaskEditText;  import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.view.View;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(            new View.OnClickListener() {                  @Override                public void onClick(View v)                {                      // Display the information                    // from the EditText                    // with help of Taosts                    Toast.makeText(                             MainActivity.this,                             "Credit Card Number "                                 + creditCardText.getText()                                 + "\n Phone Number "                                 + phoneNumText.getText()                                 + "\n Date "                                 + dateText.getText(),                             Toast.LENGTH_LONG)                        .show();                }            });    }}
Add the support Library in your root build.gradle file (not your module build.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 bigbucket can be directly used in the application.allprojects {    repositories {        maven {            url "https://jitpack.io"        }    }}
allprojects {    repositories {        maven {            url "https://jitpack.io"        }    }}
Add the below dependency in the dependencies section. 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'}
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.activity_main.xmlactivity_main.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"                  <!-- Set the masked characters -->        app:mask="#### #### #### ####"        android:layout_height="wrap_content"        android:layout_margin="20dp"        android:id="@+id/card"/>      <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"          <!-- Set the masked characters -->        app:mask="+91 ### ### ####"/>      <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"          <!-- Set the masked characters -->        app:mask="##:##:####"/>      <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>
activity_main.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"                  <!-- Set the masked characters -->        app:mask="#### #### #### ####"        android:layout_height="wrap_content"        android:layout_margin="20dp"        android:id="@+id/card"/>      <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"          <!-- Set the masked characters -->        app:mask="+91 ### ### ####"/>      <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"          <!-- Set the masked characters -->        app:mask="##:##:####"/>      <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.java 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.MainActivity.javaMainActivity.javapackage org.geeksforgeeks.gfgMaskEditText;  import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.view.View;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(            new View.OnClickListener() {                  @Override                public void onClick(View v)                {                      // Display the information                    // from the EditText                    // with help of Taosts                    Toast.makeText(                             MainActivity.this,                             "Credit Card Number "                                 + creditCardText.getText()                                 + "\n Phone Number "                                 + phoneNumText.getText()                                 + "\n Date "                                 + dateText.getText(),                             Toast.LENGTH_LONG)                        .show();                }            });    }}
MainActivity.java
package org.geeksforgeeks.gfgMaskEditText;  import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.view.View;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(            new View.OnClickListener() {                  @Override                public void onClick(View v)                {                      // Display the information                    // from the EditText                    // with help of Taosts                    Toast.makeText(                             MainActivity.this,                             "Credit Card Number "                                 + creditCardText.getText()                                 + "\n Phone Number "                                 + phoneNumText.getText()                                 + "\n Date "                                 + dateText.getText(),                             Toast.LENGTH_LONG)                        .show();                }            });    }}
Output:
android
Android-View
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
Arrays in Java
Split() String method in Java with examples
For-each loop in Java
Object Oriented Programming (OOPs) Concept in Java
Arrays.sort() in Java with examples