Android shape for shadow or blurred edge effects

1. How to achieve shadow or blurred edge effect:

2. It is realized through shape, specifically through layer list multi-layer stacking

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- 边 -->
 <item>
  <shape android:shape="rectangle">
   <padding
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp"
    android:top="2dp" />
   <solid android:color="#00CCCCCC" />
   <corners android:radius="8dp" />
  </shape>
 </item>
 <item>
  <shape android:shape="rectangle">
   <padding
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp"
    android:top="2dp" />
   <solid android:color="#10CCCCCC" />
   <corners android:radius="8dp" />
  </shape>
 </item>
 <item>
  <shape android:shape="rectangle">
   <padding
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp"
    android:top="2dp" />
   <solid android:color="#20CCCCCC" />
   <corners android:radius="8dp" />
  </shape>
 </item>
 <item>
  <shape android:shape="rectangle">
   <padding
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp"
    android:top="2dp" />
   <solid android:color="#30CCCCCC" />
   <corners android:radius="8dp" />
  </shape>
 </item>
 <item>
  <shape android:shape="rectangle">
   <padding
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp"
    android:top="2dp" />
   <solid android:color="#50CCCCCC" />
   <corners android:radius="8dp" />
  </shape>
 </item>

 <!-- 中心背景 -->
 <item>
  <shape android:shape="rectangle"
   android:useLevel="false">
   <!-- 实心 -->
   <solid android:color="#ffffff" />
   <corners android:radius="10dp" />
   <padding android:left="10dp"
    android:right="10dp"
    android:top="10dp"
    android:bottom="10dp"/>
  </shape>
 </item>
</layer-list>

use:

android:background="@drawable/layer_white_bg"

Top scaled: Android: Top = 2 * 5 = 10dp

summary

The above is the Android shape introduced by Xiaobian to achieve shadow or fuzzy edge effect. I hope it will help you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support to our website! If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!

The content of this article comes from the network collection of netizens. It is used as a learning reference. The copyright belongs to the original author.
THE END
分享
二维码
< <上一篇
下一篇>>