Android EditText and ImageButton prevent overlaying

Question

I've got FrameLayout which consists of EditText and ImageButton and looks like this:

In the code it looks like this:

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/input_field_red"
            android:hint="Message"
            android:singleLine="true"
            android:textColor="@color/dark_grey_3" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:background="@android:color/transparent"
            android:src="@drawable/cancel" />
    </FrameLayout>

Problem is, when input text becomes long enough, ImageButton overlays the text.

Is there a way to prevent this? I mustn't shorten the length of the line. It has to be match_parent. And ImageButton must be positioned on the line and aligned to right.

See http://stackoverflow.com/questions/6355096/how-to-create-edittext-with-crossx-button-at-end-of-it — Alexander Zhak, Aug 27 '14 at 13:13
the most upvoted post doesn't solve my problem. It's using almost the same attributes as I do. — user3199693, Aug 27 '14 at 13:37
Please take a look at https://github.com/yanchenko/droidparts/blob/master/droidparts/src/org/droidparts/widget/ClearableEditText.java maybe this could help you — Alexander Zhak, Aug 27 '14 at 13:46

Archit Jain · Answer 1 · 2014-08-27T13:57:27.470

Do something like this -

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/EditViewId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/input_field_red"
        android:hint="Message"
        android:layout_toLeftOf="@+id/imageViewId"
        android:singleLine="true"
        android:textColor="@color/dark_grey_3" />

    <ImageButton
        android:id="@+id/imageViewId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/EditViewId"
        android:layout_alignLeft="@+id/EditViewId"
        android:layout_gravity="right"
        android:background="@android:color/transparent"
        android:src="@drawable/cancel" />
</RelativeLayout>

This prevent it from overlapting

Another Method
There is another method to add image at right of edittext.

<EditText
        android:id="@+id/search"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_margin="4dip"
        android:layout_weight="1"
        android:background="@drawable/textfield_search1"
        android:drawableRight="@drawable/search_icon"
        android:hint="Search Anything..."
        android:padding="4dip"
        android:singleLine="true" />

and setting onClickListener for image on Right

Let's say I have an EditText editComment with a drawableRight

    editComment.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            final int DRAWABLE_LEFT = 0;
            final int DRAWABLE_TOP = 1;
            final int DRAWABLE_RIGHT = 2;
            final int DRAWABLE_BOTTOM = 3;

            if(event.getAction() == MotionEvent.ACTION_UP) {
                if(event.getX() >= (editComment.getRight() - editComment.getCompoundDrawables()[DRAWABLE_RIGHT].getBounds().width())) {
                    // your action here
                }
            }
            return false;
        }
    });

not compiled but i am sure this will work.. just have a try if not then try again i edited. — Archit Jain, Aug 27 '14 at 13:23
OK, only looking at it I can name four mistakes: 1) there's no android:toLeftOf attribute; 2) "@id/imageViewId" should be used in android:layout_toLeftOf attribute, not "@+id/imageViewId"; 3) Element with the given id should be defined before the element which uses android:layout_toLeftOf. 4) android:layout_toLeftOf is applicable to RelativeLayout, not FrameLayout — Alexander Zhak, Aug 27 '14 at 13:27
It still is not what i'm looking for because now ImageButton is not positioned on the line. I've already tried this before. — user3199693, Aug 27 '14 at 13:43

Android EditText and ImageButton prevent overlaying

1 Answers1