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 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
The Detailed Perspective of EditText in Android
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
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
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
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.
- 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″
- 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″
- 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
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
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
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
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
- Event listeners for the EditText can also be implemented to perform particular actions. Refer to the How to Implement TextWatcher in Android?
8. Error Message for the EditText filed
- 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
9. Implementing Password visibility toggle
- Implement the password visibility toggle for the EditText by referring to How to Toggle Password Visibility in Android?.
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
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: