Introduction

An EditText with an X button at the end is usually called a clearable text field. The classic Android implementation uses a compound drawable plus touch handling, while modern Material-based apps can often use TextInputLayout end icons instead.

The important design choice is whether you want a quick custom EditText solution or a cleaner Material Components solution. Both work, but the modern option usually requires less manual touch math.

Classic EditText With a Drawable End Icon

Start with a normal EditText in XML and give it an end drawable:

1<EditText
2    android:id="@+id/searchInput"
3    android:layout_width="match_parent"
4    android:layout_height="wrap_content"
5    android:hint="Search"
6    android:drawableEnd="@drawable/ic_clear_24"
7    android:paddingEnd="12dp" />

That only shows the icon. It does not make it clear the text when tapped.

Handle the Tap in Code

The usual approach is to listen for touch events and check whether the user tapped inside the drawable area.

Kotlin example:

1searchInput.setOnTouchListener { view, event ->
2    if (event.action == MotionEvent.ACTION_UP) {
3        val editText = view as EditText
4        val drawable = editText.compoundDrawablesRelative[2]
5
6        if (drawable != null) {
7            val drawableWidth = drawable.bounds.width()
8            val tappedOnDrawable = event.x >= (editText.width - editText.paddingEnd - drawableWidth)
9
10            if (tappedOnDrawable) {
11                editText.text.clear()
12                return@setOnTouchListener true
13            }
14        }
15    }
16
17    false
18}

This works by checking whether the touch landed inside the end-drawable region.

Show the X Only When There Is Text

Most apps hide the clear icon when the field is empty. That behavior feels more natural and reduces visual clutter.

1searchInput.addTextChangedListener(object : TextWatcher {
2    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) = Unit
3
4    override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
5        val showIcon = !s.isNullOrEmpty()
6        val endDrawable = if (showIcon) R.drawable.ic_clear_24 else 0
7        searchInput.setCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, endDrawable, 0)
8    }
9
10    override fun afterTextChanged(s: Editable?) = Unit
11})

Now the field only shows the clear button when there is something to clear.

A Reusable Custom View

If you need this behavior in many screens, a custom subclass is cleaner than repeating touch and watcher logic everywhere.

1class ClearableEditText @JvmOverloads constructor(
2    context: Context,
3    attrs: AttributeSet? = null
4) : AppCompatEditText(context, attrs) {
5
6    init {
7        updateIcon("")
8
9        addTextChangedListener(object : TextWatcher {
10            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) = Unit
11            override fun afterTextChanged(s: Editable?) = Unit
12
13            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
14                updateIcon(s?.toString() ?: "")
15            }
16        })
17    }
18
19    private fun updateIcon(text: String) {
20        val endDrawable = if (text.isNotEmpty()) R.drawable.ic_clear_24 else 0
21        setCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, endDrawable, 0)
22    }
23}

That keeps the behavior localized and reusable.

Modern Material Alternative

If you are already using Material Components, TextInputLayout often gives a cleaner solution with less custom code.

1<com.google.android.material.textfield.TextInputLayout
2    android:layout_width="match_parent"
3    android:layout_height="wrap_content"
4    app:endIconMode="clear_text">
5
6    <com.google.android.material.textfield.TextInputEditText
7        android:layout_width="match_parent"
8        android:layout_height="wrap_content"
9        android:hint="Search" />
10
11</com.google.android.material.textfield.TextInputLayout>

This is usually the best modern answer if your project already depends on Material Components. It gives you the clear-text behavior without manual touch calculations.

Which Approach Should You Use

Use the classic drawable-and-touch approach when:

• the app already uses plain EditText
• you need full custom control
• or you do not want to add Material Components

Use TextInputLayout when:

• the app already uses Material
• you want a built-in clear-text pattern
• and you prefer less custom event code

For new apps, the Material approach is often more maintainable.

Common Pitfalls

One common mistake is showing the X icon permanently even when the field is empty. That usually looks unfinished and wastes touchable space.

Another mistake is calculating the touch area incorrectly, especially in right-to-left layouts. Using relative compound drawables helps with that.

It is also easy to forget accessibility. A clear button should have predictable behavior and should not interfere with normal text selection or editing interactions.

Finally, some teams reimplement this pattern manually even though TextInputLayout already provides it. If Material Components are already in use, the built-in solution is usually better.

Summary

• A clearable EditText usually uses an end drawable plus touch handling.
• Show the X only when the field actually contains text.
• Wrap the behavior in a custom view if you need it in several places.
• In modern Material apps, TextInputLayout with endIconMode="clear_text" is often the cleanest solution.
• Choose the approach that matches the UI toolkit already used by the app.