How to put gap between Text and ImageView in EditText in android?

Question

I am using the EditText with drawableLeft property and set ImageView in Right side for ClearText. My Question is how to put gap between text and Imageview in EditText?

Please help me.

Actually I have Like this,My Screenshot is, enter image description here

Actually I want to Like this, enter image description here

Create Gap Between Text and ImageView. How it is Possible?.

My xml file is,

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

        <EditText
            android:id="@+id/edtSearch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_margin="5dip"
            android:drawableLeft="@drawable/search"
            android:drawablePadding="10dip"
            android:hint="Find"
            android:imeOptions="actionNext"
            android:inputType="text"
            android:singleLine="true" >
        </EditText>

        <ImageView
            android:id="@+id/imgSearchClear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignRight="@+id/edtSearch"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dip"
            android:contentDescription="@string/app_name"
            android:src="@drawable/clear" />
    </RelativeLayout>

why you are not use linear layout with horizontal orientation ? — duggu, Nov 07 '14 at 11:15
have a look at http://stackoverflow.com/questions/3337371/androiddrawableleft-margin-and-or-padding — Kirtan, Nov 07 '14 at 11:16
Yes ImageView Above on EditText but If write Some Text then text is not overwrite on Imageview. — Android, Nov 07 '14 at 12:10

score 2 · Accepted Answer · answered Nov 07 '14 at 11:36

2

Okay i got your Question now...you have to use Search view instead of edittext

Here is link:- Check it out

Only this is a solution of your problem

answered Nov 07 '14 at 11:36

Chingam Boy

46
3

Thanks for help me, I got Quite Solution but I have one problem that First time display only searchbox(See Screenshot 1) and click on searchbox then after display Fully Details(See Screenshot 2).See My updated Question please and guide me. – Android Nov 07 '14 at 12:06
apologies but i don't get you what you exactly want to do – Chingam Boy Nov 07 '14 at 12:22
See you My First and Second Screenshot in My Updated Question. First Display only SearchBox and Click on SearchBox then Display SearchView. and I want First Time Display SearchView. Please See Screenshot. I consider that Screenshot 2 is SearchView.If you have any problem in Question then ask me. – Android Nov 07 '14 at 12:33
when you are using search view than it just show edittext and search icon but when you click on editext inside search view and start writing than it shows cross button – Chingam Boy Nov 07 '14 at 12:51
No but in may case, I using the SearchView but Display Only Search icon and Click on Search Icon then Display Search Icon , EditText and Cross Button. Why Do this?I using your demo. Nothing Else. – Android Nov 07 '14 at 13:07

score 1 · Answer 2 · answered Nov 07 '14 at 11:44

i am using LinearLayout for this

 <LinearLayout
    android:id="@+id/linear"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:gravity="center"
    android:orientation="horizontal" >
 <EditText
        android:id="@+id/chatText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:inputType="textMultiLine"
        android:padding="8dp" />

    <ImageView
        android:id="@+id/buttonSend"
        android:layout_width="50sp"
        android:layout_height="50sp"
        android:padding="5dp"
        android:src="@drawable/ic_launcher" /> 
   </LinearLayout>

score 0 · Answer 3 · answered Nov 07 '14 at 11:22

0

Had the same problem a while ago fixed it with drawablePadding

answered Nov 07 '14 at 11:22

Doppie

95
1
8

score 0 · Answer 4 · edited Nov 07 '14 at 11:31

Hello

Use Linear layout with weight instead of Relative as m showing below:-

<LinearLayout 
      width
      hight
      orientation="horizontal">

       <EditText
            android:id="@+id/edtSearch"
            android:layout_width="0dp"
             android:layout_weight="0.8"
            android:layout_height="wrap_content"

            android:layout_margin="5dip"
            android:drawableLeft="@drawable/search"
            android:drawablePadding="10dip"
            android:hint="Find"
            android:imeOptions="actionNext"
            android:inputType="text"
            android:singleLine="true" >
        </EditText>

        <ImageView
            android:id="@+id/imgSearchClear"
            android:layout_width="0dp"
             android:layout_weight="0.8"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dip"
            android:contentDescription="@string/app_name"
            android:src="@drawable/clear" />


       </LinearLayout>

if you found any issue regarding this please let me know..i love to help you

or in relative layou you can use drawable padding

Spartacus thanks :)

I can try to implement your code but It Like this, enter image description here

and I want to Like this, enter image description here

score 0 · Answer 5 · answered Nov 07 '14 at 11:36

0

Set the right padding of EditText to the width of Clear button. Set all the dimension in dimen folder so that it will be compatible with all device sizes.

answered Nov 07 '14 at 11:36

Avinash Kumar Pankaj

1,700
2
18
27

How to put gap between Text and ImageView in EditText in android?

5 Answers5