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) i.e. 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.

To get rid off from this irritation I have created my own custom EditText i.e. 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 Interesting?

You can find the full source code at Github repo ClearableEditText.

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

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quot;
	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:layout_centerVertical="true"
	android:layout_marginRight="5dip"
	android:background="@drawable/image_clear" />
	</RelativeLayout>

view raw

clearable_edit_text.xml

hosted with ❤ by GitHub

For creating any custom view we must extend any existing view class. As I am creating a compound view (i.e. 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 i.e. ClearableEditText I have extended RelativeLayout and overridden 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 references to each of the view it contains (i.e. 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.

	public class ClearableEditText extends RelativeLayout {
	private final static String TAG = "ClearableEditText";
	private LayoutInflater inflater = null;
	private EditText edit_text;
	private Button btn_clear;
	public ClearableEditText(Context context, AttributeSet attrs, int defStyle) {
	super(context, attrs, defStyle);
	initViews();
	}
	public ClearableEditText(Context context, AttributeSet attrs) {
	super(context, attrs);
	initViews();
	}
	public ClearableEditText(Context context) {
	super(context);
	initViews();
	}
	private 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();
	}
	private void clearText() {
	btn_clear.setOnClickListener(new OnClickListener() {
	@Override
	public void onClick(View v) {
	edit_text.setText("");
	}
	});
	}
	private void showHideClearButton() {
	edit_text.addTextChangedListener(new TextWatcher() {
	@Override
	public void onTextChanged(CharSequence s, int start, int before, int count) {
	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) {
	}
	@Override
	public void afterTextChanged(Editable s) {
	}
	});
	}
	public Editable getText() {
	Editable text = edit_text.getText();
	return text;
	}
	}

view raw

ClearableEditText.java

hosted with ❤ by GitHub

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

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quot;
	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>

view raw

activity_clear_edit_text.xml

hosted with ❤ by GitHub

You can find the full source code at my Github repo ClearableEditText.

I hope you will like it.

Thanks

😍 Happy Coding 😍