How to create EditText with cross x button at end of it

Question

Is there any widget like EditText which contains a cross button  or is there any property for EditText by which it is created automatically  I want the cross button to delete whatever text written in EditText

User · Answer

Clear text    quot Text field with a clear text trailing icon  quot   If set  an icon is displayed when text is present and pressing it clears the input text              app endIconMode  quot clear text quot  gt               lt  com google android material textfield TextInputLayout gt   I leave it here  material io Example

User · Answer

You can use this snippet with Jaydip answer for more than one button  just call it after getting a reference to the ET and Button Elements  I used vecotr button so you have to change the Button element to 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  amp  amp  et getText   toString   length    gt  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

User · Answer

2020 solution via Material Design Components for Android   Add Material Components to your gradle setup   Look for latest version from here  https   maven google com   implementation  com google android material material 1 1 0    or if you havent updated to using AndroidX libs  you can add it this way   implementation  com android support design 28 0 0    Then   lt 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  gt      lt com google android material textfield TextInputEditText       android layout width  match parent        android layout height  wrap content   gt    lt  com google android material textfield TextInputLayout gt    Pay attention to  app endIconMode  clear text   As discussed here Material design docs

User · Answer

Here is complete library with the widget  https   github com opprime EditTextField  To use it you should add the dependency   compile  com optimus editTextField 0 2 0    In the layout xml file you can play with the widget settings   xmlns app  http   schemas android com apk res-auto     app clearButtonMode can has such values  never always whileEditing unlessEditing app clearButtonDrawable   Sample in action

User · Answer

Here is the simple complete solution in kotlin  This whole layout will be your search bar  lt RelativeLayout         android layout width  quot match parent quot          android layout height  quot 35dp quot          android layout margin  quot 10dp quot          android background  quot  drawable your desired drawable quot  gt            lt EditText             android id  quot   id search et quot              android layout width  quot match parent quot              android layout height  quot match parent quot              android layout alignParentStart  quot true quot              android layout toStartOf  quot  id clear btn quot              android background  quot  null quot              android hint  quot search    quot              android imeOptions  quot actionSearch quot              android inputType  quot text quot              android maxLines  quot 1 quot              android paddingStart  quot 15dp quot              android paddingEnd  quot 10dp quot    gt            lt ImageView             android id  quot   id clear btn quot              android layout width  quot 20dp quot              android layout height  quot match parent quot              android layout alignParentEnd  quot true quot              android layout centerInParent  quot true quot              android layout marginEnd  quot 15dp quot              android visibility  quot gone quot              android src  quot  drawable ic baseline clear 24 quot   gt        lt  RelativeLayout gt   Now this is the functionality of clear button  paste this code in onCreate method  search et addTextChangedListener object  TextWatcher               override fun beforeTextChanged s CharSequence  start Int  count Int  after Int                              override fun onTextChanged s CharSequence  start Int  before Int  count Int                              override fun afterTextChanged s  Editable                    if  s isNotEmpty                         clear btn visibility   VISIBLE                     clear btn setOnClickListener                           search et text clear                                          else                      clear btn visibility   GONE

User · Answer

lt 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    gt   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    gt    mSearchEditText getWidth   -           mSearchEditText getCompoundPaddingEnd                  mSearchEditText setText                          return false

User · Answer

If you are in frame layout  or you can create a frame layout I tried another approach       lt 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   gt    lt 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        gt    This is an edit text where I put a cross icon as a right drawable and than UPON it I put a transparent button which clears text

User · Answer

