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 version = "1.0" encoding = "utf-8" ?>
< LinearLayout
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.
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();
});
}
} |
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()
}
}
} |