How To Create Edittext With Cross(x) Button At End Of It?

Is there any widget like EditText which contains a cross button, or is there any property for EditText by which it is created automatically? I want the cross button to delete whate

Solution 1:

Use the following layout:

<FrameLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_marginTop="9dp"android:padding="5dp"><EditTextandroid:id="@+id/calc_txt_Prise"android:layout_width="fill_parent"android:layout_height="wrap_content"android:inputType="numberDecimal"android:layout_marginTop="20dp"android:textSize="25dp"android:textColor="@color/gray"android:textStyle="bold"android:hint="@string/calc_txt_Prise"android:singleLine="true" /><Buttonandroid:id="@+id/calc_clear_txt_Prise"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="10dp"android:layout_gravity="right|center_vertical"android:background="@drawable/delete" /></FrameLayout>

You can also use the button's id and perform whatever action you want on its onClickListener method.

Solution 2:

2020 solution via Material Design Components for Android:

Add Material Components to your gradle setup:

Look for latest version from here: https://maven.google.com/

implementation 'com.google.android.material:material:1.3.0'

or if you havent updated to using AndroidX libs, you can add it this way:

implementation 'com.android.support:design:28.0.0'

Then

<com.google.android.material.textfield.TextInputLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:hint="@string/hint_text"app:endIconMode="clear_text"><com.google.android.material.textfield.TextInputEditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"/></com.google.android.material.textfield.TextInputLayout>

Pay attention to: app:endIconMode="clear_text"

As discussed here Material design docs

Solution 3:

If you happen to use DroidParts, I've just added ClearableEditText.

Here's what it looks like with a custom background & clear icon set to abs__ic_clear_holo_light from ActionBarSherlock:

Solution 4:

This is a kotlin solution. Put this helper method in some kotlin file-

fun EditText.setupClearButtonWithAction() {

    addTextChangedListener(object : TextWatcher {
        overridefunafterTextChanged(editable: Editable?) {
            val clearIcon = if (editable?.isNotEmpty() == true) R.drawable.ic_clear else0
            setCompoundDrawablesWithIntrinsicBounds(0, 0, clearIcon, 0)
        }

        overridefunbeforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) = UnitoverridefunonTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) = Unit
    })

    setOnTouchListener(View.OnTouchListener { _, event ->
        if (event.action == MotionEvent.ACTION_UP) {
            if (event.rawX >= (this.right - this.compoundPaddingRight)) {
                this.setText("")
                return@OnTouchListenertrue
            }
        }
        return@OnTouchListenerfalse
    })
}

And then use it as following in the onCreate method and you should be good to go-

yourEditText.setupClearButtonWithAction()

BTW, you have to add R.drawable.ic_clear or the clear icon at first. This one is from google- https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Aclear%3A

Solution 5:

Android's support libarary has a SearchView class that does exactly this. (Not derrived from EditText though, so have to use a SearchView.OnQueryTextListener instead of a TextWatcher)

Use in XML like so:

  <android.support.v7.widget.SearchView
            android:id="@+id/searchView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:iconifiedByDefault="false"
            android:queryHint="@string/SearchHint"
            app:iconifiedByDefault="false"
            app:queryHint="@string/SearchHint" />