Material EditText in Android

Introduction

In this article, we will learn how to create and use Clearable EditText without using any third-party library. It is very easy to implement and useful control for our application development.
Steps
I have split this part into 3 steps as in the following.
Step 1 - Creating a New Project with Android Studio
  1. Open Android Studio and select Create a new project.
  2. Name the project as per your wish and select your activity template.
    Activity Template
  3. Click the “Finish” button to create a new project in Android Studio.
Step 2 - Setting up the Firebase Library
In this part, we will see how to set up the library for the project.
  1. Open your app level build.gradle file and add the following lines in dependencies to apply the required libraries to your project.
    1. dependencies {
    2. ...
    3. implementation 'com.android.support:appcompat-v7:26.1.0'
    4. implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    5. implementation 'com.android.support:support-annotations:27.1.1'
    6. implementation 'com.android.support:design:26.1.0'
    7. }
  1. Then click “Sync Now” to setup your project.
Step 3 - Implementation of Clearable EditText
Create a class named as ClearableEditText extend with android.support.v7.widget.AppCompatEditText as Parent. Then open the class file and add the following lines of code.
  1. public class ClearableEditText extends android.support.v7.widget.AppCompatEditText {
  3. private Drawable drawableTemp;
  4. private Drawable drawableRight;
  6. int actionX, actionY;
  8. private DrawableClickListener clickListener;
  10. public ClearableEditText(Context context) {
  11. super(context);
  12. }
  14. public ClearableEditText(Context context, AttributeSet attrs) {
  15. super(context, attrs);
  16. }
  18. public ClearableEditText(Context context, AttributeSet attrs, int defStyleAttr) {
  19. super(context, attrs, defStyleAttr);
  20. }
  22. protected void onDraw(Canvas canvas) {
  23. super.onDraw(canvas);
  25. }
  27. @Override
  28. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  29. super.onSizeChanged(w, h, oldw, oldh);
  30. }
  32. @Override
  33. public void setCompoundDrawables(Drawable left, Drawable top,
  34. Drawable right, Drawable bottom) {
  35. if (right != null) {
  36. drawableRight = right;
  37. }
  38. super.setCompoundDrawables(left, top, right, bottom);
  39. }
  41. @Override
  42. protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
  43. if (text.toString().length() > 0) {
  44. drawableRight = drawableTemp;
  45. setCompoundDrawables(null, null, drawableRight, null);
  46. } else {
  47. drawableTemp = drawableRight;
  48. setCompoundDrawables(null, null, null, null);
  49. }
  50. super.onTextChanged(text, start, lengthBefore, lengthAfter);
  51. }
  53. @SuppressLint("ClickableViewAccessibility")
  54. @Override
  55. public boolean onTouchEvent(MotionEvent event) {
  56. Rect bounds;
  57. if (event.getAction() == MotionEvent.ACTION_DOWN) {
  58. actionX = (int) event.getX();
  59. actionY = (int) event.getY();
  60. if (drawableRight != null) {
  62. bounds = drawableRight.getBounds();
  63. int x, y;
  64. int extraTapArea = 13;
  66. /*
  67. IF USER CLICKS JUST OUT SIDE THE RECTANGLE OF THE DRAWABLE
  68. THAN ADD X AND SUBTRACT THE Y WITH SOME VALUE SO THAT AFTER
  69. CALCULATING X AND Y CO-ORDINATE LIES INTO THE DRAWBABLE
  70. BOUND. - this process help to increase the tappable area of
  71. the rectangle.
  72. */
  73. x = actionX + extraTapArea;
  74. y = actionY - extraTapArea;
  76. /*
  77. Since this is right drawable subtract the value of x from the width
  78. of view. so that width - tapped_area will result in x co-ordinate in drawable bound.
  79. */
  80. x = getWidth() - x;
  82. /*x can be negative if user taps at x co-ordinate just near the width.
  83. e.g views width = 300 and user taps 290. Then as per previous calculation
  84. 290 + 13 = 303. So subtract X from getWidth() will result in negative value.
  85. So to avoid this add the value previously added when x goes negative.
  86. */
  88. if (x <= 0) {
  89. x += extraTapArea;
  90. }
  92. /*
  93. If result after calculating for extra tap-able area is negative.
  94. assign the original value so that after subtracting
  95. extra tapping area value doesn't go into negative value.
  96. */
  98. if (y <= 0)
  99. y = actionY;
  101. /*
  102. If drawable bounds contains the x and y points then move ahead.
  103. */
  104. if (bounds.contains(x, y) && clickListener != null) {
  105. clickListener.onClick();
  106. event.setAction(MotionEvent.ACTION_CANCEL);
  107. return false;
  108. }
  109. return super.onTouchEvent(event);
  110. }
  112. }
  113. return super.onTouchEvent(event);
  114. }
  116. @Override
  117. protected void finalize() throws Throwable {
  118. drawableRight = null;
  119. super.finalize();
  120. }
  122. public void setDrawableClickListener(DrawableClickListener listener) {
  123. this.clickListener = listener;
  124. }
  126. public interface DrawableClickListener {
  127. void onClick();
  128. }
Here, I have created DrawableClickListener interface.
Open your activity_main.xml file and add the following lines.
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:layout_margin="10dp"
  8. tools:context="com.androidmads.materialedittext.MainActivity">
  10. <android.support.design.widget.TextInputLayout
  11. android:id="@+id/text_input_layout"
  12. android:layout_width="match_parent"
  13. android:layout_height="wrap_content"
  14. app:errorEnabled="true"
  15. app:layout_constraintBottom_toBottomOf="parent"
  16. app:layout_constraintLeft_toLeftOf="parent"
  17. app:layout_constraintRight_toRightOf="parent"
  18. app:layout_constraintTop_toTopOf="parent">
  20. <com.androidmads.materialedittext.ClearableEditText
  21. android:id="@+id/edit_text"
  22. android:layout_width="match_parent"
  23. android:layout_height="wrap_content"
  24. android:drawableEnd="@drawable/ic_close"
  25. android:drawableRight="@drawable/ic_close"
  26. android:hint="Enter your name" />
  28. </android.support.design.widget.TextInputLayout>
  30. <Button
  31. android:id="@+id/button"
  32. android:layout_width="match_parent"
  33. android:layout_height="wrap_content"
  34. android:layout_marginTop="68dp"
  35. android:text="Click Here..."
  36. app:layout_constraintEnd_toEndOf="parent"
  37. app:layout_constraintStart_toStartOf="parent"
  38. app:layout_constraintTop_toTopOf="@+id/text_input_layout" />
  40. </android.support.constraint.ConstraintLayout>
The Layout Preview looks like the below screenshot,
Layout Preview
This control will show the cancel “icon” when the control has typed text and “icon” will hide when the control has no text.
Then open your MainActivity.java file and initialize your control like the following.
  1. final TextInputLayout textInputLayout = findViewById(R.id.text_input_layout);
  2. final ClearableEditText editText = findViewById(R.id.edit_text);
  3. final Button button = findViewById(R.id.button);
The cancel icon will appear when the user types the data. Add the following Drawable click listener as in the following.
  1. editText.setDrawableClickListener(new ClearableEditText.DrawableClickListener() {
  2. @Override
  3. public void onClick() {
  4. editText.setText(null);
  5. }
  6. });
Download Code
You can download the full source code of the article in GitHub. If you like this article, do star the repo in GitHub.