इसके अंत में क्रॉस (x) बटन के साथ EditText कैसे बनाएं?

Question

क्या कोई विजेट है EditTextजिसमें क्रॉस बटन है, या क्या कोई संपत्ति EditTextहै जिसके द्वारा इसे स्वचालित रूप से बनाया जाता है? मैं चाहता हूं कि जो भी पाठ में लिखा गया है उसे क्रॉस बटन हटा दें EditText।

Comments

इसके लिए कोई मानक विजेट प्रतीत नहीं होता है। लेकिन आपको "android edittext clear button x" के लिए Google खोज के साथ कुछ अलग तरीके मिलते हैं। इसलिए मुझे लगता है कि "स्पष्ट बटन" वे इसे कहते हैं। इसके अलावा, एक संबंधित प्रश्न के इस उत्तर को देखें: stackoverflow.com/questions/4175398/clear-edittext-on-click/…

— HostileFork का कहना है कि SE

आप यहाँ स्रोत डाउनलोड कर सकते हैं: github.com/GhOsTTT/editTextXbutton का दिन शुभ हो

— Gökhan Musapaşaoğlu

एक और सवाल जो अनिवार्य रूप से एक डुप्लिकेट है , एंड्रॉइड में uitextfield संपत्तियों

— एलेक्स कोहेन

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

आप बटन के आईडी का भी उपयोग कर सकते हैं और इसके ऑनक्लिस्टनर विधि पर जो भी कार्रवाई चाहें कर सकते हैं।

Comments

यह करने का एक अक्षम तरीका है। यानचेन का उत्तर यौगिक आरेखों का उपयोग करने का सही तरीका है।

— अंकन सलाति

यदि आप इस समाधान को चुनते हैं और ध्यान देते हैं कि छवि बहुत अधिक खींची गई है, तो आपको शायद एक नियमित बटन के बजाय एक इमेजबटन का उपयोग करना चाहिए।

— personne3000

जबकि यह समाधान "अक्षम" है, यह नेत्रहीन उपयोगकर्ताओं के लिए बहुत अधिक सुलभ है। एक ड्रॉबल का उपयोग करना आपके उपयोगकर्ताओं को पाठ को साफ़ करने के लिए बहुत जटिल संचालन करने के लिए मजबूर करेगा - ऐसा कुछ जिसे देखकर उपयोगकर्ता एक्स बटन के साथ जल्दी कर सकते हैं।

— डैनियल मोंटेइरो

इस बारे में अक्षमता क्या है?

— डेनी

Answer 2

यदि आप DroidParts का उपयोग करते हैं , तो मैंने अभी ClearableEditText जोड़ा है ।

यहां एक कस्टम बैकग्राउंड और क्लियर आइकन सेट से क्या दिखता abs__ic_clear_holo_lightहैएक्शनब्रार्रलॉक :

Comments

सर्वश्रेष्ठ समाधान क्योंकि वर्ग का विस्तार होता है EditText। Thx @yanchenko

— tbruyelle

@stephanek। मैंने इसे विकसित शाखा में तय किया है, 1.4.3 रिलीज का हिस्सा होगा।

— यानचेन

धन्यवाद! यह वास्तव में अच्छा होगा यदि आप DroidParts में एक ClearableAutoCompleteTextView भी शामिल कर सकते हैं। अन्य उपयोगकर्ताओं के लिए भी जो ऐसा करने का प्रयास करते हैं: DroidParts लाइब्रेरी का उपयोग करें, ClearableEditText से कोड की प्रतिलिपि बनाएँ और बस AutoCompleteTextView का विस्तार करें।

— रोबिनडेरॉन

यह बम है! आप टेक्स्टवॉचर एडेप्टर निर्भरता को सामान्य टेक्स्टवॉकर के साथ बदलते हुए इसका उपयोग कर सकते हैं।

— पिमंटोसो

@yanchenko को आपके कार्यान्वयन पर एक नज़र थी। ऐसा लगता है कि स्वीकार किए गए स्पर्श क्षेत्र के बीच एक छोटा सा व्यापार होता है, बल्कि छोटे होने के साथ एक संपादित पाठ होता है और डिफ़ॉल्ट ऊंचाई की तुलना में एक बड़ा पाठ होता है जो संपादित पाठ के भीतर y अक्ष के साथ स्पर्श घटनाओं को स्वीकार करता है। आपका कार्यान्वयन पूर्व और मेरा बाद का था। ऐसी ही परिस्थितियों में क्या आप भी ऐसा ही करने की सलाह देंगे? यानी एक छोटे हिट बॉक्स के लिए जाएं जो मिस-प्रेस्ड हो सकता है या एक बड़ा हिट बॉक्स हो सकता है, जहां, एक विस्तारित या बड़े एडिट टेक्स्ट के साथ प्रेस ड्रॉबल की सीमा के बाहर अच्छी तरह से हो सकता है।

— जैक.रामडन

Answer 3

Android के लिए सामग्री डिजाइन घटकों के माध्यम से 2020 समाधान:

अपने घटक सेटअप में सामग्री घटक जोड़ें:

यहां से नवीनतम संस्करण देखें : https://maven.google.com/

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

या यदि आप AndroidX लिबास का उपयोग करने के लिए अपडेट किए गए हैं, तो आप इसे इस तरह से जोड़ सकते हैं:

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>

पर ध्यान दें: एप्लिकेशन: endIconMode = "clear_text"

जैसा कि यहां चर्चा की गई है कि सामग्री डिजाइन डॉक्स

Comments

यह नया स्वीकृत उत्तर होना चाहिए। मेरे मामले में, मैं AndroidX पुस्तकालयों को अपडेट किए बिना लागू करने में सक्षम नहीं था।

