Skip to content
Related Articles

Related Articles

Working With the EditText in Android
  • Last Updated : 18 Feb, 2021
GeeksforGeeks - Summer Carnival Banner

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

numberMathematical numeric value
phoneContact Number based on the country code
dateTo take the date input
timeTo take the time is neededinput
textCapCharactersTo take the entire input in the upper case letters
textMultiLineMakes the user input multiple lines of text
textEmailAddressTo take the email address from the user
textPersonNameTo take the name of the person as input
textPasswordTo take the text password from the user, which turns to asterisks dots after entering the data
numberPasswordTo take only the numerical digits as a password
textVisiblePasswordTo take the text password from the user, which do not turns to asterisks dots after entering the data
textUriTo 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 perticular 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 amout 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: 

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!
My Personal Notes arrow_drop_up
Recommended Articles
Page :