Android XML shape 标签使用详解

1.线

1.1.实线

line_solid.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
    android:useLevel="true">
<stroke
    android:width="2dp"
    android:color="#ffff0000" />
shape>

1.1.虚线

line_dashed.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
    android:useLevel="true">
    <stroke
        android:width="2dp"
        android:dashGap="5dp"
        android:dashWidth="10dp"
        android:color="#ffff0000" />
shape>

2.矩形

（边框+填充）

2.1. 矩形实线边框-内部无填充

rect_solid_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <stroke
        android:width="2dp"
        android:color="#ffff0000" />
shape>

2.2.矩形虚线边框-内部无填充

rect_dashed_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <stroke
        android:width="2dp"
        android:color="#ffff0000"
        android:dashGap="5dp"
        android:dashWidth="10dp" />
shape>

2.3.矩形实线边框-内部填充

rect_solid_border_and_fill.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <stroke
        android:width="2dp"
        android:color="#ffff0000" />
    <solid android:color="#ff00ffff" />
shape>

2.4.矩形虚线边框-内部填充

rect_dashed_border_and_fill.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <stroke
        android:width="2dp"
        android:color="#ffff0000"
        android:dashGap="5dp"
        android:dashWidth="10dp" />
    <solid android:color="#ff00ffff" />
shape>

3.圆角矩形

3.1.圆角矩形-只有边框

rect_rounded_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <size android:height="100dp"
        android:width="100dp"/>
    <stroke
        android:width="2dp"
        android:color="#ffff0000" />
    <corners android:bottomLeftRadius="2dp"
        android:bottomRightRadius="2dp"
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp" />
shape>

3.2.圆角矩形-只有内部填充

rect_rounded_fill.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <size android:height="100dp"
        android:width="100dp"/>
    <solid android:color="#8000ff00" />
    <corners android:bottomLeftRadius="2dp"
        android:bottomRightRadius="2dp"
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp" />
shape>

3.3.圆角矩形-有边框有填充

rect_rounded_border_and_fill.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <size android:height="100dp"
        android:width="100dp"/>
    <stroke
        android:width="2dp"
        android:color="#ffff0000" />
    <solid android:color="#8000ff00" />
    <corners android:bottomLeftRadius="2dp"
        android:bottomRightRadius="2dp"
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp" />
shape>

3.4.圆角矩形-左边圆角为一个半圆弧

rect_rounded_left_arc.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <size
        android:width="50dp"
        android:height="10dp" />
    <solid android:color="#8000ff00" />
    
    <corners
        android:bottomLeftRadius="20dp"
        android:topLeftRadius="20dp" />
shape>

3.5.圆角矩形-左右两边都是半圆弧

rect_rounded_left_right_arc.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <size
        android:width="50dp"
        android:height="10dp" />
    <solid android:color="#8000ff00" />
    
    <corners android:radius="20dp" />
shape>

3.6.圆角矩形-左右两边都是半圆弧-带边框

rect_rounded_left_right_arc_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <size
        android:width="50dp"
        android:height="10dp" />
    <stroke android:color="#ffff0000"
        android:width="2dp"/>
    <solid android:color="#8000ff00" />
    
    <corners android:radius="20dp" />
shape>

3.7.圆角矩形-圆

rect_rounded_arc.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <size android:height="10dp"
        android:width="10dp"/>
    <solid android:color="#8000ff00" />
    <corners android:radius="20dp" />
shape>

3.8.圆角矩形-上下两边半圆弧

rect_rounded_top_bottom_arc.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <size
        android:width="10dp"
        android:height="60dp" />
    <solid android:color="#8000ff00" />
    
    <corners android:radius="10dp" />
shape>

4.渐变效果（以矩形为例）

4.1.垂直线性渐变

rect_gradient_linear_vertical.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <size
        android:width="@dimen/shape_size"
        android:height="@dimen/shape_size" />
    <stroke
        android:width="1px"
        android:color="#ffff00ff" />
    
    <gradient
        android:angle="-45"
        android:centerX="0.5"
        android:centerY="0.4"
        android:centerColor="#8000ff00"
        android:endColor="#1000ff00"
        android:startColor="#ff00ff00"
        android:type="linear" />
shape>

4.2.水平线性渐变

rect_gradient_linear_horizon.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <size
        android:width="@dimen/shape_size"
        android:height="@dimen/shape_size" />
    <stroke
        android:width="1px"
        android:color="#ffff00ff" />
    
    <gradient
        android:angle="0"
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#8000ff00"
        android:endColor="#ff00ff00"
        android:startColor="#1000ff00"
        android:type="linear" />
shape>

4.3.对角线线性渐变

rect_gradient_linear_diagonal.xml

4.4.径向渐变

rect_gradient_radial.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <size
        android:width="@dimen/shape_size"
        android:height="@dimen/shape_size" />
    <stroke
        android:width="1px"
        android:color="#ffff00ff" />
    
    <gradient
        android:angle="0"
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="#0000ff00"
        android:endColor="#ff00ff00"
        android:gradientRadius="40dp"
        android:type="radial" />
shape>

4.5.扫描渐变

rect_gradient_sweep.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    
    <size
        android:width="20dp"
        android:height="20dp" />
    <stroke
        android:width="1px"
        android:color="#ffff00ff" />
    
    <gradient
        android:angle="0"
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="#ff00ff00"
        android:gradientRadius="20dp"
        android:type="sweep" />
