Android java android.support.design.widget.TextInputLayout with clear button

Question

Is there any way to get something like that, plus the button to clean/delete the text when it contains something?

<android.support.design.widget.TextInputLayout
android:id="@+id/text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Inserisci Username">

                    <EditText
                        android:id="@+id/editText"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="Username"
                        android:inputType="text" />

</android.support.design.widget.TextInputLayout>

you want to clear the text inside edittext on a certain button click. right ? or you want to change the color? — Raza, Nov 06 '18 at 09:06

score 10 · Answer 1 · edited Feb 09 '21 at 05:07

I know it's been a while, but maybe it helps someone.

If you use Material components, you can use app:endIconMode="clear_text", for example:

 <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/key_word_wrapper"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:hintEnabled="true"
                android:hint="@string/key_word"
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
                android:layout_gravity="center_horizontal"
                app:endIconMode="clear_text">
                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/key_word"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="text" />
            </com.google.android.material.textfield.TextInputLayout>

This will bring up the little X button as soon as the text has been entered, and will automatically work as expected.

Read more options at Text fields

score 8 · Accepted Answer · edited Nov 24 '18 at 09:06

To clear the text from edit text

@Override
public void onClick(View v) {
    editText.getText().clear(); 
    //or you can use editText.setText("");
}

To put the button inside edittext just make the custom layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
>

<RelativeLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/oval"
    android:layout_centerInParent="true"
    >

    <android.support.design.widget.TextInputLayout
        android:id="@+id/text_input_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_toLeftOf="@+id/id_search_button"
        android:hint="Inserisci Username">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="username"
            android:background="@android:color/transparent"
            android:inputType="text" />

    </android.support.design.widget.TextInputLayout>

    <ImageButton android:id="@+id/id_search_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="5dp"
        android:layout_centerVertical="true"
        android:background="@drawable/ic_clear_black"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

</RelativeLayout>

drawable oval

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#ffffff"/>
    <stroke android:width="2px" android:color="#ff00ffff"/>
    <corners android:radius="24dp" />
</shape>

To hide focus of the editText when app starts

add these lines inside activity tag of your class name in manifest file

<activity
        android:name=".yourActivityName"
        android:windowSoftInputMode="stateAlwaysHidden"
        android:focusable="true"
        android:focusableInTouchMode="true"
        />

You can set property of Layout like android:descendantFocusability="beforeDescendants" and android:focusableInTouchMode="true"

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
xmlns:ads="http://schemas.android.com/apk/res-auto"
>

The problem is that I do not know how to put the X in the editText field. — Paul, Nov 06 '18 at 09:09
@Paul try the above xml and perform clicklistener inside activity — Raza, Nov 06 '18 at 09:20
Thx, being that I have only one field EditText, just start app, immediately makes the focus on the field. Is there any trick for not having it done when it starts? — Paul, Nov 06 '18 at 10:39
i am sorry , i couldnt understand what are you saying.. The random idea i got from your comment is that you want to disable the focus of edittext when the app starts right? — Raza, Nov 06 '18 at 12:09

score 0 · Answer 3 · answered Nov 06 '18 at 09:05

0

You could use onTouchEvent() for determine user touch to 'clear text' icon

@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_UP) {
        final int x = (int) event.getX();
        final int y = (int) event.getY();
        if (x >= (this.getRight() - drawableClearText.getBounds().width()) && x <= (this.getRight() - this.getPaddingRight())
                && y >= this.getPaddingTop() && y <= (this.getHeight() - this.getPaddingBottom())) {
            this.setText("");
            event.setAction(MotionEvent.ACTION_CANCEL);
        }
    }
    return super.onTouchEvent(event);
}

To manage the icon states(visible, invisible) you may use TextViewCompat.setCompoundDrawablesRelative(your_edit_text, compounds[0], compounds[1], drawableClearText, compounds[3])

answered Nov 06 '18 at 09:05

ILLIA DEREVIANKO

770
4
9

Wait, I'm not understanding. How do I put the X in the editText field. Layout talking? – Paul Nov 06 '18 at 09:10
I prefer the way that set drawableEnd to edittext programmatically and manage him states using code. The parts of my code you can look in answer. – ILLIA DEREVIANKO Nov 06 '18 at 09:15
I'm not understanding where I should get this.getRight (), this.getPaddingBottom (), .ecc.. I tried this: https://stackoverflow.com/a/36913336/8024296 but it does not seem to work very well. – Paul Nov 06 '18 at 09:36

Android java android.support.design.widget.TextInputLayout with clear button

3 Answers3