How to add a shadow border on 4 sides of an edit text as shown in the image? Applied below code but it creates a shadow on single side only.
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#FFBDBDBD"
android:centerColor="#65FFFFFF"
android:endColor="#00FFFFFF"
/>
<stroke
android:width="1dp"
android:color="#C3C3C3" />
<corners
android:radius="5dp" />
</shape>
You can use elevation like:-
android:elevation="5dp"
elevation worked as Z-index.
You can try adding width
and color
inside the shape
tag.
It will look like this:
<stroke android:width="3dp" android:color="#bfafb2"/>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="2dp"
android:right="2dp"
android:top="2dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="@android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
First create this background drawable
with a rectangle
, round corner
and a stroke
in grey. Called background_drawable.xml
:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff"/>
<corners android:radius="5dp" />
<stroke android:width="1dp"
android:color="#C3C3C3"/>
</shape>
After that you set this as android:background=""
in your LinearLayout
and EditText
, both widgets have android:elevation="2dp"
for it's shadow on each sites matching the stroke
of the rectangle
. Here is your layout called activity_main.xml
:
<LinearLayout
android:layout_width="200dp"
android:layout_height="100dp"
android:elevation="2dp"
android:id="@+id/linear_layout"
android:background="@drawable/background_drawable"
android:layout_centerInParent="true"
android:orientation="horizontal" />
<EditText
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="@+id/edit_text"
android:elevation="2dp"
android:layout_marginTop="10dp"
android:background="@drawable/background_drawable"
android:layout_below="@+id/linear_layout"
android:layout_centerHorizontal="true"
android:padding="10dp"/>
The final result will look like this image .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.