Как создать EditText с помощью кнопки cross (x) в конце?

Есть ли какой-нибудь виджет типа EditText, который содержит крест-кнопку, или есть ли какое-либо свойство для EditText, с помощью которого оно создается автоматически? Я хочу, чтобы кнопка креста удаляла любой текст, написанный в EditText.

Ответ 1

Используйте следующий макет:

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="9dp"
    android:padding="5dp">

    <EditText
        android: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" />

    <Button
        android: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>

Вы также можете использовать идентификатор кнопки и выполнять любое действие, которое вы хотите, по методу onClickListener.

Ответ 2

Если вы используете DroidParts, я только что добавил ClearableEditText.

Вот как это выглядит с пользовательским фоном и значком очистки, установленным в abs__ic_clear_holo_light из ActionBarSherlock:

enter image description here

Ответ 3

Это решение Котлин. Поместите этот вспомогательный метод в некоторый котлин file-

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("")
                [email protected] true
            }
        }
        [email protected] false
    })
}

А затем используйте его следующим образом в методе onCreate и у вас должно получиться хорошо go-

yourEditText.setupClearButtonWithAction()

Кстати, вы должны R.drawable.ic_clear добавить R.drawable.ic_clear или значок очистки. Это из google- https://material.io/tools/icons/?icon=clear&style=baseline

Ответ 4

Вы также можете проверить это для измененного и расширенного ответа ClearableEditText.

Ответ 5

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

где x равно:

enter image description here

Ответ 6

Библиотека поддержки Android имеет класс SearchView который делает именно это. (Не получено из EditText хотя, поэтому придется использовать SearchView.OnQueryTextListener вместо TextWatcher)

Search view with no text (and hint text "Search")

enter image description here

Используйте в XML так:

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

Ответ 7

Для drawable resource вы можете использовать стандартные изображения для Android:

http://androiddrawables.com/Menu.html

Например:

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

Ответ 8

Решение 2019 с помощью Material Components для Android:

Добавьте компоненты материала в настройку Gradle:

implementation 'com.google.android.material:material:1.1.0-alpha09'

или, если вы не обновились до использования AndroidX libs, вы можете добавить его следующим образом:

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

Тогда

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

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>

</com.google.android.material.textfield.TextInputLayout>

Обратите внимание: app: endIconMode = "clear_text"

Как обсуждено здесь Материал дизайн документы

Ответ 9

Если вы не хотите использовать пользовательские представления или специальные макеты, вы можете использовать 9-патч для создания кнопки (X).

Пример: http://postimg.org/image/tssjmt97p/ (у меня недостаточно очков для отправки изображений на StackOverflow)

Пересечение правого и нижнего черных пикселей представляет собой область содержимого. Все, что находится за пределами этой области, заполняется. Таким образом, чтобы обнаружить, что пользователь нажал на x, вы можете установить OnTouchListener так:

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;
            }
        });

В соответствии с вашими потребностями это решение может работать лучше в некоторых случаях. Я предпочитаю, чтобы мой xml был менее сложным. Это также помогает, если вы хотите иметь значок слева, так как вы можете просто включить его в 9 патчей.

Ответ 10

Я сделал часть пользовательского интерфейса, как показано ниже:

<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 введите описание изображения здесь

Кнопка "Перекресток/Сброс" скрыть/показать:

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) {}
    });

Обрабатывать файлы поиска (например, когда пользователь нажимает на поиск с клавиатуры)

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;
        }
    });`

Кнопка Clear/Cross

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

Ответ 12

Используйте

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

Ответ 13

Вот полная библиотека с виджетами: https://github.com/opprime/EditTextField

Чтобы использовать его, вы должны добавить зависимость:

compile 'com.optimus:editTextField:0.2.0'

В файле layout.xml вы можете играть с настройками виджета:

xmlns:app="http://schemas.android.com/apk/res-auto"
  • app: clearButtonMode, может иметь такие значения: никогда всегда whileEditing unlessEditing

  • Приложение: clearButtonDrawable

Пример в действии:

введите описание изображения здесь

Ответ 14

Вы можете использовать этот фрагмент с ответом Jaydip для более чем одной кнопки. просто вызовите его после получения ссылки на элементы ET и Button. Я использовал кнопку vecotr, поэтому вам нужно изменить элемент Button на 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);
                }
            }
        });
    }

Ответ 15

Просто вставьте крестик, как drawableEnd в ваш EditText:

<EditText
     ...
    android:drawableEnd="@drawable/ic_close"
    android:drawablePadding="8dp"
     ... />

и используйте расширение для обработки нажатия (или используйте OnTouchListener непосредственно на EditText):

fun EditText.onDrawableEndClick(action: () -> Unit) {
    setOnTouchListener { v, event ->
        if (event.action == MotionEvent.ACTION_UP) {
            v as EditText
            val end = if (v.resources.configuration.layoutDirection == View.LAYOUT_DIRECTION_RTL)
                v.left else v.right
            if (event.rawX >= (end - v.compoundPaddingEnd)) {
                action.invoke()
                [email protected] true
            }
        }
        [email protected] false
    }
}

использование расширения:

editText.onDrawableEndClick {
    // TODO clear action
    etSearch.setText("")
}

Ответ 16

Если вы находитесь в макете фрейма или можете создать макет фрейма, я попробовал другой подход...

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

Это текст редактирования, в котором я помещаю значок перекрестия в качестве правильного рисования, а не UPON. Я помещаю прозрачную кнопку, которая очищает текст.

Ответ 17

    <EditText
    android:id="@+id/idSearchEditText"
    android:layout_width="match_parent"
    android:layout_height="@dimen/dimen_40dp"
    android:drawableStart="@android:drawable/ic_menu_search"
    android:drawablePadding="8dp"
    android:ellipsize="start"
    android:gravity="center_vertical"
    android:hint="Search"
    android:imeOptions="actionSearch"
    android:inputType="text"
    android:paddingStart="16dp"
    android:paddingEnd="8dp"
/>

EditText mSearchEditText = findViewById(R.id.idSearchEditText);
mSearchEditText.addTextChangedListener(this);
mSearchEditText.setOnTouchListener(this);


@Override
public void afterTextChanged(Editable aEditable) {
    int clearIcon = android.R.drawable.ic_notification_clear_all;
    int searchIcon = android.R.drawable.ic_menu_search;
    if (aEditable == null || TextUtils.isEmpty(aEditable.toString())) {
        clearIcon = 0;
        searchIcon = android.R.drawable.ic_menu_search;
    } else {
        clearIcon = android.R.drawable.ic_notification_clear_all;
        searchIcon = 0;
    }
    Drawable leftDrawable =  null;
    if (searchIcon != 0) {
        leftDrawable = getResources().getDrawable(searchIcon);
    }
    Drawable rightDrawable = null;
    if (clearIcon != 0) {
        rightDrawable = getResources().getDrawable(clearIcon);
    }

    mSearchEditText.setCompoundDrawablesWithIntrinsicBounds(leftDrawable, null, rightDrawable, null);
}


@Override
public boolean onTouch(View aView, MotionEvent aEvent) {
    if (aEvent.getAction() == MotionEvent.ACTION_UP){
        if (aEvent.getX() > ( mSearchEditText.getWidth() - 
         mSearchEditText.getCompoundPaddingEnd())){
            mSearchEditText.setText("");
        }
    }
    return false;
}