Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add drop shadow effects to EditText Field

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.

like image 479
swiftBoy Avatar asked Jun 01 '12 12:06

swiftBoy


2 Answers

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.

like image 53
swiftBoy Avatar answered Sep 24 '22 08:09

swiftBoy


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

like image 21
Shalini Avatar answered Sep 23 '22 08:09

Shalini