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

Hello Friends,
I am back again with one more Android experiment. This time it is EditText. EditText is a view which is used so frequently in Android application, specially in applications which has forms which allow user to fill information of any kind.

Whenever you fill any form you must have a faced a problem (specially on mobile devices) ie. deleting the text written in EditText. You use a delete key on keyboard to delete the text, sometimes it becomes so irritating to delete the text by pressing the delete key.

So to get rid off from this irritation I have created my own custom EditText ie. ClearableEditText. This customized view contains a Button inside the EditText itself, so just on pressing this Button only once, you can clear all the text written within the EditText.

I have also added one more interesting feature to ClearableEditText view. Your clear button will be visible only when it will have text written in it otherwise it will be invisible. Isn’t it Intersting?

So here my code goes…
First XML code for customized view.

clearable_edit_text.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<EditText
android:id="@+id/clearable_edit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingRight="35dip"
/>
<Button
android:id="@+id/clearable_button_clear"
android:layout_width="30dip"
android:layout_height="30dip"
android:layout_alignParentRight="true"
android:background="@drawable/image_clear"
android:layout_centerVertical="true"
android:layout_marginRight="5dip"/>
</RelativeLayout>

For creating any custom view we must extend any existing view class. As I am creating a compound view (ie. Combination of many views) I need to extend a view that can contain many child views in it, so I have used RelativeLayout for it.
In my customized view class ie ClearableEditText I have extended RelativeLayout and override its constructors. In its constructor I have inflated a layout resource which I have created (In our case clearable_edit_text) then I have taken refereneces to each of the view it contains (ie. a EditText and a Button).

For its special features I have created two methods.

* First for deleting text written within the EditText.
clearText();
This method simply uses setText() method of EditText view to set the text to blank (“”).

* Second method the most interesting one is showHideClearButton();
This method adds a TextChangedListener to EditText.TextChangedListener takes a TextWatcher as a parameter so we can monitor the text being written in EditText.So in its  onTextChanged() method we have used our logic.

package com.ab1209.wordpress;
import com.ab1209.wordpress.R;
import android.content.Context;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RelativeLayout;
public class ClearableEditText extends RelativeLayout
{
LayoutInflater inflater = null;
EditText edit_text;
Button btn_clear;
public ClearableEditText(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
initViews();
}
public ClearableEditText(Context context, AttributeSet attrs)
{
super(context, attrs);
// TODO Auto-generated constructor stub
initViews();
}
public ClearableEditText(Context context)
{
super(context);
// TODO Auto-generated constructor stub
initViews();
}
void initViews()
{
inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.clearable_edit_text, this, true);
edit_text = (EditText) findViewById(R.id.clearable_edit);
btn_clear = (Button) findViewById(R.id.clearable_button_clear);
btn_clear.setVisibility(RelativeLayout.INVISIBLE);
clearText();
showHideClearButton();
}
void clearText()
{
btn_clear.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
// TODO Auto-generated method stub
edit_text.setText("");
}
});
}
void showHideClearButton()
{
edit_text.addTextChangedListener(new TextWatcher()
{
@Override
public void onTextChanged(CharSequence s, int start, int before, int count)
{
// TODO Auto-generated method stub
if (s.length() > 0)
btn_clear.setVisibility(RelativeLayout.VISIBLE);
else
btn_clear.setVisibility(RelativeLayout.INVISIBLE);
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after)
{
// TODO Auto-generated method stub
}
@Override
public void afterTextChanged(Editable s)
{
// TODO Auto-generated method stub
}
});
}
public Editable getText()
{
Editable text = edit_text.getText();
return text;
}
}

So now our Customized view ClearableEditText is ready now we can use it wherever we need it.

like

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.and.ab1209.ClearableEditText
android:id="@+id/edit_text_clearable"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>

I hope you will like it.

Thanks

 

Advertisements

21 thoughts on “How to create EditText with cross(x) button at end of it?

  1. Thanks,
    This is a clean and smart way to have a clear button mode.
    You should however add the following inside the EditText tag (clearable_edit_text.xml):
    android:paddingRight=”35dip”
    to prevent the content of the edittext to be written behind the drawable button if it is too long.

  2. Great job!

    It would be nice to have the same code in the second construction as the first one, in order to be able to create the object on the fly.

    And add following massive into ‘showHideClearButton’ function. So that hides the clear button when the text box lost focus.

    edit_text.setOnFocusChangeListener(new OnFocusChangeListener() {
    public void onFocusChange(View v, boolean hasFocus) {
    if (hasFocus)
    if (edit_text.getText().length() > 0)
    btn_clear.setVisibility(RelativeLayout.VISIBLE);
    else
    btn_clear.setVisibility(RelativeLayout.INVISIBLE);
    else
    btn_clear.setVisibility(RelativeLayout.INVISIBLE);
    }

    });

  3. This is really Greate………..
    But I don’t get any idea how to get text from that edit text….
    So can you help me????

    • Hi Sanjay,Thanks for your comment.Its good point you have pointed.Actually there are two ways of getting text from EditText.
      first by using your ClearableEditText object you can getText like
      clearable.edit_text.getText();

      & second is you can create a method in ClearableEditText getText() by which we can get text from EditText.

      Although I have made changes.You can see.

  4. Thanks for this article! Unfortunately, when I place this control on my layout xml file, it’s not showing up. Everything appears to compile fine though, and I don’t receive any errors. Also, is there a way to support passing a hint to the EditText?

  5. The way to set the hit programatically is by adding the following code to the ClearableEditText class…

    public void setHint(String hint)
    {
    edit_text.setHint(hint);
    }

    Then in your activity class, you can call it like this.

    edit_text_clearable.setHint(“Programatically Set Hint”);

  6. I’ve extended your control and have multiple ClearableEditText items on my Activity, but now I have come across a problem. The EditText views that I have replaced with the ClearableEditText require use of a OnClickListener or OnFocusChangeListener to set the visibility of other ClearableEditText views, so that when you click on ClearableEditText1, it calls ClearableEditText2.setVisibility(). The RelativeLayout passes the Click/Focus onto the child clearable_edit EditText, and I am not able to capture the Click/Focus in the Activity. Any ideas how to implement this?

  7. Just wanted to leave a quick (late) comment about this.

    I have used it in my app, added some setters, and it looks just like the stock Android EditText. Only now, it has a clear button (which Google should have provided anyway, of course).

    Thanks for this!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s