How to Create Edittext with Cross(X) Button at End of It

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

Use the following layout:

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="9dp"
    android:padding="5dp">

    <EditText
        android:id="@+id/calc_txt_Prise"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:inputType="numberDecimal"  
        android:layout_marginTop="20dp"
        android:textSize="25dp"
        android:textColor="@color/gray"
        android:textStyle="bold"
        android:hint="@string/calc_txt_Prise"
        android:singleLine="true" />

    <Button
        android:id="@+id/calc_clear_txt_Prise"      
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_gravity="right|center_vertical"
        android:background="@drawable/delete" />

</FrameLayout>

You can also use the button's id and perform whatever action you want on its onClickListener method.

EditText with cross(x) button at end of it

Yes there is a way to achieve this.

Define a RelativeLayout like this one.

<?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/edittext"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"/>
  <ImageButton android:id="@+id/clear"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/icon"
    android:layout_alignRight="@id/edittext"/>
</RelativeLayout>

Now what happens. The ImageButton gets drawn on top of the EditText. We set its right edge to be equal to the right edge of the EditTexts in order to get it appear on the right side.

Now you have to assign your ImageButton an OnCLickListener with if overridden method to just set the EditTexts text to a empty string like that.

EditText editText = null;
ImageButton clear = null;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.clear);

    editText = (EditText) findViewById(R.id.edittext);
    clear = (ImageButton) findViewById(R.id.clear);

    clear.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            editText.setText("");
        }
});

}

Now here we simply tell our ImageViews OnClickListener to reset our EditTexts text upon a click. Simple as that. ;)

Of course my example uses not very aesthetic images but you can fine tune the images yourself. The principle works.

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

There is a library for your need. It has cool buttons and much more.

Check out the library

How to use it :-

<com.beardedhen.androidbootstrap.BootstrapButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:text="Success"
    bootstrapbutton:bb_icon_right="fa-android"
    bootstrapbutton:bb_type="success"
/>

DrawableRight to right end of EditText or Button

Finally i was able to fix it.

I made a RTL linear layout in which i put in my EditText:

<LinearLayout
                android:layout_width="match_parent"
                android:layoutDirection="rtl"
                android:layout_height="match_parent"
                android:layout_weight="1.0"
                android:background="#00FFFFFF"
                android:orientation="vertical">

                <EditText
                    android:id="@+id/btnData"
                    android:layout_width="300dp"
                    android:layout_height="52dp"
                    android:layout_marginTop="20dp"
                    android:gravity="center_vertical|right"
                    android:background="@drawable/textfield2r"
                    android:layout_gravity="center"
                    android:drawableRight="@drawable/console"
                    android:ems="10"
                    android:text="Daten einsehen"
                    android:paddingLeft="5dp"
                    android:paddingTop="5dp"
                    android:paddingEnd="5dp"
                    android:paddingRight="5dp"
                    android:textColor="#000000"
                    android:textColorHint="#7A7A7A"
                    android:textSize="18dp" />

            </LinearLayout>

Then I changed the xml of my button background:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#EBEBEB"/>
<stroke
    android:width="1dp"
    android:color="#D30F1D"/>
<padding
    android:bottom="-1dp"
    android:left="0dp"
    android:right="-8dp"
    android:top="0dp"/>
<corners
    android:bottomLeftRadius="30dp"
    android:bottomRightRadius="30dp"
    android:topLeftRadius="30dp"
    android:topRightRadius="30dp"/>

Now everything is like i wanted it.

How to show clear button in Edit text while Editing in Android

Try with addTextChangeListener() in EditText. It will be called when user will type or remove something from EditText.

edt.addTextChangedListener(new TextWatcher() {
        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {

            // TODO Auto-generated method stub
        }

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

write your logic inside onTextChanged() or afterTextChanged(), check length of EditText data, if it is more than 0 set drawableRight.

edt.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.drawableRight, 0);

else clear drawable

edt.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);

Edit text with clear button auto hide?

just check the editText's length, when it is greater than 0 then set imageView visibility VISIBLE...otherwise INVISIBLE or GONE

 editText.addTextChangedListener(new TextWatcher() {

        @Override
        public void onTextChanged(CharSequence arg0, int arg1, int arg2,
                int arg3) {
        }

        @Override
        public void beforeTextChanged(CharSequence arg0, int arg1,
                int arg2, int arg3) {
        }

        @Override
        public void afterTextChanged(Editable name) {
            if(editText.getText().toString().lenghth()>0){
    imageView.setVisibility(View.VISIBLE);
 }else{
 imageView.setVisibility(View.INVISIBLE);
}

        }
    });

Does Android EditText has input type with clear button?

There is no internal input-type, but you can customize it to work so. This link might help you: Stack-Overflow: EditText with clear button

---

Related Topics