Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Android create custom edittext with clear button.

    @mohit.bisht
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 4.75k
    Comment on it

    In android there is no default text clear button functionality in EditText so here is a simple example of implementing text clear button in edit-text, You just have to follow instruction given below to make it in your edit-text.

    1)- First you have to create a class MyEditText.jave

    1. public class MyEditText extends EditText {
    2. private static final int MAX_LENGTH = 102;
    3.  
    4. public MyEditText(Context context, AttributeSet attrs) {
    5.     super(context, attrs);
    6.  
    7.     if (Build.VERSION.SDK&#95;INT < Build.VERSION&#95;CODES.ICE&#95;CREAM&#95;SANDWICH) {
    8.         this.setBackgroundResource(android.R.drawable.edit&#95;text);
    9.     }
    10.  
    11.     setOnEditorActionListener(new OnEditorActionListener() {
    12.         @Override
    13.         public synchronized boolean onEditorAction(TextView v,
    14.                 int actionId, KeyEvent event) {
    15.  
    16.             return false;
    17.         }
    18.     });
    19.  
    20.     String value = "";
    21.     final String viewMode = "editing";
    22.     final String viewSide = "right";
    23.     final Drawable x = getResources().getDrawable(R.drawable.cross);
    24.  
    25.     // The height will be set the same with [X] icon
    26.     //setHeight(x.getBounds().height());
    27.  
    28.     x.setBounds(0, 0, x.getIntrinsicWidth(), x.getIntrinsicHeight());
    29.     Drawable x2 = viewMode.equals("never") ? null : viewMode
    30.             .equals("always") ? x : viewMode.equals("editing") ? (value
    31.                     .equals("") ? null : x)
    32.                     : viewMode.equals("unlessEditing") ? (value.equals("") ? x
    33.                             : null) : null;
    34.                     // Display search icon in text field
    35.  
    36.  
    37.  
    38.  
    39.                     setOnTouchListener(new OnTouchListener() {
    40.                         @Override
    41.                         public boolean onTouch(View v, MotionEvent event) {
    42.                             if (getCompoundDrawables()[viewSide.equals("left") ? 0 : 2] == null) {
    43.                                 return false;
    44.                             }
    45.                             if (event.getAction() != MotionEvent.ACTION&#95;UP) {
    46.                                 return false;
    47.                             }
    48.                             // x pressed
    49.                             if ((viewSide.equals("left") && event.getX() < getPaddingLeft()
    50.                                     + x.getIntrinsicWidth())
    51.                                     || (viewSide.equals("right") && event.getX() > getWidth()
    52.                                             - getPaddingRight() - x.getIntrinsicWidth())) {
    53.                                 Drawable x3 = viewMode.equals("never") ? null : viewMode
    54.                                         .equals("always") ? x
    55.                                                 : viewMode.equals("editing") ? null : viewMode
    56.                                                         .equals("unlessEditing") ? x : null;
    57.                                 setText("");
    58.                                 setCompoundDrawables(null, null,
    59.                                         viewSide.equals("right") ? x3 : null, null);
    60.                             }
    61.                             return false;
    62.                         }
    63.                     });
    64.                     addTextChangedListener(new TextWatcher() {
    65.                         @Override
    66.                         public void onTextChanged(CharSequence s, int start, int before,
    67.                                 int count) {
    68.                             Drawable x4 = viewMode.equals("never") ? null : viewMode
    69.                                     .equals("always") ? x
    70.                                             : viewMode.equals("editing") ? (getText().toString()
    71.                                                     .equals("") ? null : x) : viewMode
    72.                                                     .equals("unlessEditing") ? (getText()
    73.                                                             .toString().equals("") ? x : null) : null;
    74.                                                     setCompoundDrawables(null, null,
    75.                                                             viewSide.equals("right") ? x4 : null, null);
    76.                         }
    77.  
    78.                         @Override
    79.                         public void afterTextChanged(Editable s) {
    80.                             if (s != null && s.length() > MAX&#95;LENGTH) {
    81.                                 setText(s.subSequence(0, MAX&#95;LENGTH));
    82.                                 setSelection(MAX&#95;LENGTH);
    83.                             }
    84.                         }
    85.  
    86.                         @Override
    87.                         public void beforeTextChanged(CharSequence s, int start, int count,
    88.                                 int after) {
    89.                         }
    90.                     });
    91.      }
    92. }

    2)- Call this class in your activity like this.

    1. MyEditText  searchEditText=(MyEditText)findViewById(R.id.search&#95;edittext);

    3)- Now you just have to make changes in your .xml file in your project.

    1.  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2. xmlns:tools="http://schemas.android.com/tools"
    3. android:layout&#95;width="match&#95;parent"
    4. android:layout&#95;height="match&#95;parent"
    5. tools:ignore="MergeRootFrame" >
    6.  
    7. <com.receiptbook.android.utility.MyEditText
    8.     android:id="@+id/search&#95;edittext"
    9.     android:layout&#95;width="fill&#95;parent"
    10.     android:layout&#95;height="50dip"
    11.     android:layout&#95;marginTop="15dip"
    12.     android:drawableLeft="@drawable/icon&#95;search"
    13.     android:inputType="textCapWords"
    14.     android:padding="15dip"
    15.     android:singleLine="true" />
    16.  
    17.  
    18.  
    19.  </RelativeLayout>

    Thats it hope you like it..:)

    Edit Text clear button custom EditText text clear Android
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: