Android EditText with cancel button.

In this blog i ll show you how to make a custom EditText with cancel button. This is an inbuilt feature in Iphone.

Screen 1) This is an Custom EditText. Until unless you will not type some thing then cancel button will not visible.

Screen 2) Now you can see that once you type some thing then cancel button is become visible.
You can delete all the text by clicking cancel button.

Screen 3) Now how to get the data from this Custom EditText. I used Toast to show the value on Button Click event.

In order to achieve this, follow the following steps.

Step 1) create a layout named as "clearable_edit_text" in layout folder.

<?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"
    android:layout_margin="20dp" >

    <EditText
        android:id="@+id/clearable_edit"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:background="@android:drawable/editbox_dropdown_light_frame"
        android:gravity="right"
        android:imeOptions="actionDone"
        android:inputType="numberDecimal"
        android:maxLength="13"
        android:paddingBottom="10dp"
        android:paddingLeft="75dp"
        android:paddingRight="45dip"
        android:paddingTop="10dp"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/symbol"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_margin="15dp"
        android:gravity="center_vertical"
        android:textSize="16sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/clearable_button_clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="5dip"
        android:background="@drawable/close" />

</RelativeLayout>

Step 2) Create a package "com.amit.custonview" and create a class called "ClearableEditText"

package com.amit.custonview;

import java.util.Currency;
import java.util.Locale;
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;
import android.widget.TextView;
import com.amit.edittext.R;

public class ClearableEditText extends RelativeLayout
{
    private LayoutInflater inflater = null;
    private EditText edit_text;
    private Button btn_clear;
    private TextView currency_symbol;

    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();
    }

    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);
        currency_symbol=(TextView)findViewById(R.id.symbol);
        currency_symbol.setText(getsymbol());
        btn_clear = (Button) findViewById(R.id.clearable_button_clear);
        btn_clear.setVisibility(RelativeLayout.INVISIBLE);
        clearText();
        showHideClearButton();
    }

    void clearText()
    {
        btn_clear.setOnClickListener(new OnClickListener()
        {
            public void onClick(View v)
            {
                edit_text.setText("");
            }
        });
    }

    void showHideClearButton()
    {
        edit_text.addTextChangedListener(new TextWatcher()
        {

            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);
            }

            public void beforeTextChanged(CharSequence s, int start, int count, int after)
            {

            }

            public void afterTextChanged(Editable s)
            {

            }
        });
    }

    public Editable getText()
    {
        Editable text = edit_text.getText();
        return text;
    }
   
    /** Method for getting device selected Currency code and Symbol accoeding to the country */
   
    private String getsymbol()
    {
         String locale_language = getResources().getConfiguration().locale.getLanguage();
         String local_country=getResources().getConfiguration().locale.getCountry();
         Locale locale=new Locale(locale_language, local_country);
         Currency currency=Currency.getInstance(locale);
         String symbol = currency.getSymbol();
         String cur_name=currency.getCurrencyCode();
        return cur_name+"   "+symbol;
       
    }
}

Step 3) Now how to use this custom view in our activity_main.xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
                                                                          

    <com.amit.custonview.ClearableEditText      
        android:id="@+id/edit_text_clearable"     
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/butSubmit"
        android:text="@string/but_click"
        android:textColor="@android:color/black"
        android:layout_margin="20dp"
        android:textStyle="bold" />

</LinearLayout>


Step 4) Now how to show the entered value from CustomEditText.
In ClearableEditText.java class there is a method called

public Editable getText()
    {
        Editable text = edit_text.getText();
        return text;
    }

/** Using this line of code in Activity class we can get the value.
ClearableEditText clearedittext=new ClearableEditText();
 String value=clearedittext.getText().toString();


Step 5) Full implementation of retrieving value is given in class called "MainActivity"

package com.amit.edittext;

import com.amit.custonview.ClearableEditText;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener{
    private ClearableEditText clearEditText;
    private Button clickhere;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        clearEditText=(ClearableEditText)findViewById(R.id.edit_text_clearable);
        clickhere=(Button)findViewById(R.id.butSubmit);
       
        clickhere.setOnClickListener(this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

    @Override
    public void onClick(View v) {
        Toast.makeText(this, clearEditText.getText().toString(), Toast.LENGTH_LONG).show();
    }

}

strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">EditTextWidCancel</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="but_click">Click to retrieve value</string>
</resources>

Download Full Source Code Here