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.

Approach:



  1. 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    allprojects {
        repositories {
            maven {
                url "https://jitpack.io"
            }
        }
    }

    chevron_right

    
    

  2. 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  3. 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.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?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"
              
            <!-- 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>

    chevron_right

    
    

  4. 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.java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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();
                    }
                });
        }
    }

    chevron_right

    
    

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


3


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.