Working With the EditText in Android

10 Jun, 2021
EditText is one of the basic UI widgets, which is used to take the input from the user. The EditText is derived or is the extension of the TextView in Android. This article its been discussed in detail about the EditText in Android. The article also contains some of the redirections to other articles, also refer to them to get the detailed perspective of the EditText widget in Android. Have a look at the following list to get an idea of the overall discussion.
Input Type for the EditTextGetting the data or retrieving the data entered by the userInput Data CustomizationAdding hints for the placeholderChange the stroke colorChange the highlighted color inside the EditTextEvent Listener for the EditTextError Message for the EditText filedImplementing Password visibility toggleCharacter counting using Material Design EditText
Input Type for the EditText
Getting the data or retrieving the data entered by the user
Input Data Customization
Adding hints for the placeholder
Change the stroke color
Change the highlighted color inside the EditText
Event Listener for the EditText
Error Message for the EditText filed
Implementing Password visibility toggle
Character counting using Material Design EditText
Step 1: Create an empty activity project
Create an empty activity Android Studio project. Refer to How to Create/Start a New Project in Android Studio, to know how to create an empty activity Android project.
Step 2: Working with the activity_main.xml file
The main layout of the application contains the EditText Widget and two buttons. To implement the UI invoke the following code inside the activity_main.xml file. To get an idea about how the basic EditText in android looks like.
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity"    tools:ignore="HardcodedText">     <EditText        android:id="@+id/editText"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginStart="16dp"        android:layout_marginEnd="16dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.321" />     <Button        android:id="@+id/button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:backgroundTint="@color/green_500"        android:text="SUBMIT"        android:textColor="@color/white"        app:layout_constraintEnd_toEndOf="@+id/editText"        app:layout_constraintTop_toBottomOf="@+id/editText" />     <Button        style="@style/Widget.AppCompat.Button.Borderless"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:layout_marginEnd="8dp"        android:backgroundTint="@color/green_500"        android:text="CANCEL"        android:textColor="@color/green_500"        app:layout_constraintEnd_toStartOf="@+id/button"        app:layout_constraintTop_toBottomOf="@+id/editText" /> </androidx.constraintlayout.widget.ConstraintLayout>
 
 
Output UI:
 
This is one of the attributes which is needed to be specified under the EditText widget. Which defines the type of data to be entered by the user.
The following are attributes which are needed to be invoked and refer to its output to get a clear understanding.
InputType Attribute
Type of the Data which is  entered
Refer to the following code, which contains only the phone as the input type, for demonstration purposes. Which the value of that can be replaced with the values mentioned in the above table.
 
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity"    tools:ignore="HardcodedText">     <!--the values mentioned in the table are to be        invoked inside the inputType attribute-->    <EditText        android:id="@+id/editText"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginStart="16dp"        android:layout_marginEnd="16dp"                       android:inputType="phone"                       app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.321" />     <Button        android:id="@+id/button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:backgroundTint="@color/green_500"        android:text="SUBMIT"        android:textColor="@color/white"        app:layout_constraintEnd_toEndOf="@+id/editText"        app:layout_constraintTop_toBottomOf="@+id/editText" />     <Button        style="@style/Widget.AppCompat.Button.Borderless"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:layout_marginEnd="8dp"        android:backgroundTint="@color/green_500"        android:text="CANCEL"        android:textColor="@color/green_500"        app:layout_constraintEnd_toStartOf="@+id/button"        app:layout_constraintTop_toBottomOf="@+id/editText" /> </androidx.constraintlayout.widget.ConstraintLayout>
 
 
Output: 
 
To get the data entered by the user, firstly the EditText widget has to be invoked with the id. which is used to point to the unique widgets in android.
Provide the EditText with the id, by referring to the following code, which has to be invoked inside the activity_main.xml file.
 
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity"    tools:ignore="HardcodedText">     <EditText        android:id="@+id/editText"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginStart="16dp"        android:layout_marginEnd="16dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.321" />     <Button        android:id="@+id/submitButton"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:backgroundTint="@color/green_500"        android:text="SUBMIT"        android:textColor="@color/white"        app:layout_constraintEnd_toEndOf="@+id/editText"        app:layout_constraintTop_toBottomOf="@+id/editText" />     <Button        android:id="@+id/cancelButton"        style="@style/Widget.AppCompat.Button.Borderless"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:layout_marginEnd="8dp"        android:backgroundTint="@color/green_500"        android:text="CANCEL"        android:textColor="@color/green_500"        app:layout_constraintEnd_toStartOf="@+id/submitButton"        app:layout_constraintTop_toBottomOf="@+id/editText" /> </androidx.constraintlayout.widget.ConstraintLayout>
  
