Drop shadow around all the four sides of an EditText in Android Studio
Solution 1
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.
Solution 2
<?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.
Arsal
Updated on June 04, 2022Comments
-
Arsal about 2 years
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 anEditText
<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?