How to clear an edittext by cross button in the right side dynamically .

In this tutorial we are creating an EditText with simple cross image now we are setting up addTextChangedListener() method on edittext so before start typing inside edittext the cross image button will be hidden and when app user starts typing they the button become visible. So here  is the complete step by step tutorial for Create EditText with cross(x) button at end of it in android.

Note : Please download the cross icon from below and put inside drawable-hdpi folder.

This is the cross icon :

How to Create EditText with cross(x) button at end of it in android.

Code for MainActivity.java file.

 package com.createedittextwithcross_android_examples.com;

import android.app.Activity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;


public class MainActivity extends Activity {

 ImageView imageview;
 EditText edittext;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 imageview = (ImageView)findViewById(R.id.imageView1);
 edittext = (EditText)findViewById(R.id.editText1);
 
 //Hiding cross button before start typing on EditText.
 imageview.setVisibility(View.GONE);
 
 edittext.addTextChangedListener(new TextWatcher() {
 
 @Override
 public void onTextChanged(CharSequence s, int start, int before, int count) {
 // TODO Auto-generated method stub
 
 //Show cross button after start typing.
 imageview.setVisibility(View.VISIBLE);
 
 }
 
 @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
 
 }
 });
 
 imageview.setOnClickListener(new View.OnClickListener() {
 
 @Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 
 edittext.getText().clear();
 
 }
 });
 
 }
}

Code for activity_main.xml layout file.

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.createedittextwithcross_android_examples.com.MainActivity" >

 <RelativeLayout
 android:layout_width="fill_parent"
 android:layout_height="50dp"
 android:layout_margin="30dp"
 android:background="@layout/background_style" >

 <ImageView
 android:id="@+id/imageView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_toRightOf="@+id/editText1"
 android:src="@drawable/cross_icon"
 android:layout_marginBottom="7dp" />

 <EditText
 android:id="@+id/editText1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_alignParentLeft="true"
 android:background="@null"
 android:ems="10"
 android:layout_marginBottom="14dp"
 android:layout_marginLeft="4dp"
 android:hint="TYPE HERE" >

 <requestFocus />
 </EditText>
 
 </RelativeLayout>
</RelativeLayout>

Code for background_style.xml file.

  <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
 <shape android:shape="rectangle">
 <solid android:color="#ffffff"/>
 <corners android:radius="10dp" />
 <stroke
 android:width="2dp"
 android:color="#3bbdfa"
 />
 </shape>
</item>
</selector>

Screenshots: