Android Custom shape for EditText

Question

I am trying to create a custom design for EditText. See the attached image below,

I am trying to achieve this using a custom shape like the one defined below.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/places_ic_search"
        android:width="30dp">
        <shape
            android:shape="rectangle"></shape>
    </item>

    <item
        android:left="30dp"
        android:drawable="@color/white">
        <shape android:shape="rectangle" >
            <gradient android:startColor="#000000" android:endColor="#FFFFFF" android:angle="90"/>
        </shape>
    </item>

</layer-list>

But the search icon is not displayed. How can I achieve this?

Thanks.

I have applied the answer by tiny sunlight and the EditBox looks like this, Search icon is no aligned to the left.

score 1 · Answer 1 · edited Jan 20 '16 at 13:41

1

I edit my answer. Edit Shape.xml as below:

Shape.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle" >
            <stroke android:width="5dp" android:color="#FF0000" />
        </shape>
    </item>

    <item
        android:left="3dp"
        android:right="3dp"
        android:top="3dp"
        android:bottom="3dp"
        >
        <shape android:shape="rectangle" >
            <stroke android:width="1dp" android:color="#FF0000" />\
            <solid android:color="#FFFFFF" />
            <corners android:radius="3dp" />
        </shape>
    </item>

    <item android:gravity="left" android:left="10dp">
        <bitmap android:src="@android:drawable/ic_menu_search" android:gravity="left">

        </bitmap>
    </item>
</layer-list>

edited Jan 20 '16 at 13:41

tiny sunlight

6,231
3
21
42

answered Jan 20 '16 at 01:36

Kae10

619
2
6
17

I edit this answer one more time. This code will display like your sample. – Kae10 Jan 20 '16 at 02:27
Use bitmap and android:gravity="left". – tiny sunlight Jan 20 '16 at 13:42
I recommend you to use android:drawableLeft.Because you can't limit size of drawable in xml.And you needn't to set a paddingLeft if you use android:drawableLeft. – tiny sunlight Jan 21 '16 at 04:43
Thank you for helpful tip :) – Kae10 Jan 21 '16 at 05:30

score 0 · Answer 2 · answered Jan 20 '16 at 01:48

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <gradient android:startColor="#FFFFFF" android:endColor="#FFFFFF" android:angle="90"/>
            <corners android:radius="3dp"></corners>
        </shape>
    </item>
    <item android:drawable="@drawable/places_ic_search"
          android:gravity="center_vertical|left"
          android:height="10dp"
          android:width="30dp">
    </item>
</layer-list>

Can you please check the edited answer, I have added the screenshot after applying your answer. The icon is not aligned properly. — Zach, Jan 20 '16 at 02:13

score 0 · Accepted Answer · answered Jan 20 '16 at 02:27

I would do it like this :

For the border part, you could do it with a drawable like you did
For the search icon, instead of trying to put it in the drawable file, why not set it in you EditText xml layout, using android:drawableLeft, you can then set padding using android:paddingLeft and android:drawablePadding

Android Custom shape for EditText

3 Answers3