Add drop shadow effects to EditText Field

Question

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

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.

Solution 1

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.

Solution 2

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:)

Solution 3

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

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

Alternatively:

setShadowLayer()

Comments

[MAC]

you can set background image of EditText .... A image which displays in your Question

[swiftBoy]

@gtumca-MAC.. ya thanks but i wanted to do with coding only btw its solved now!!

[surhidamatya]

@RDC i tried your solution but my condition is effect should be inward. any solution for this stackoverflow.com/questions/19901676/…

[swiftBoy]

@sur007 I guess you should look for Inner Shadow, See This Solution and this also may help you.

[swiftBoy]

this thread i have already checked (see my code) its for TextView..anyway thanx!!

[CyberMJ]

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?

[SohailAziz]

above answer is functionally correct but there is no need of 2nd item in layer-list. First item is enough for both shadows.

[Gabriele Mariotti]

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post.

[Shrikant Ballal]

Hi @Gabriele! Honestly, I answered this question 3 years ago wishing to earn reputation. I will edit this answer. Thank you!