The following code needs to be invoked inside the MainActivity.kt file. Which performs the retrieving operation and provides the Toast message the same as the entered data.
There is one scenario, if the user left the EditText blank, it has to be checked whether it’s blank or not. To check whether it is blank EditText.
 
Kotlin
Java
import androidx.appcompat.app.AppCompatActivityimport android.os.Bundleimport android.widget.Buttonimport android.widget.EditTextimport android.widget.Toast class MainActivity : AppCompatActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.activity_main)         // register editText with instance        val editText: EditText = findViewById(R.id.editText)         // also register the submit button with the appropriate id        val submitButton: Button = findViewById(R.id.submitButton)         // handle the button with the onClickListener        submitButton.setOnClickListener {             // get the data with the "editText.text.toString()"            val enteredData: String = editText.text.toString()             // check whether the retrieved data is empty or not            // based on the emptiness provide the Toast Message            if (enteredData.isEmpty()) {                Toast.makeText(applicationContext, "Please Enter the Data", Toast.LENGTH_SHORT)                    .show()            } else {                Toast.makeText(applicationContext, enteredData, Toast.LENGTH_SHORT).show()            }        }    }}
import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.EditText;import android.widget.Toast;import androidx.appcompat.app.AppCompatActivity; public class MainActivity extends AppCompatActivity {     EditText editText;    Button submitButton;     @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);         // register editText with instance        editText = (EditText) findViewById(R.id.editText);         // also register the submit button with the appropriate id        submitButton = (Button) findViewById(R.id.submitButton);         // handle the button with the onClickListener        submitButton.setOnClickListener(                new View.OnClickListener() {                    @Override                    public void onClick(View view) {                                                 // get the data with the                        // "editText.text.toString()"                        String enteredData = editText.getText().toString();                         // check whether the retrieved data is                        // empty or not based on the emptiness                        // provide the Toast Message                        if (enteredData.isEmpty()) {                            Toast.makeText(getApplicationContext(), "Please Enter the Data", Toast.LENGTH_SHORT).show();                        } else {                            Toast.makeText(getApplicationContext(), enteredData, Toast.LENGTH_SHORT).show();                        }                    }                });    }}
 
 
Output: 
 
The EditText allows developers to make restrictions for the amount of data to be entered by the user. For example, the number of characters entered can be restricted, or the number of lines can be restricted, or the number of digits can be restricted.
Following are some of the attributes:
Input only particular numbers -> The following attribute takes only the digits 5 & 6 as input and no other numbers can be entered by the user.
digits=”56′′inputType=”number”
digits=”56′′
inputType=”number”
Restrict the number of characters of the input -> The following attribute makes user to enter only 6 number of characters.
maxLength=”6′′
maxLength=”6′′
Restrict the number of lines of input -> The following attribute makes user restricted to only single line, in which the EditText do not expand if the amount of the data gets more than single line.
lines=”1′′maxLines=”1′′
lines=”1′′
maxLines=”1′′
Following is the example of the numberPassword with only 6 digits as maxLength.
 
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity"    tools:ignore="HardcodedText">     <EditText        android:id="@+id/editText"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginStart="16dp"        android:layout_marginEnd="16dp"                       android:inputType="numberPassword"        android:maxLength="6"                       app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.321" />     <Button        android:id="@+id/submitButton"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:backgroundTint="@color/green_500"        android:text="SUBMIT"        android:textColor="@color/white"        app:layout_constraintEnd_toEndOf="@+id/editText"        app:layout_constraintTop_toBottomOf="@+id/editText" />     <Button        android:id="@+id/cancelButton"        style="@style/Widget.AppCompat.Button.Borderless"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:layout_marginEnd="8dp"        android:backgroundTint="@color/green_500"        android:text="CANCEL"        android:textColor="@color/green_500"        app:layout_constraintEnd_toStartOf="@+id/submitButton"        app:layout_constraintTop_toBottomOf="@+id/editText" /> </androidx.constraintlayout.widget.ConstraintLayout>
 
 
Output:
 
