Drop shadow around all the four sides of an EditTe

Question

As far as my knowledge aids me, there isn't any property to drop shadow around an EditText field, that can be set in the layout file. I searched for the problem and found solution that I've to provide a custom background xml drawable.

My drawable/background_with_shadow looks like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-lis xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/darker_gray" />
            <corners android:radius="5dp"/>
        </shape>
    </item>
    <item android:right="1dp" android:left="1dp" android:bottom="2dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

and I'm setting this property for my LinearLayout which contains an EditText

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background_with_shadow">
<EditText>
.
.
</EditText>
<LinearLayout>

However it just drops the shadow around the bottom and bottom corners. How would I do it for all the four sides and corners?

I'm trying to achieve this:

Answer 1

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

    <item>
        <shape>
            <!-- set the shadow color here -->
            <stroke
                android:width="2.5dp"
                android:color="@color/darker_gray" />

            <!-- setting the thickness of shadow (positive value will give shadow on that side) -->

            <!--Set shadow width as per your requirement -->
            <padding
                android:bottom="2dp"
                android:left="0.5dp"
                android:right="2dp"
                android:top="0.5dp" />

            <corners android:radius="2dp" />
        </shape>
    </item>

    <!--White Background -->
    <item>
        <shape>
            <solid android:color="#fff" />  
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

Set this layout as your LinearLayout background.

Answer 2

There are some better ways to get shadow around your edit text without using layer-list :

#1

Wrap your EditText in a CardView like this :

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="7dp"
    android:layout_margin="10dp"
    app:cardCornerRadius="0dp">

        <EditText
            android:id="@+id/msg_box"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:hint="Write a message"
            android:paddingLeft="5dp"
            android:paddingStart="5dp"
            android:textColorHint="#c7c7c7"
            android:textSize="15dp" />

</android.support.v7.widget.CardView>

OUTPUT :

2

Use a 9 patch as the background of your EditText :

    <EditText
        android:id="@+id/msg_box"
        android:padding="20dp"
        android:background="@drawable/shadow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:lines="5"
        android:gravity="top"
        android:hint="Enter your complaint..."
        android:textColorHint="#a7a7a7"
        android:textSize="15dp" />

OUTPUT

Read more about 9patch here.

Here's a great online tool to generate 9 patch shadow.