Jak utworzyć EditText z przyciskiem cross(x) na końcu?

Jeśli przypadkiem używasz DroidParts , właśnie dodałemClearableEditText .

Oto Jak to wygląda z niestandardowym tłem i ikoną Wyczyść ustawioną na abs__ic_clear_holo_lightz ActionBarSherlock :

Możesz również sprawdzić to dla zmodyfikowanej i rozszerzonej odpowiedzi ClearableEditText .

Drawable x = getResources().getDrawable(R.drawable.x);
x.setBounds(0, 0, x.getIntrinsicWidth(), x.getIntrinsicHeight());
mEditText.setCompoundDrawables(null, null, x, null);

Gdzie, X jest:

Dla drawable resource możesz użyć standardowych obrazów Androida:

Http://androiddrawables.com/Menu.html

Na przykład:

android:background="@android:drawable/ic_menu_close_clear_cancel"

Wsparcie Android libarary ma SearchView klasa, która robi dokładnie to. (Nie derrived z EditText jednak, więc trzeba użyć SearchView.OnQueryTextListener zamiast TextWatcher)

Użyj w XML tak:

  <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" />

Jeśli nie chcesz używać niestandardowych widoków lub specjalnych układów, możesz użyć 9-patch, aby utworzyć przycisk (X).

Przykład: http://postimg.org/image/tssjmt97p/ (nie mam wystarczającej ilości punktów, aby publikować zdjęcia na StackOverflow)

Przecięcie prawego i dolnego czarnego piksela reprezentuje obszar zawartości. Wszystko poza tym obszarem jest wyściełane. Aby więc wykryć, że użytkownik kliknął na x, możesz ustawić OnTouchListener w następujący sposób:

editText.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                if (motionEvent.getAction() == MotionEvent.ACTION_UP){
                    if (motionEvent.getX()>(view.getWidth()-view.getPaddingRight())){
                        ((EditText)view).setText("");
                    }
                }
                return false;
            }
        });

Zgodnie z Twoimi potrzebami To rozwiązanie może działać lepiej w niektórych przypadkach. Wolę, aby mój xml był mniej skomplikowany. Pomaga to również, jeśli chcesz mieć ikonę po lewej stronie, ponieważ możesz ją po prostu umieścić w patchu na 9.

To jest rozwiązanie Kotlina. Umieść tę metodę pomocniczą w jakimś pliku kotlin -

fun EditText.setupClearButtonWithAction() {

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

        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) = Unit
        override fun onTextChanged(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@OnTouchListener true
            }
        }
        return@OnTouchListener false
    })
}

A następnie użyj go w następujący sposób w metodzie onCreate i powinieneś być dobry, aby przejść-

yourEditText.setupClearButtonWithAction()

BTW, musisz najpierw dodać R.drawable.ic_clear lub ikonę clear. Ten jest z google - https://material.io/tools/icons/?icon=clear&style=baseline

Zrobiłem część interfejsu jak poniżej:

<RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:layout_marginTop="9dp"
            android:padding="5dp">

            <EditText
                android:id="@+id/etSearchToolbar"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:textSize="13dp"
                android:padding="10dp"
                android:textColor="@android:color/darker_gray"
                android:textStyle="normal"
                android:hint="Search"
                android:imeOptions="actionSearch"
                android:inputType="text"
                android:background="@drawable/edittext_bg"
                android:maxLines="1" />

            <ImageView
                android:id="@+id/ivClearSearchText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginRight="6dp"
                android:src="@drawable/balloon_overlay_close"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true" />


        </RelativeLayout>

Edittext_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<solid android:color="#FFFFFF" />

<stroke
    android:width="1dp"
    android:color="#C9C9CE" />

<corners
    android:bottomLeftRadius="15dp"
    android:bottomRightRadius="15dp"
    android:topLeftRadius="15dp"
    android:topRightRadius="15dp" />

balloon_overlay_close.png

Krzyżyk / Wyczyść przycisk Ukryj / pokaż:

searchBox.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            if(charSequence.length() > 0){
                clearSearch.setVisibility(View.VISIBLE);
            }else{
                clearSearch.setVisibility(View.GONE);
            }
        }

        @Override
        public void afterTextChanged(Editable editable) {}
    });

Obsługa wyszukiwanych rzeczy (np. gdy użytkownik kliknie Szukaj z miękkiej tablicy klucza)

searchBox.setOnEditorActionListener(new TextView.OnEditorActionListener() {
        @Override
        public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
            if (actionId == EditorInfo.IME_ACTION_SEARCH) {
                String contents = searchBox.getText().toString().trim();
                if(contents.length() > 0){
                    //do search

                }else
                    //if something to do for empty edittext

                return true;
            }
            return false;
        }
    });`

Przycisk Clear / Cross

  clearSearch.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            searchBox.setText("");
        }
    });

Możesz pobrać źródło tutaj:

Https://github.com/GhOsTTT/editTextXbutton

Miłego dnia

Oto pełna biblioteka z widżetem: https://github.com/opprime/EditTextField

Aby go użyć należy dodać zależność:

compile 'com.optimus:editTextField:0.2.0'

W układzie.plik xml można odtwarzać za pomocą ustawień widżetu:

xmlns:app="http://schemas.android.com/apk/res-auto"

• App: clearButtonMode can może mieć takie wartości: nigdy zawsze whileEditing unless

• Aplikacja: clearButtonDrawable

Próbka w działaniu:

Użyj

android:drawableRight="@android:drawable/ic_input_delete"

Możesz użyć tego fragmentu z odpowiedzią Jaydip dla więcej niż jednego przycisku. wystarczy zadzwonić po uzyskaniu odniesienia do elementów ET i Button. Użyłem przycisku vecotr więc trzeba zmienić element przycisku na ImageButton:

private void setRemovableET(final EditText et, final ImageButton resetIB) {

        et.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (hasFocus && et.getText().toString().length() > 0)
                    resetIB.setVisibility(View.VISIBLE);
                else
                    resetIB.setVisibility(View.INVISIBLE);
            }
        });

        resetIB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                et.setText("");
                resetIB.setVisibility(View.INVISIBLE);
            }
        });

        et.addTextChangedListener(new TextWatcher() {
            @Override
            public void afterTextChanged(Editable s) {}
            @Override
            public void beforeTextChanged(CharSequence s, int start,
                                          int count, int after) {
            }
            @Override
            public void onTextChanged(CharSequence s, int start,
                                      int before, int count) {
                if(s.length() != 0){
                    resetIB.setVisibility(View.VISIBLE);
                }else{
                    resetIB.setVisibility(View.INVISIBLE);
                }
            }
        });
    }

Jeśli jesteś w układzie ramki lub możesz utworzyć układ ramki próbowałem innego podejścia....

<TextView
    android:id="@+id/inputSearch"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:drawableRight="@drawable/ic_actionbar"
    android:layout_alignParentBottom="true"
    android:layout_toRightOf="@+id/back_button"/>

<Button
    android:id="@+id/clear_text_invisible_button"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_gravity="right|center_vertical"
    android:background="@color/transparent"
    android:layout_alignBaseline="@+id/inputSearch"
    android:layout_alignBottom="@+id/inputSearch"
    android:layout_alignRight="@+id/inputSearch"
    android:layout_alignEnd="@+id/inputSearch"
    android:layout_marginRight="13dp"
    />

Jest to tekst edycji, w którym umieszczam ikonę krzyżyka jako prawy rysowalny, a następnie na nim umieszczam przezroczysty przycisk, który czyści tekst.