Set Image on Left side of EditText in Android

Question

I am having one contact form in which I would like to add some icons to my edit text for a better look. I want to create EditText something like below.

I have EditText like below. And I got the result something like. I want the image to be absolutely on the left side as it is in the above image. I know that internally EditText is using Nine Patch image and i think that is why the result is some what different. Can anyone know how to resolve this?

<EditText
            android:id="@+id/name"
            android:layout_width="fill_parent"
            android:layout_height="51dip"
            android:hint="@string/name"
            android:inputType="text"
            android:drawableLeft="@drawable/name_icon_edittext" />

Answer 1

Instead of using android:drawableLeft="@drawable/name_icon_edittext", create separateImageView for the name_icon. This way you have more control on placing it on the layout

Note: I am assuming your layout is RelativeLayout

Answer 2

if you want to add some space between you text and image then use'drawablePadding' property in xml

android:drawablePadding="10dp"

here is complete example how to use in edittext in xml file

             <EditText
                android:id="@+id/edittext"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_left"
                android:drawablePadding="10dp" />

Answer 3

You can use android:drawablePadding="10dp" property in the xml file. There's no need to create separate imagview for the icon.

Answer 4

A bit old, but for future reference maybe:

I would do a 9-patch image myself with the appearance you want, keeping the proportions and all but the icon, so you can add it yourself (and reuse the background) with drawableLeft property of EditText. That way only the middle part of the image will be stretched but the rest will stay the same.