Android : How to put cross icon on top of the autocomplete textView
10,420
Use the android:drawableLeft property on the EditText.
<EditText
...
android:drawableLeft="@drawable/my_icon" />
if you want to add the icon dynamically, use this:
EditText et = (EditText) findViewById(R.id.myET);
et.setCompoundDrawablesWithIntrinsicBounds(R.drawable.my_icon, 0, 0, 0);
To handle the click events:
String value = "";//any text you are pre-filling in the EditText
final EditText et = new EditText(this);
et.setText(value);
final Drawable x = getResources().getDrawable(R.drawable.presence_offline);//your x image, this one from standard android images looks pretty good actually
x.setBounds(0, 0, x.getIntrinsicWidth(), x.getIntrinsicHeight());
et.setCompoundDrawables(null, null, value.equals("") ? null : x, null);
et.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if (et.getCompoundDrawables()[2] == null) {
return false;
}
if (event.getAction() != MotionEvent.ACTION_UP) {
return false;
}
if (event.getX() > et.getWidth() - et.getPaddingRight() - x.getIntrinsicWidth()) {
et.setText("");
et.setCompoundDrawables(null, null, null, null);
}
return false;
}
});
et.addTextChangedListener(new TextWatcher() {
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
et.setCompoundDrawables(null, null, et.getText().toString().equals("") ? null : x, null);
}
@Override
public void afterTextChanged(Editable arg0) {
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
});
and this can also be done using a custom EditText:
Handling click events on a drawable within an EditText
![Anupam](https://i.stack.imgur.com/onuo6.jpg?s=256&g=1)
Comments
-
Anupam about 2 years
I'm facing problem in putting cross button on top of the textview. I'm using LinearLayout and it is not coming up on that, whereas on Framelayout it work but that does not solve my purpose. I'm attaching my XML for reference, please help me in overcoming this problem.
<LinearLayout android:id="@+id/top" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/phone_toolbar" android:baselineAligned="true" android:gravity="center_horizontal" android:paddingBottom="2dp" android:paddingTop="2dp" > <ImageView android:id="@+id/search_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="5dp" android:layout_marginRight="10dp" android:background="@drawable/toolbar_search_icon_phone" > </ImageView> <AutoCompleteTextView android:id="@+id/text" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginRight="10dp" android:layout_weight="2" android:background="@drawable/toolbar_phone_textfield" android:dropDownVerticalOffset="5dp" android:ems="10" android:focusable="true" android:hint="@string/hint" android:imeOptions="actionSearch" android:paddingLeft="10dp" android:paddingRight="20dp" android:singleLine="true" android:textColor="#000000" android:textSize="14sp" /> <Button android:id="@+id/clear_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|center_vertical" android:layout_marginRight="10dip" android:background="@drawable/text_clear" /> </LinearLayout>
Thank you!
-
Anupam almost 12 yearsThank you for that, but how can I track event click on that drawable. I want to clear the text present in autocomplete textview.
-
luckyhandler almost 7 yearsthere is an issue with your code. it should be setCompoundDrawablesWithIntrinsicBounds instead of et.setCompoundDrawables