I did the UI part like below   lt RelativeLayout     android layout width  quot fill parent quot      android layout height  quot 50dp quot      android layout marginTop  quot 9dp quot      android padding  quot 5dp quot  gt        lt EditText         android id  quot   id etSearchToolbar quot          android layout width  quot fill parent quot          android layout height  quot match parent quot          android textSize  quot 13dp quot          android padding  quot 10dp quot          android textColor  quot  android color darker gray quot          android textStyle  quot normal quot          android hint  quot Search quot          android imeOptions  quot actionSearch quot          android inputType  quot text quot          android background  quot  drawable edittext bg quot          android maxLines  quot 1 quot    gt        lt ImageView         android id  quot   id ivClearSearchText quot          android layout width  quot wrap content quot          android layout height  quot wrap content quot          android layout centerVertical  quot true quot          android layout marginRight  quot 6dp quot          android src  quot  drawable balloon overlay close quot          android layout alignParentRight  quot true quot          android layout alignParentEnd  quot true quot    gt   lt  RelativeLayout gt   edittext bg xml  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt  -- res drawable rounded edittext focused xml -- gt   lt shape xmlns android  quot http   schemas android com apk res android quot      android padding  quot 10dp quot      android shape  quot rectangle quot   gt        lt solid android color  quot  FFFFFF quot    gt        lt stroke         android width  quot 1dp quot          android color  quot  C9C9CE quot    gt        lt corners         android bottomLeftRadius  quot 15dp quot          android bottomRightRadius  quot 15dp quot          android topLeftRadius  quot 15dp quot          android topRightRadius  quot 15dp quot    gt    lt  shape gt   balloon overlay close png Cross Clear button hide show  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    gt  0               clearSearch setVisibility View VISIBLE            else              clearSearch setVisibility View GONE                         Override     public void afterTextChanged Editable editable          Handle search stuffs  i e when user clicks search from soft key board  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    gt  0                     do search               else                    if something to do for empty edittext                            return true                    return false             Clear Cross button clearSearch setOnClickListener new View OnClickListener          Override     public void onClick View view            searchBox setText  quot  quot

User · Answer

Use   android drawableRight   android drawable ic input delete

User · Answer

If you happen to use DroidParts  I ve just added ClearableEditText   Here s what it looks like with a custom background  amp  clear icon set to abs  ic clear holo light from ActionBarSherlock

User · Answer

Just put close cross like drawableEnd in your EditText    lt EditText              android drawableEnd   drawable ic close      android drawablePadding  8dp             gt    and use extension to handle click  or use OnTouchListener directly on your EditText    fun EditText onDrawableEndClick action     - gt  Unit        setOnTouchListener   v  event - gt          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  gt    end - v compoundPaddingEnd                     action invoke                   return setOnTouchListener true                                 return setOnTouchListener false           extension usage   editText onDrawableEndClick          TODO clear action     etSearch setText

User · Answer

Android s support libarary has a SearchView class that does exactly this    Not derrived from EditText though  so have to use a SearchView OnQueryTextListener instead of a TextWatcher       Use in XML like so      lt 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    gt

User · Answer

If you don t want to use custom views or special layouts  you can use 9-patch to make the  X  button   Example  http   postimg org image tssjmt97p   I don t have enough points to post images on StackOverflow  The intersection of the right and bottom black pixels represent the content area  Anything outside of that area is padding  So to detect that the user clicked on the x you can set a OnTouchListener like so  editText setOnTouchListener new View OnTouchListener          Override     public boolean onTouch View view  MotionEvent motionEvent            if  motionEvent getAction      MotionEvent ACTION UP               if  motionEvent getX   gt  view getWidth  -view getPaddingRight                        EditText view  setText  quot  quot                                    return false             According to your needs this solution can work better in some cases  I prefer to keep my xml less complicated  This also helps if you want to have an icon on the left  as you can simply include it in the 9 patch

User · Answer

Use the following layout    lt FrameLayout     android layout width  fill parent      android layout height  wrap content      android layout marginTop  9dp      android padding  5dp  gt        lt 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    gt        lt 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    gt    lt  FrameLayout gt    You can also use the button s id and perform whatever action you want on its onClickListener method

User · Answer

For drawable resource you can use standard android images    http   androiddrawables com Menu html  For example    android background   android drawable ic menu close clear cancel

User · Answer

Drawable x   getResources   getDrawable R drawable x   x setBounds 0  0  x getIntrinsicWidth    x getIntrinsicHeight     mEditText setCompoundDrawables null  null  x  null     where  x is

User · Answer

This is a kotlin solution  Put this helper method in some kotlin 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 - gt          if  event action    MotionEvent ACTION UP                if  event rawX  gt    this right - this compoundPaddingRight                     this setText                     return OnTouchListener true                                 return OnTouchListener false            And then use it as following in the onCreate method and you should be good to go-  yourEditText setupClearButtonWithAction     BTW  you have to add R drawable ic clear or the clear icon at first  This one is from google- https   material io tools icons  icon clear amp style baseline

[android] How to create EditText with cross(x) button at end of it?

Examples related to android

Examples related to android-edittext