The hints for the EditText give confidence to the user, on what the data they have to enter into the EditText.
The attribute which is used to provide the hint text for the EditText is:
android:hint=”First and Last Name”
Refer to the following code and its output for better understanding.
 
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity"    tools:ignore="HardcodedText">     <EditText        android:id="@+id/editText"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginStart="16dp"        android:layout_marginEnd="16dp"                       android:hint="First and Last Name"                       app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.321" />     <Button        android:id="@+id/submitButton"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:backgroundTint="@color/green_500"        android:text="SUBMIT"        android:textColor="@color/white"        app:layout_constraintEnd_toEndOf="@+id/editText"        app:layout_constraintTop_toBottomOf="@+id/editText" />     <Button        android:id="@+id/cancelButton"        style="@style/Widget.AppCompat.Button.Borderless"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:layout_marginEnd="8dp"        android:backgroundTint="@color/green_500"        android:text="CANCEL"        android:textColor="@color/green_500"        app:layout_constraintEnd_toStartOf="@+id/submitButton"        app:layout_constraintTop_toBottomOf="@+id/editText" /> </androidx.constraintlayout.widget.ConstraintLayout>
 
 
Output: 
 
The stroke color which appears when it is in focus can also be changed, by the following attribute
android:backgroundTint=”colorValue”
Refer to the following code and its output, for better understanding.
 
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity"    tools:ignore="HardcodedText">     <EditText        android:id="@+id/editText"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginStart="16dp"        android:layout_marginEnd="16dp"                 android:backgroundTint="@android:color/holo_red_dark"                 android:hint="First and Last Name"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.321" />     <Button        android:id="@+id/submitButton"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:backgroundTint="@color/green_500"        android:text="SUBMIT"        android:textColor="@color/white"        app:layout_constraintEnd_toEndOf="@+id/editText"        app:layout_constraintTop_toBottomOf="@+id/editText" />     <Button        android:id="@+id/cancelButton"        style="@style/Widget.AppCompat.Button.Borderless"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:layout_marginEnd="8dp"        android:backgroundTint="@color/green_500"        android:text="CANCEL"        android:textColor="@color/green_500"        app:layout_constraintEnd_toStartOf="@+id/submitButton"        app:layout_constraintTop_toBottomOf="@+id/editText" /> </androidx.constraintlayout.widget.ConstraintLayout>
 
 
Output: 
 
The text inside the EditText gets highlighted when the user selects the particular text from it.
The color of the highlighted text inside the EditText can be changed using the following attribute.
android:textColorHighlight=”colorValue”
Refer to the following code and its output for better understanding.
 
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity"    tools:ignore="HardcodedText">     <EditText        android:id="@+id/editText"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginStart="16dp"        android:layout_marginEnd="16dp"         android:textColorHighlight="@android:color/holo_orange_light"         app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.321" />     <Button        android:id="@+id/submitButton"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:backgroundTint="@color/green_500"        android:text="SUBMIT"        android:textColor="@color/white"        app:layout_constraintEnd_toEndOf="@+id/editText"        app:layout_constraintTop_toBottomOf="@+id/editText" />     <Button        android:id="@+id/cancelButton"        style="@style/Widget.AppCompat.Button.Borderless"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:layout_marginEnd="8dp"        android:backgroundTint="@color/green_500"        android:text="CANCEL"        android:textColor="@color/green_500"        app:layout_constraintEnd_toStartOf="@+id/submitButton"        app:layout_constraintTop_toBottomOf="@+id/editText" /> </androidx.constraintlayout.widget.ConstraintLayout>
 
 
Output: 
 
Event listeners for the EditText can also be implemented to perform particular actions. Refer to the How to Implement TextWatcher in Android?
If the user misses out on any of the EditText or left the EditText blank without inputting any data, the user has to be alerted with the error message.
To implement such functionality, refer to Implement Form Validation (Error to EditText) in Android
Implement the password visibility toggle for the EditText by referring to How to Toggle Password Visibility in Android?.
Invoke the following dependency to access the Material Design components.
implementation ‘com.google.android.material:material:1.2.1’
The following attributes are to be invoked inside the TextInputLayout
app:counterEnabled=”true”
app:counterMaxLength=”6′′
Refer to the following code and its output for better understanding.
 
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity"    tools:ignore="HardcodedText">     <com.google.android.material.textfield.TextInputLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginStart="16dp"        android:layout_marginTop="32dp"        android:layout_marginEnd="16dp"        android:hint="Enter Something"         app:counterEnabled="true"        app:counterMaxLength="6"         app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent">         <com.google.android.material.textfield.TextInputEditText            android:layout_width="match_parent"            android:layout_height="wrap_content" />      </com.google.android.material.textfield.TextInputLayout> </androidx.constraintlayout.widget.ConstraintLayout>
 
 
Output: 
 
 
raghav14
sooda367
android
Android-View
Technical Scripter 2020
Android
Kotlin
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android SDK and it's Components
Flutter - Custom Bottom Navigation Bar
How to Communicate Between Fragments in Android?
Retrofit with Kotlin Coroutine in Android
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android UI Layouts
Kotlin Array
How to Communicate Between Fragments in Android?
Retrofit with Kotlin Coroutine in Android