Search code examples
androidxmlandroid-edittexteffectsdropshadow

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.


Solution

  • 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.