shape>

5.圆（边框+填充+渐变）

5.1.圆-边框

circle_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">
    <size
        android:width="80dp"
        android:height="80dp" />
    <stroke
        android:width="2dp"
        android:color="#ffff0000" />
shape>

5.2.圆-填充

circle_fill.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">
    <size
        android:width="80dp"
        android:height="80dp" />
    <solid android:color="#800000ff" />
shape>

5.3.圆-边框填充

circle_border_and_fill.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">

    <size
        android:width="80dp"
        android:height="80dp" />

    <stroke
        android:width="2dp"
        android:color="#ffff0000" />

    <solid android:color="#800000ff" />

shape>

5.4.线性渐变

circle_gradient_linear.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">
    <size
        android:width="@dimen/shape_size"
        android:height="@dimen/shape_size" />
    
    <gradient
        android:angle="-90"
        android:centerX="0.5"
        android:centerY="0.8"
        android:centerColor="#80ff0000"
        android:endColor="#ffff0000"
        android:startColor="#00ff0000"
        android:type="linear" />
shape>

5.5.径向渐变

circle_gradient_radial.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">
    <size
        android:width="40dp"
        android:height="40dp" />
    
    <gradient
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="#ffff0000"
        android:centerColor="#80ff0000"
        android:endColor="#10ff0000"
        android:gradientRadius="30dp"
        android:type="radial" />
shape>

5.6.扫描渐变

circle_gradient_sweep.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">
    <size
        android:width="@dimen/shape_size"
        android:height="@dimen/shape_size" />
    
    <gradient
        android:centerX="0.5"
        android:centerY="0.6"
        android:startColor="#ffff0000"
        android:centerColor="#80ff0000"
        android:endColor="#20ff0000"
        android:gradientRadius="20dp"
        android:type="sweep" />
shape>

6.椭圆（边框+填充+渐变）

6.1.边框

oval_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">
    <stroke
        android:width="2dp"
        android:color="#ffff0000" />
shape>

6.2.填充

oval_fill.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">
    <solid android:color="#800000ff" />
shape>

6.3.边框+填充

oval_border_and_fill.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">
    <stroke
        android:width="2dp"
        android:color="#ffff0000" />
    <solid android:color="#800000ff" />
shape>

6.4.线性渐变

oval_gradient_linear.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true" >
    <size
        android:width="80dp"
        android:height="60dp" />
    <gradient
        android:angle="45"
        android:centerX="0.5"
        android:centerY="0.7"
        android:centerColor="#80ff0000"
        android:endColor="#ffff0000"
        android:startColor="#00ff0000"
        android:type="linear" />
shape>

6.5.径向渐变

oval_gradient_radial.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true" >
    <size
        android:width="80dp"
        android:height="60dp" />
    <gradient
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#80ff0000"
        android:endColor="#00ff0000"
        android:startColor="#ffff0000"
        android:gradientRadius="40dp"
        android:type="radial" />
shape>

6.6.扫描渐变

oval_gradient_sweep.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true" >
    <size
        android:width="80dp"
        android:height="60dp" />
    <gradient
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#80ff0000"
        android:endColor="#ffff0000"
        android:startColor="#00ff0000"
        android:type="sweep" />
shape>

7.圆环（边框+填充+渐变）

7.1.环内填充

ring_fill.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="4"
    android:shape="ring"
    android:thicknessRatio="4"
    android:useLevel="false">
    
    <size
        android:width="80dp"
        android:height="80dp" />
    <solid android:color="#80ff0000" />
shape>

7.2.圆环边框

ring_border.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="20dp"
    android:shape="ring"
    android:thickness="16dp"
    android:useLevel="false">
    
    <size
        android:width="80dp"
        android:height="80dp" />
    <stroke
        android:width="2dp"
        android:color="#ffff00ff" />
shape>

7.3.边框+填充

ring_border_and_fill.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="20dp"
    android:shape="ring"
    android:thickness="16dp"
    android:useLevel="false">
    
    <size
        android:width="80dp"
        android:height="80dp" />
    <solid android:color="#80ff0000" />
    <stroke
        android:width="2dp"
        android:color="#ffff00ff" />
shape>

7.4.线性渐变

ring_gradient_linear.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="30dp"
    android:useLevel="false">
    
    <size
        android:width="80dp"
        android:height="80dp" />
    <gradient
        android:angle="45"
        android:centerColor="#80ff0000"
        android:endColor="#ffff0000"
        android:startColor="#00ff0000"
        android:type="linear" />
shape>

7.5.径向渐变

ring_gradient_radial.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="30dp"
    android:useLevel="false">
    
    <size
        android:width="80dp"
        android:height="80dp" />
    
    <gradient
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#80ff0000"
        android:endColor="#00ff0000"
        android:startColor="#ffff0000"
        android:gradientRadius="40dp"
        android:type="radial" />
shape>

7.6.扫描渐变

ring_gradient_sweep.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="30dp"
    android:useLevel="false">
    
    <size
        android:width="80dp"
        android:height="80dp" />
    
    <gradient
        android:centerColor="#80ff0000"
        android:endColor="#ffff0000"
        android:startColor="#00ff0000"
        android:type="sweep" />
shape>