How to add icon inside EditText view in Android ?

Question

I want to add a "search" icon to appear inside an EditText in the left edge? such as search box in Facebook Android app?

marcosbeirigo · Accepted Answer · 2010-11-26T00:38:35.530

474

Use the android:drawableLeft property on the EditText.

<EditText
    ...     
    android:drawableLeft="@drawable/my_icon" />

edited Nov 26 '10 at 00:38

answered Nov 26 '10 at 00:31

marcosbeirigo

10,698
6
38
57

3

sorry for unclear question , i want to add a button , so wheni click on it , it do some action – Adham Nov 26 '10 at 00:38
21

This was just the solution I expected, given the search heading. – Thomas Ahle Dec 18 '10 at 22:35
37

Also, adjust the padding using the `drawablePadding` property. – Ryan R Jan 20 '13 at 01:17
so what should be the size of that drawable icon and in which folder should i place it? – Kalpesh Lakhani Jul 22 '14 at 06:13
2

@KalpeshLakhani : Usually the edittext and drawables should be 32dp according to the android design guidelines: http://developer.android.com/design/style/metrics-grids.html – Lee Yi Hong Jul 23 '14 at 02:39
@marcosbeirigo This didn't work for me. its filling the whole edit text in a weird way. – Eswar Jul 20 '18 at 14:10
use drawableStart for RTL support – Ahmad Shahwaiz Apr 12 '20 at 12:49

score 34 · Answer 2 · edited May 23 '17 at 12:26

34

You can set drawableLeft in the XML as suggested by marcos, but you might also want to set it programmatically - for example in response to an event. To do this use the method setCompoundDrawablesWithIntrincisBounds(int, int, int, int):

EditText editText = findViewById(R.id.myEditText);

// Set drawables for left, top, right, and bottom - send 0 for nothing
editTxt.setCompoundDrawablesWithIntrinsicBounds(R.drawable.myDrawable, 0, 0, 0);

edited May 23 '17 at 12:26

Community

1
1

answered Nov 18 '11 at 19:05

Peter Ajtai

55,701
13
120
138

This sets background to the EditText, not the icon/image at the "Left Edge" which is clearly mentioned in the question. – Paresh Mayani Nov 18 '11 at 19:09
@Paresh - which is why I deleted the answer. I have now edited to include a programmatic solution in addition to the original XML solution. – Peter Ajtai Nov 18 '11 at 19:26
1

how to programatically hide the icon ? when edit box is clicked ? – Hunt Apr 18 '12 at 05:40
1

@Hunt - Just set the coumound drawable to `null` when the view is clicked. – Peter Ajtai Apr 18 '12 at 16:55

score 31 · Answer 3 · answered Jun 30 '13 at 02:43

If you want to use Android's default drawable, you can use @android:drawable/ic_menu_search like this:

<EditText android:id="@+id/inputSearch"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:drawableLeft="@android:drawable/ic_menu_search"
    android:hint="Search product.."
    android:inputType="textVisiblePassword"/>

score 6 · Answer 4 · answered Jun 29 '16 at 22:31

6

Use :

<EditText
    ..     
    android:drawableStart="@drawable/icon" />

answered Jun 29 '16 at 22:31

Maher Abuthraa

16,698
10
75
102

score 1 · Answer 5 · edited Jun 14 '20 at 08:47

1

use android:drawbleStart propery on EditText

    <EditText
        ...     
        android:drawableStart="@drawable/my_icon" />

edited Jun 14 '20 at 08:47

answered Jun 14 '20 at 08:36

Rohit Jakhar

689
2
9
17

Nathan Schwermann · Answer 6 · 2010-11-26T01:00:41.577

0

Use a relative layout and set the button the be align left of the edit text view, and set the left padding of your text view to the size of your button. I can't think of a good way to do it without hard coding the padding :/

You can also use apk tool to sorta unzip the facebook apk and take a look at its layout files.

edited Nov 26 '10 at 01:00

answered Nov 26 '10 at 00:51

Nathan Schwermann

30,884
15
79
89

1

I would like to mention that decompilation is against the law in many countries for example in whole European Union so please be carefull :) – Paweł Byszewski Dec 05 '14 at 08:50

How to add icon inside EditText view in Android ?

6 Answers6

Linked