【Android development experience】-- How to realize the rectangular frame with shadow effect?

How to achieve a rectangular box with the following effect, which can contain text.

 1. Template

First create a new file named shape.xml under the drawable folder

code show as below:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#0a8c8c8c" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#0fd7d7d7" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#14c7c7c7" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#19c1c1c1" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#1ec6c6c6" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#23b7b7b7" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#28aeaeae" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px"  />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#2d9e9e9e" />
            <corners android:radius="12dp" />
            <padding android:bottom="5px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <corners android:radius="12dp" />
            <gradient
                android:angle="0"
                android:startColor="@color/grey"
                android:endColor="@color/grey"/>
        </shape>
    </item>
</layer-list>

Then use it in the xml file of the page, the code reference is as follows:

 <LinearLayout
                    android:layout_width="350dp"
                    android:layout_height="wrap_content"
                    android:background="@drawable/shape"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:padding="20sp"
                    android:paddingLeft="30sp">

...................

</LinearLayout>

2. Example code

A shadow box that achieves the following effects

 

shapefiles are the same as templates,

The layout file, the code is as follows: (If there is no text, it is because I am using the data imported from the database here, you can manually increase the static data)

<!--矩形框-->
                <LinearLayout
                    android:layout_width="350dp"
                    android:layout_height="wrap_content"
                    android:background="@drawable/shape"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:padding="20sp"
                    android:paddingLeft="30sp">
<!--左边文本-->
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="8"
                        android:orientation="vertical">

                        <TextView
                            android:id="@+id/text"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textSize="16sp" />
                    </LinearLayout>
<!--右边完成状态-->
                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="3"
                        android:layout_gravity="center_vertical">
                        <TextView
                            android:id="@+id/status"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="2"
                            android:textSize="16sp" />
                        <ImageView
                            android:id="@+id/status_image"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1" />
                    </LinearLayout>


                </LinearLayout>