How to create a shadow border inside a LinearLayout or EditText in android?

411 Views Asked by At

enter image description here

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>
3

There are 3 best solutions below

0
paras jain On

You can use elevation like :-

android:elevation="5dp"

elevation worked as Z-index.

0
Muntasir Aonik On

You can try adding width and color inside the shape tag.

It will look like this:

<stroke android:width="3dp" android:color="#bfafb2"/>
0
Ole Pannier On

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.