Text Displayed below the cross(x) button when used in EditText

Question

I have implemented EditText with cross(X) ImageView at the end of it. But my problem is when text is longer ,it's being displayed in the background of cross(x). I mean to say , text is displayed under the cross(x) button which is undesirable. I want text limited some spaces ahead of cross(x) button so that text and cross(x) don't meet at all. This is the layout :

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="4dp"
            android:layout_marginTop="12dp"
            android:layout_weight="0.84" >

            <EditText
                android:id="@+id/query_box"
                android:layout_width="fill_parent"
                android:layout_height="50dp"
                android:layout_alignParentBottom="true"
                android:layout_marginLeft="5dp"
                android:background="@drawable/editbox_background_focus_blue"
                android:imeOptions="actionGo|flagNoExtractUi"
                android:paddingLeft="14dp"
                android:textSize="25sp"
                android:singleLine="true"
                android:visibility="visible" />


           <ImageView
                android:id="@+id/clearButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignRight="@+id/query_box"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:layout_marginTop="7dp"
                android:src="@drawable/clear_button"
                android:visibility="gone" />

        </RelativeLayout>

Thanks in advance.

check this post http://stackoverflow.com/questions/3554377/handling-click-events-on-a-drawable-within-an-edittext/3581464#3581464 — Purush Pawar, Jun 07 '13 at 12:55

Ken Wolf · Answer 1 · 2013-06-07T13:44:10.677

1

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"        
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginBottom="4dp"
    android:layout_marginTop="12dp"
    android:layout_weight="0.84" >

    <EditText
        android:id="@+id/query_box"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:layout_gravity="bottom"
        android:layout_marginLeft="5dp"
        android:background="@drawable/editbox_background_focus_blue"
        android:imeOptions="actionGo|flagNoExtractUi"
        android:paddingLeft="14dp"
        android:textSize="25sp"
        android:singleLine="true"
        android:visibility="visible" />


   <ImageView
        android:id="@+id/clearButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginTop="7dp"
        android:src="@drawable/clear_button"
        />

</RelativeLayout>

edited Jun 07 '13 at 13:44

answered Jun 07 '13 at 12:53

Ken Wolf

23,133
6
63
84

it didn't work .Actually,I had tried using toRighOf ,but it did not work.Thanks anyways . – vijay Jun 07 '13 at 13:00
@vjshah I edited my answer. Make sure you have `layout_weight` set on the `EditText` – Ken Wolf Jun 07 '13 at 13:07
cross(x) button to the left of EditText with this modification .If I add alignParentRight to the ImageView ,the same problem exists. – vijay Jun 07 '13 at 13:24
How big do you want the EditText to be? full-width of screen minus the imageView? – Ken Wolf Jun 07 '13 at 13:26
Actually I want the samething you said.But I can't take fixed Width since it varies from device to device.Thus ,whatever will be the width of EditText , x% should be allocated to imageView and other (100-x)% of it should be dedicated for text. – vijay Jun 07 '13 at 13:29
I prefer to use them unless I definitely need a `RelativeLayout` - typically when I have to overlap one view with another. Things are easier to align with `LinearLayout` – Ken Wolf Jun 07 '13 at 13:36
yeah that's why I used RelativeLayout.I wanted cross(x) button inside EditText.No margin between EditText and cross(x) button,something similar to default "search bar " in android phones. – vijay Jun 07 '13 at 13:39
Oh! You should have said :) That's not in your question. Or I misunderstood. – Ken Wolf Jun 07 '13 at 13:40
sorry if I am unable to explain my question correctly.I explicity tagged it with RelativeLayout. – vijay Jun 07 '13 at 13:41

score 0 · Answer 2 · answered Jun 07 '13 at 14:20

Is this what you are looking for?

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

<EditText
        android:id="@+id/query_box"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/clearButton"
        android:layout_marginRight="8dp"/>


<ImageView
        android:id="@+id/clearButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@drawable/clear_button" />

</RelativeLayout>

The text still goes under the imageView? – Esteam Jun 07 '13 at 15:28 — Esteam, Jun 07 '13 at 15:28

Text Displayed below the cross(x) button when used in EditText

2 Answers2