Open In App

Working With the EditText in Android

Improve
Improve
Like Article
Like
Save
Share
Report

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.

  1. Input Type for the EditText
  2. Getting the data or retrieving the data entered by the user
  3. Input Data Customization
  4. Adding hints for the placeholder
  5. Change the stroke color
  6. Change the highlighted color inside the EditText
  7. Event Listener for the EditText
  8. Error Message for the EditText filed
  9. Implementing Password visibility toggle
  10. Character counting using Material Design EditText

The Detailed Perspective of EditText in Android

Step 1: Create an empty activity 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: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:

 

Now let’s discuss the various attributes of the EditText

1. Input Type for the EditText

  • 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

number Mathematical numeric value
phone Contact Number based on the country code
date To take the date input
time To take the time is neededinput
textCapCharacters To take the entire input in the upper case letters
textMultiLine Makes the user input multiple lines of text
textEmailAddress To take the email address from the user
textPersonName To take the name of the person as input
textPassword To take the text password from the user, which turns to asterisks dots after entering the data
numberPassword To take only the numerical digits as a password
textVisiblePassword To take the text password from the user, which do not turns to asterisks dots after entering the data
textUri To take the particular URL of the website
  • 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: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: 

 

2. Getting the data or retrieving the data entered by the user

  • 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: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




import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import 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()
            }
        }
    }
}


Java




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: 

 

3. Input Data Customization

  • 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.
  1. digits=”56″
  2. inputType=”number”
  • Restrict the number of characters of the input -> The following attribute makes user to enter only 6 number of characters.
  1. 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.
  1. lines=”1″
  2. 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: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:

 

4. Adding hints for the placeholder

  • 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: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: 

 

5. Change the stroke color

  • 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: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: 

 

6. Change the highlighted color inside the EditText

  • 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: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: 

 

7. Event Listener for the EditText

8. Error Message for the EditText filed

9. Implementing Password visibility toggle

10. Character counting using Material Design EditText

  • 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: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: 

 

 



Last Updated : 10 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads