How to put inner fading like shadow in edittext?

2.8k Views Asked by At

I am trying to create a fading like shadow inside the inner boundary of an EditText. Here is what i have achieved :- enter image description here

These xml's I have used for both EditText, but let's focus on the above only :-

username_shape.xml

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

        <corners
            android:topLeftRadius="7dp"
            android:topRightRadius="7dp" />
    </shape>
</item>

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

        <corners
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp" />
    </shape>
</item>

password_shape.xml

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

            <corners
                android:bottomLeftRadius="7dp"
                android:bottomRightRadius="7dp" />
        </shape>
    </item>

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

            <corners
                android:bottomLeftRadius="10dp"
                android:bottomRightRadius="10dp" />
        </shape>
    </item>

</layer-list>

I want to achieve something like in the image below. Please notice the inner shadow(Don't mind the blue background). It is fading sort of. This is what i want to achieve. enter image description here

1

There are 1 best solutions below

0
On

Even though this question is nearly a year old, I am looking for something similar and still cannot find an example of a 'fading' shadow. The closest I have come to is apply a gradient for the item being used for the shadow, something like

  <item>
    <shape android:shape="rectangle" >
        <gradient
        android:startColor="#ef4444"
        android:endColor="#992f2f"
        android:angle="270" />

        <corners
            android:bottomLeftRadius="7dp"
            android:bottomRightRadius="7dp" />
    </shape>
</item>

I know this still does not achieve the result you are looking for, but someone might get inspired of how to solve using the gradient property.