Android : How to put cross icon on top of the autocomplete textView

Question

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!

Answer 1

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