I. Introduction
When customizing shadows, you need to add transparency to better achieve smooth effects, so you need to understand related knowledge. Of course, it is not limited to shadows to achieve effects, and other UI designs also involve transparency.
Two color values represent
ARGB This is the corresponding color value symbol, A stands for alpha transparency, R=RED, G=Green, B=BLUE.
<!--100% —FF-->
<!--95% — F2-->
<!--90% — E6-->
<!--85% — D9-->
<!--80% — CC-->
<!--75% — BF-->
<!--70% — B3-->
<!--65% — A6-->
<!--60% — 99-->
<!--55% — 8C-->
<!--50% — 80-->
<!--45% — 73-->
<!--40% — 66-->
<!--35% — 59-->
<!--30% — 4D-->
<!--25% — 40-->
<!--20% — 33-->
<!--15% — 26-->
<!--10% — 1A-->
<!--5% — 0D-->
<!--0% — 00-->
100% - FF means completely opaque.
When making a custom reference, it is best to add the value corresponding to A. ARGB is represented by 8-bit symbols. For example: #FFFFFFFF
Each bit symbol is a hexadecimal character, which is the value of 0-F.
Case - custom shadow effect
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<layer-list>
<item>
<shape android:shape="rectangle">
<padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
<stroke android:width="1px" android:color="#0D90A1F5"/>
<corners android:radius="@dimen/dp_32" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
<stroke android:width="1px" android:color="#1A90A1F5"/>
<corners android:radius="@dimen/dp_32" />
</shape>
</item>
</layer-list>
</item>
<item android:state_focused="false">
<layer-list>
<item>
<shape android:shape="rectangle">
<padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
<stroke android:width="1px" android:color="@color/transparent"/>
<corners android:radius="@dimen/dp_32" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" />
<stroke android:width="1px" android:color="@color/transparent"/>
<corners android:radius="@dimen/dp_32" />
</shape>
</item>
</layer-list>
</item>
</selector>
A simple shadow effect only needs to be wrapped in <layer-list><item.../></layer-list>. If a selector is added, there will be a selection effect. Of course, the more items and the smaller the stroke or padding, the layering of the shadow effect will be detailed and it is not easy to see the layering.
Throw a question :
Width=1px, padding top&bottom=1px in the stroke in the item, so what is the height of the entire item?
2px? Or 4px?
