简体   繁体   中英

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

在此处输入图像描述

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM