Skip to content
Related Articles
Open in App
Not now

Related Articles

How to Add Mask to an EditText in Android?

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 23 Nov, 2022
Improve Article
Save Article

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.

Mask to an EditText in 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:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!