— बेन

@ बीन (अंगूठे ऊपर)

— केवोरॉइड

कृपया दस्तावेज़ीकरण के माध्यम से पढ़ना सुनिश्चित करें क्योंकि अभी तक सभी xml विशेषताएँ समर्थित नहीं हैं। आपको स्रोत के माध्यम से या संदेशों को देखना पड़ सकता है क्योंकि वे कभी-कभी ऐसे होते हैं जहां सटीक कार्यान्वयन विवरण होते हैं। मेरे पास कस्टम एंड आईकॉन के लिए इस प्रकार का मुद्दा था। एक प्रतिबद्ध संदेश से पता चला कि xml विशेषता का अभी तक कोई कार्यान्वयन नहीं हुआ था। कार्यान्वयन समाप्त होने तक एक अलग दृष्टिकोण का उपयोग करना होगा

— एम। स्मिथ

2020 में सबसे अच्छा जवाब।

— सैम चेन

app करता है: endIconMode = "clear_text" के साथ कार्यस्थान है <androidx.appcompat.widget.AppCompatEditText/>? क्या आप कृपया मेरी मदद कर सकते हैं

— Arbaz.in

Answer 4

यह एक कोटलिन समाधान है। इस हेल्पर विधि को कुछ कोटलिन फ़ाइल में डालें-

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

और फिर onCreateविधि में निम्नलिखित के रूप में उपयोग करें और आपको जाने के लिए अच्छा होना चाहिए-

yourEditText.setupClearButtonWithAction()

BTW, आपको R.drawable.ic_clearपहली बार में या स्पष्ट आइकन जोड़ना होगा । यह एक गूगल से है- https://material.io/tools/icons/?icon=clear&style=baseline

Comments

यदि आप this.clearFocus()वापसी सही विवरण से पहले सम्मिलित करते हैं, तो आप onFocusChangeश्रोता के साथ EditText कॉलर पर इस घटना को सुन सकते हैं

— जोस्ट शेपेल

बहुत अच्छा है, यह केवल एक मुद्दा है, मैं AppCompatEditText में drawable बायाँ आइकन सेट कर रहा हूँ और इसे हटा दूँगा जब मैं इस funcion को कॉल करूँगा तो कृपया मुझे बता सकते हैं कि क्या मुद्दा है?

— Arbaz.in

@ Arbaz.in यह कॉलिंग पद्धति के कारण है setCompoundDrawablesWithIntrinsicBounds(0, 0, clearIcon, 0)। आप इस फ़ंक्शन के लिए एक नई परम के रूप में बाईं ओर खींचने योग्य आइकन आईडी पास कर सकते हैं और कॉल में डाल सकते हैं।

— गुलशन

@ गुलशन मैंने अभी भी वही काम किया है जो हटाने योग्य है

— Arbaz.in

Answer 5

एंड्रॉइड के सपोर्ट लिबेररी में एक SearchViewवर्ग है जो ठीक यही करता है। ( EditTextहालांकि से वंचित नहीं है , इसलिए एक के SearchView.OnQueryTextListenerबजाय का उपयोग करना होगा TextWatcher)

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

Answer 6

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

कहाँ, x है:

Comments

फिर भी हमें एक onClickListener को सही असाइन करने की आवश्यकता है? एक त्वरित खोज ने मुझे यह दिया । लगता है कि बेहतर समाधान Framelayout एक के साथ जाना है। हालांकि धन्यवाद!

— वेनोएम

Answer 7

के लिए drawable resourceआप मानक एंड्रॉयड छवियों का उपयोग कर सकते हैं:

http://androiddrawables.com/Menu.html

उदाहरण के लिए :

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

Answer 8

यदि आप कस्टम दृश्य या विशेष लेआउट का उपयोग नहीं करना चाहते हैं, तो आप (X) बटन बनाने के लिए 9-पैच का उपयोग कर सकते हैं।

उदाहरण: 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 पैच में शामिल कर सकते हैं।

Answer 9

मैंने नीचे दिया गया UI भाग पसंद किया:

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

स्पष्ट / क्रॉस बटन

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

Answer 10

उपयोग

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

Answer 11

यहाँ विजेट के साथ पूरा पुस्तकालय है: https://github.com/opprime/EditTextField

इसका उपयोग करने के लिए आपको निर्भरता को जोड़ना चाहिए:

compile 'com.optimus:editTextField:0.2.0'

लेआउट में। Xml फ़ाइल आप विजेट सेटिंग्स के साथ खेल सकते हैं:

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

• app: clearButtonMode: के ऐसे मूल्य हो सकते हैं: कभी भी नहीं जब तक कि जब तक एडिटिंग न हो

• एप्लिकेशन: clearButtonDrawable

कार्रवाई में नमूना:

Answer 12

बस 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()
                return@setOnTouchListener true
            }
        }
        return@setOnTouchListener false
    }
}

विस्तार उपयोग:

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

Answer 13

आप एक से अधिक बटन के लिए जयदीप उत्तर के साथ इस स्निपेट का उपयोग कर सकते हैं। ईटी और बटन एलिमेंट्स का संदर्भ मिलने के बाद ही इसे कॉल करें। मैंने vecotr बटन का उपयोग किया है इसलिए आपको बटन तत्व को 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);
                }
            }
        });
    }

Answer 14

यदि आप फ्रेम लेआउट में हैं या आप एक फ्रेम लेआउट बना सकते हैं, तो मैंने एक और तरीका आजमाया ...।

<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 की तुलना में मैंने एक पारदर्शी बटन लगाया है जो पाठ को साफ़ करता है।

Answer 15

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