Android implements the gradient effect of shape attribute

1. Gradient

【1】 < gradient > is used to define gradient colors. You can define two-color gradient, three-color gradient and gradient style;

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
    android:type=["linear" | "radial" | "sweep"]    //共有3中渐变类型，线性渐变（默认）/放射渐变/扫描式渐变  
    android:angle="integer"     //渐变角度，必须为45的倍数，0为从左到右，90为从上到下  
    android:centerX="float"     //渐变中心X的相当位置，范围为0～1  
    android:centerY="float"     //渐变中心Y的相当位置，范围为0～1  
    android:startColor="color"   //渐变开始点的颜色  
    android:centerColor="color"  //渐变中间点的颜色，在开始与结束点之间  
    android:endColor="color"    //渐变结束点的颜色  
    android:gradienTradius="float"  //渐变的半径，只有当渐变类型为radial时才能使用  
    android:useLevel=["true" | "false"] />  //使用LevelListDrawable时就要设置为true。设为false时才有渐变效果 

First, there are three types of gradients: linear, radial and sweep

</shape>

2. Demo implementation effect

【1】 Linear gradient

Realization effect

Shape code

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <gradient
    android:type="linear"
    android:startColor="#ff0000"
    android:centerColor="#00ff00"
    android:endColor="#0000ff"/>
</shape>

【2】 Radioactive gradient

Realization effect

Implementation code

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <gradient
    android:type="radial"
    android:startColor="#ff0000"
    android:centerColor="#00ff00"
    android:endColor="#0000ff"
    android:gradienTradius="100"/>
</shape>

【3】 Scanning gradient

Realization effect

Implementation code

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <gradient
    android:type="sweep"
    android:startColor="#ff0000"
    android:centerColor="#00ff00"
    android:endColor="#0000ff"/>
</shape> 

【4】 The Android: angle attribute modifies the gradient angle (valid for linear gradients only)

1) Android: angle = "integer" / / the gradient angle must be a multiple of 45, 0 from left to right and 90 from top to bottom

2) The angle attribute is really only valid for linear gradients, and there is no movement in the other two gradients

Effect achieved:

Implementation code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <gradient
    android:type="linear"
    android:startColor="#ff0000"
    android:centerColor="#00ff00"
    android:endColor="#0000ff"
    android:angle="45"/>
</shape>

【5】 Android: centerx and Android: centery

1） android:centerX="0.2"，android:centerY="0.8"

2) Centerx and centery attributes are used to set the center point position of the gradient. They are valid only when the gradient type is radial gradient.

3) The type is fraction or decimal. Dimension is not accepted. The default value is 0.5, and the valid values are 0.0 ~ 1.0. Beyond this range, you will not see the gradient effect. The values of centerx and centery are actually the percentages of width and height

Realization effect

Implementation code: take the position of 20% of the width and 80% of the height as the new gradient origin

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <gradient
    android:type="sweep"
    android:startColor="#ff0000"
    android:centerColor="#00ff00"
    android:endColor="#0000ff"
    android:centerX="0.2"
    android:centerY="0.8"/>
</shape>

summary

The above is what Xiaobian introduced to you. Android realizes the gradient effect of shape attribute. I hope it will be helpful to 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!