Bagaimana cara membuat EditText dengan tombol silang (x) di ujungnya?

Apakah ada widget seperti EditTextyang berisi tombol silang, atau apakah ada properti EditTextyang dengannya widget itu dibuat secara otomatis? Saya ingin tombol silang menghapus teks apa pun yang ditulis EditText.

Gunakan tata letak berikut:

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

Anda juga dapat menggunakan id tombol dan melakukan tindakan apa pun yang Anda inginkan pada metode onClickListener.

Jika Anda kebetulan menggunakan DroidParts , saya baru saja menambahkan ClearableEditText .

Begini tampilannya dengan latar belakang khusus & ikon hapus yang ditetapkan abs__ic_clear_holo_lightdari ActionBarSherlock :

Solusi 2020 melalui Komponen Desain Material untuk Android:

Tambahkan Komponen Bahan ke pengaturan gradle Anda:

Cari versi terbaru dari sini: https://maven.google.com/

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

atau jika Anda belum diperbarui untuk menggunakan lib AndroidX, Anda dapat menambahkannya dengan cara ini:

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

Kemudian

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

Perhatikan: app: endIconMode = "clear_text"

Seperti yang dibahas di sini, dokumen desain material

Ini adalah solusi kotlin. Masukkan metode pembantu ini di beberapa file 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
    })
}

Dan kemudian menggunakannya sebagai berikut dalam onCreatemetode dan Anda harus baik untuk pergi

yourEditText.setupClearButtonWithAction()

BTW, Anda harus menambahkan R.drawable.ic_clearatau menghapus ikon pada awalnya. Yang ini dari google- https://material.io/tools/icons/?icon=clear&style=baseline

Dukungan libarary Android memiliki SearchViewkelas yang melakukan hal ini. (Tidak diturunkan dari EditTextjadi, jadi harus menggunakan SearchView.OnQueryTextListenerbukan a TextWatcher)

Gunakan dalam XML seperti:

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

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

dimana, x adalah:

Untuk drawable resourceAnda dapat menggunakan gambar Android standar:

http://androiddrawables.com/Menu.html

Sebagai contoh :

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

Jika Anda tidak ingin menggunakan tampilan khusus atau tata letak khusus, Anda dapat menggunakan 9-patch untuk membuat tombol (X).

Contoh: http://postimg.org/image/tssjmt97p/ (Saya tidak punya cukup poin untuk memposting gambar di StackOverflow)

Perpotongan piksel hitam kanan dan bawah mewakili area konten. Apa pun di luar area itu adalah padding. Jadi untuk mendeteksi bahwa pengguna mengklik x Anda dapat mengatur OnTouchListener seperti:

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

Sesuai dengan kebutuhan Anda, solusi ini dapat bekerja lebih baik dalam beberapa kasus. Saya lebih suka menjaga agar xml saya tidak terlalu rumit. Ini juga membantu jika Anda ingin memiliki ikon di sebelah kiri, karena Anda cukup memasukkannya di patch 9.

Saya melakukan bagian UI seperti di bawah ini:

<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

Tombol Silang / Hapus sembunyikan / tampilkan:

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

Menangani barang pencarian (yaitu ketika pengguna mengklik pencarian dari papan tombol lunak)

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

Tombol hapus / silang

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

Menggunakan

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

Ini perpustakaan lengkap dengan widget: https://github.com/opprime/EditTextField

Untuk menggunakannya Anda harus menambahkan ketergantungan:

compile 'com.optimus:editTextField:0.2.0'

Di file layout.xml Anda dapat bermain dengan pengaturan widget:

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

• app: clearButtonMode ， dapat memiliki nilai seperti itu: tidak pernah selalu sementara Mengedit kecuali Mengedit

• app: clearButtonDrawable

Contoh dalam aksi:

Cukup beri tanda silang seperti drawableEndpada Anda EditText:

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

dan gunakan ekstensi untuk menangani klik (atau gunakan OnTouchListenerlangsung pada Anda 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()
                return@setOnTouchListener true
            }
        }
        return@setOnTouchListener false
    }
}

penggunaan ekstensi:

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

Anda dapat menggunakan potongan ini dengan jawaban Jaydip untuk lebih dari satu tombol. panggil saja setelah mendapatkan referensi ke ET dan Tombol Elemen. Saya menggunakan tombol vecotr sehingga Anda harus mengubah elemen Button menjadi 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);
                }
            }
        });
    }

Jika Anda berada di tata letak bingkai atau Anda dapat membuat tata letak bingkai saya mencoba pendekatan lain ....

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

Ini adalah teks edit di mana saya meletakkan ikon silang sebagai gambar yang benar dan daripada itu, saya meletakkan tombol transparan yang menghapus teks.

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