Rounded corners with layer-list multi-layer overlay effect

During the Android development process, we may make rounded effects come out as shown:

The four corners are rounded corners. It might be easier if you let the UI designer figure it out directly. But we can also do this with the Layer-list multi-layer overlay effect in Android.

We split it into three parts, the first part is the topmost line (which I call the top), the second part is the middle part (the middle part doesn't need rounded corners), the third part is the bottom.

Implementation at the top:

The top is a box with a gray border but no lower border, rounded corners, and a white background. The implementation results are as follows:

<?xml version="1.0"encoding="UTF-8"? ><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item > <shape> <solid android:color="#FFFFFF"/> <corners android:topleftradius="10DP"android:toprightradius="10DP"Android:bottomrightradius="0.1DP"android:bottomleftradius="0.1DP"/> <stroke android:width="1DP"Android:color="#ffa8abad"/> </shape> </item> <item android:top="1DP"android:left="1DP"android:right="1DP"> <shape> <solid android:color="#FFFFFF"/> <corners android:topleftradius="10DP"android:toprightradius="10DP"Android:bottomrightradius="0.1DP"android:bottomleftradius="0.1DP"/> <stroke android:width="1DP"Android:color="#ffffffff"/> </shape> </item> </layer-list>

The middle part is a white background with no rounded corners, a gray border without a lower border box. The implementation effect is as follows:

<?xml version="1.0"encoding="UTF-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <solid android:color="#FFFFFF"/> <Stroke Android:width="1DP"Android:color="#ffa8abad"/> </shape> </item> <Item Android:left="1DP"Android:right="1DP"Android:top="1DP"> <shape> <solid android:color="#FFFFFF"/> <Stroke Android:width="1DP"Android:color="#ffffffff"/> </shape> </item> </layer-list>

The bottom is a box with a bottom fillet, a white background, and a gray border, to achieve the following effect:

<?xml version="1.0"encoding="UTF-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <solid android:color="#FFFFFF"/> <corners android:topleftradius="0.1DP"android:toprightradius="0.1DP"Android:bottomrightradius="10DP"android:bottomleftradius="10DP"/> <stroke android:width="1DP"Android:color="#ffa8abad"/> </shape> </item> <item android:top="1DP"Android:bottom="1DP"android:left="1DP"android:right="1DP"> <shape> <solid android:color="#FFFFFF"/> <corners android:topleftradius="0.1DP"android:toprightradius="0.1DP"Android:bottomrightradius="10DP"android:bottomleftradius="10DP"/> <stroke android:width="1DP"Android:color="#ffffffff"/> </shape> </item></layer-list>

Rounded corners with layer-list multi-layer overlay effect