Add drop shadow effects to EditText Field

Question

I am trying to design an EditText Field having Shadows (bottom and right side) like this

enter image description here

tried googling & hunted many SO discussions but all are for TextView not EditText.

This is my code adding shadow to Input Text but not to TextField

<EditText android:id="@+id/txtpin" 
        android:maxLength="4" 
        android:layout_marginLeft="10dp" 
        android:layout_height="37dp" 
        android:gravity="center_horizontal" 
        android:inputType="textPassword" 
        android:longClickable="false" 
        android:layout_width="160dp" 

        android:shadowColor="@color/Black"
        android:shadowDx="1.2"
        android:shadowDy="1.2"
        android:shadowRadius="1.5" 

        android:background="@color/White">
            <requestFocus></requestFocus>
        </EditText>

I guess it needs some custom xml view in drawable but not getting exact idea. What will be the logic to achieve this.

Any help would be appreciated.

you can set background image of EditText .... A image which displays in your Question — MAC, Jun 04 '12 at 09:59
@gtumca-MAC.. ya thanks but i wanted to do with coding only btw its solved now!! — swiftBoy, Jun 04 '12 at 11:05
@RDC i tried your solution but my condition is effect should be inward. any solution for this http://stackoverflow.com/questions/19901676/effect-in-edittext-from-xml#comment29616414_19901676 — surhidamatya, Nov 12 '13 at 04:56
@sur007 I guess you should look for **Inner Shadow**, See [**This Solution**](http://stackoverflow.com/questions/6871301/is-there-a-way-to-add-inner-shadow-to-a-textview-on-android) and [**this also**](http://stackoverflow.com/questions/9469748/imageview-with-rounded-corners-and-inner-shadow) may help you. — swiftBoy, Nov 13 '13 at 11:16

swiftBoy · Accepted Answer · 2013-11-19T10:36:23.960

Well.. @Shalini's answer helped me in this way but still I got another way to achieve 2D shadow with EditText Field and I am going to share with you.

We need to create custom XML view with three layer for EditText, bottom shadow and right side shadow

Below is my code.

res/drawable/edittext_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!-- most important is order of layers -->

    <!-- Bottom right side 2dp Shadow -->
    <item >
        <shape android:shape="rectangle">
            <solid android:color="#000000" />           
        </shape>
    </item>

    <!-- Bottom 2dp Shadow -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#000000" />   
        </shape>
    </item>

    <!-- White Top color -->
    <item android:bottom="3px" android:right="3px">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />           
        </shape>
    </item> 
</layer-list>

Now we can set this shadow view to our TextField using "Background" property

like this

res/layout/main.xml

<EditText android:layout_width="wrap_content" 
            android:id="@+id/txtpin"  
            android:maxLength="4" 
            android:layout_height="37dp" 
            android:gravity="center_horizontal" 
            android:longClickable="false" 
            android:padding="2dp"

            android:inputType="textPassword|number" 
            android:password="true" 
            android:background="@drawable/edittext_shadow" 
            android:layout_weight="0.98" 
            android:layout_marginLeft="15dp">
                <requestFocus></requestFocus>
   </EditText>

and the result screen is like I have posted in question above.

Thanks to SO, sharing knowledge.

above answer is functionally correct but there is no need of 2nd item in layer-list. First item is enough for both shadows. — SohailAziz, Feb 12 '14 at 07:48

score 6 · Answer 2 · edited Nov 11 '13 at 12:31

6

This works for me..

   <EditText 
       android:layout_width="fill_parent" 
       android:shadowRadius="2"  
       android:shadowColor="#0000ff"
       android:shadowDx="2"
       android:shadowDy="4" 
       android:id="@+id/EditText01" 
       android:layout_height="wrap_content" />

Hope it helps:)

edited Nov 11 '13 at 12:31

vivek salve

991
1
9
20

answered Jun 04 '12 at 10:10

Shalini

1,733
4
17
31

20

Your solution doesn't work for me. It adds the shadow to the text(the EditText content) and not to the border of EditText component. Did I miss something? – CyberMJ Oct 02 '12 at 12:58

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

2

From Shadow Effect for a Text in Android?, perhaps you'd consider using

android:shadowColor, 
android:shadowDx,
android:shadowDy,
android:shadowRadius;

Alternatively:

setShadowLayer()

edited May 23 '17 at 12:34

Community

1
1

answered Jun 01 '12 at 13:05

Shrikant Ballal

7,067
7
41
61

this thread i have already checked (see my code) its for TextView..anyway thanx!! – swiftBoy Jun 01 '12 at 13:12
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – Gabriele Mariotti Oct 04 '15 at 18:47
3

Hi @Gabriele! Honestly, I answered this question 3 years ago wishing to earn reputation. I will edit this answer. Thank you! – Shrikant Ballal Oct 04 '15 at 19:04

Add drop shadow effects to EditText Field

3 Answers3

res/drawable/edittext_shadow.xml

res/layout/main.xml

Linked

Related