Android样式之shape标签(基础)

Android样式之shape标签

引言

　　在Android开发中我们很多情况都是使用图片来展示相关效果，今天我就来详细介绍下Android下使用Shape来进行简单UI的开发。一方面这些是Android开发的基础，另一方面这方面的知识可以在一定程度上减少图片的使用，降低App的体积。下面我就来详细介绍Shape的相关知识。

注意点：一般用shape定义的xml文件存放在drawable目录下，若项目没有该目录则新建一个，而不要将它放到drawable-hdpi等目录中。

Shape支持的类型形状

　   rectangle: 矩形，默认的形状，可以画出直角矩形、圆角矩形、弧形等

　　oval: 椭圆形，用得比较多的是画正圆

　　line: 线形，可以画实线和虚线

　　ring: 环形，可以画环形进度条

　　下面我就依次开始介绍

1、rectangle

　　这种类型应该是我们使用的最多的类型了，一些控件的背景、布局的背景都可以使用它来完成。

　　我们来看详细的介绍：

　　solid: 设置形状填充的颜色，只有android:color一个属性

• • android:color 填充的颜色

• padding: 设置内容与形状边界的内间距，可分别设置左右上下的距离

  • android:left 左内间距
  • android:right 右内间距
  • android:top 上内间距
  • android:bottom 下内间距

• gradient: 设置形状的渐变颜色，可以是线性渐变、辐射渐变、扫描性渐变

  • android:type 渐变的类型
    • linear 线性渐变，默认的渐变类型
    • radial 放射渐变，设置该项时，android:gradientRadius也必须设置
    • sweep 扫描性渐变
  • android:startColor 渐变开始的颜色
  • android:endColor 渐变结束的颜色
  • android:centerColor 渐变中间的颜色
  • android:angle 渐变的角度，线性渐变时才有效，必须是45的倍数，0表示从左到右，90表示从下到上
  • android:centerX 渐变中心的相对X坐标，放射渐变时才有效，在0.0到1.0之间，默认为0.5，表示在正中间
  • android:centerY 渐变中心的相对X坐标，放射渐变时才有效，在0.0到1.0之间，默认为0.5，表示在正中间
  • android:gradientRadius 渐变的半径，只有渐变类型为radial时才使用
  • android:useLevel 如果为true，则可在LevelListDrawable中使用

• corners: 设置圆角，只适用于rectangle类型，可分别设置四个角不同半径的圆角，当设置的圆角半径很大时，比如200dp，就可变成弧形边了

  • android:radius 圆角半径，会被下面每个特定的圆角属性重写
  • android:topLeftRadius 左上角的半径
  • android:topRightRadius 右上角的半径
  • android:bottomLeftRadius 左下角的半径
  • android:bottomRightRadius 右下角的半径

• stroke: 设置描边，可描成实线或虚线。

  • android:color 描边的颜色
  • android:width 描边的宽度
  • android:dashWidth 设置虚线时的横线长度
  • android:dashGap 设置虚线时的横线之间的距离

　　下面我们来看一个例子：

<!-- android:shape指定形状类型，默认为rectangle -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- solid指定形状的填充色，只有android:color一个属性 -->
    <solid android:color="#4097e6" />
    <!-- padding设置内容区域离边界的间距 -->
    <padding
        android:bottom="15dp"
        android:left="15dp"
        android:right="15dp"
        android:top="15dp" />
 
    <!--渐变设置-->
    <gradient
        android:endColor="#4097e6"
        android:startColor="#FFFFFF"
        android:angle="270"
        android:type="linear" />
 
    <!-- corners设置圆角，只适用于rectangle
         数值较大时,就变成了弧边形状例如>=200时
     -->
    <corners android:radius="15dp" />
    <!-- stroke设置描边 -->
    <stroke
        android:width="2dp"
        android:color="#ff8900"
        android:dashGap="4dp"
        android:dashWidth="4dp" />
</shape>

　　效果图如下：

　　

2、oval

　　oval用来画椭圆，而在实际应用中，更多是画正圆，比如消息提示，圆形按钮等，下图是一些例子：

　　size: 设置形状默认的大小，可设置宽度和高度

• • android:width 宽度
  • android:height 高度

　　如果你使用TextView之类的设置椭圆，size默认会是View的宽度和高度。

　　下面来看一个例子：

<!--椭圆-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
 
    <!--设置图形的尺寸
        不过默认获取的还是View的宽度和高度-->
    <size android:width="60dp"
        android:height="60dp" />
 
    <solid android:color="#4097e6" />
 
    <!--渐变效果
        注意此处使用了gradientRadius这个属性值
        只有type="radial"时才有效
    -->
    <gradient
        android:endColor="#4097e6"
        android:startColor="#FFFFFF"
        android:gradientRadius="50dp"
        android:type="radial"/>
 
</shape>

　　效果图如下：

　　

3、line

　　通过Shape我们还可以设置分割线。不过一般我使用线都是直接View的。通过设置stroke我们可以设置线的样式（颜色、虚线还是实线等）。例子如下：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!-- 实际显示的线 -->
    <stroke
        android:width="1dp"
        android:color="#2F90BD"
        android:dashGap="2dp"
        android:dashWidth="4dp" />
    <!-- 形状的高度 -->
    <size android:height="4dp" />
</shape>

　　注意点：画线时，有几点特性必须要知道的：

1. 只能画水平线，画不了竖线；
2. 线的高度是通过stroke的android:width属性设置的；
3. size的android:height属性定义的是整个形状区域的高度；
4. size的height必须大于stroke的width，否则，线无法显示；
5. 线在整个形状区域中是居中显示的；
6. 线左右两边会留有空白间距，线越粗，空白越大；
7. 引用虚线的view需要添加属性android:layerType，值设为"software"，否则显示不了虚线。

4、ring

　  首先，shape根元素有些属性只适用于ring类型，先过目下这些属性吧：

• android:innerRadius  内环的半径
• android:innerRadiusRatio  浮点型，以环的宽度比率来表示内环的半径，默认为3，表示内环半径为环的宽度除以3，该值会被android:innerRadius覆盖
• android:thickness  环的厚度
• android:thicknessRatio  浮点型，以环的宽度比率来表示环的厚度，默认为9，表示环的厚度为环的宽度除以9，该值会被android:thickness覆盖
• android:useLevel  一般为false，否则可能环形无法显示，只有作为LevelListDrawable使用时才设为true

　　下面我们来看一个例子：

<!--圆环-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="100dp"
    android:thickness="20dp"
    android:useLevel="false">
 
    <!--填充色-->
    <solid android:color="#4097e6" />
 
    <!--渐变色-->
    <gradient
        android:endColor="#4097e6"
        android:startColor="#FFFFFF"
        android:type="sweep" />
 
    <!--描边会让内圆和外圆都有边框-->
    <stroke
        android:width="1dp"
        android:color="#ff8900" />
 
</shape>

　　效果图如下：

　　

使用Drawable有什么好处？

• 很方便得到一个矩形，圆，椭圆，圆环，很容易维护和修改
• 很方便实现圆角，渐变（线性渐变，径向渐变，扫描渐变）
• 代替图片作为 View 的背景，减少 apk 的体积（减少 apk 体积最明显最有效的步骤就是去掉图片）
• 大图片耗内存，使用 Drawable 节省内存，Android 本身对 Drawable 做了很好的优化（内存优化需要考虑）

什么情况下选择使用Drawable，而不是使用一张图，反之呢？

• 理论上能用 Drawable 的地方就用 Drawable
• 如果能够通过 shape 标签就能定义的几何图形就能满足需求，就不用图片来表示
• 渐变类型的背景也尽量使用 shape 来实现
• 不规则的，复杂的图形还是只能使用图片，比如要一个表示手机的图标，一个人的头像
• 有些特殊拉升效果需要使用 .9.png 图片（尽可能的小吧，越小越省内存）

shape标签能定义多少种类型的Drawable？

  shape 可以定义四种类型的几何图形，由 android:shape 属性指定

  line --> 线

  rectangle --> 矩形（圆角矩形）

  oval --> 椭圆，圆

  ring --> 圆环

  shape 可以定义边框属性

  有边框，无边框，虚线边框，实线边框

  shape 可以实现矩形圆角效果

  可以指定其中一个角或者多个角设置圆角效果

  指定圆角半径设置圆角的大小

  shape 可以实现三种渐变，由子标签 gradient 实现

  linear --> 线性渐变（水平，垂直，对角线三个渐变）

  sweep --> 扫描渐变（只支持顺时针方向，其实颜色反过来就跟逆时针一样的了）

  radial --> 径向渐变（由指定的中心点开始向外渐变，指定半径）

  xml 实现只支持三个颜色，startColor，CenterColor，endColor

  更多更详细关于 shape 的介绍请移步 Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角，渐变实现)

  由上面的组合可以定义很多 Drawable，下面依次进行介绍：

线（实线+虚线）

  

实线：line_solid.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 实线 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
    android:useLevel="true">
 
<stroke
    android:width="2dp"
    android:color="#ffff0000" />
 
</shape>

虚线：line_dashed.xml

<?xml version="1.0" encoding="utf-8"?>
<!--虚线
    设置类型会line
    需要关闭硬件加速虚线才能绘制出来，布局文件中使用的时候需要设置android:layerType="software"
    android:width 线宽，布局文件中的View的高度需要比这个值大才可以绘制出来
    android:dashWidth 每段破折线的长度
    android:dashGap="5dp"每段破折线之间的间隔-->
<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>

矩形（边框+填充）

  

矩形实线边框内部无填充：rect_solid_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 实线边框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
 
    <stroke
        android:width="2dp"
        android:color="#ffff0000" />
 
</shape>

矩形虚线边框内部无填充：rect_dashed_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 虚线边框 -->
<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>

矩形实线边框-内部填充：rect_solid_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 实线边框+内部填充 -->
<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>

矩形虚线边框-内部填充：rect_dashed_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 虚线边框+内部填充 -->
<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>

圆角矩形

  

圆角矩形-只有边框：rect_rounded_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形边框圆角 -->
<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>

圆角矩形-只有内部填充：rect_rounded_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圆角矩形 -->
<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>

圆角矩形-有边框有填充:rect_rounded_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形边框+填充 圆角 -->
<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>

圆角矩形-左边圆角为一个半圆弧：rect_rounded_left_arc.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圆角+左右两边为一个圆弧 -->
<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>

圆角矩形-左右两边都是半圆弧:rect_rounded_left_right_arc.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圆角+左右两边为一个圆弧 -->
<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>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圆角+左右两边为一个圆弧 -->
<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>

圆角矩形-圆：rect_rounded_arc.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圆角+圆出一个圆弧 -->
<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>

圆角矩形-上下两边半圆弧:rect_rounded_top_bottom_arc.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圆角+左右两边为一个圆弧 -->
<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>

渐变效果（以矩形为例）

  

垂直线性渐变：rect_gradient_linear_vertical.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形内部填充-线性垂直渐变 -->
<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" />
 
    <!-- 调整angle实现水平渐变，垂直渐变或者对角渐变 -->
    <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>

水平线性渐变:rect_gradient_linear_horizon.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形内部填充-线性水平渐变 -->
<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" />
 
    <!-- 调整angle实现水平渐变，垂直渐变或者对角渐变 -->
    <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>

对角线线性渐变：rect_gradient_linear_diagonal.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形内部填充-线性对角线渐变 -->
<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" />
 
    <!-- 调整angle实现水平渐变，垂直渐变或者对角渐变 -->
    <gradient
        android:angle="45"
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#8000ff00"
        android:endColor="#1000ff00"
        android:startColor="#ff00ff00"
        android:type="linear" />
</shape>

径向渐变：rect_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形内部填充-径向渐变,一般不用在rect上，用到圆或者椭圆上 -->
<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" />
 
    <!-- 径向渐变angle无效 -->
    <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>

扫描渐变：rect_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形内部填充-扫描渐变 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <!--如果布局中没有设置View的大小，会size设置的大小为默认值-->
    <size
        android:width="20dp"
        android:height="20dp" />
 
    <stroke
        android:width="1px"
        android:color="#ffff00ff" />
 
    <!--调整angle不能实现角度变化
        centerX,centerY是中心点的位置，这里用的是百分比值（0-1）
        在rect中gradientRadius无效-->
    <gradient
        android:angle="0"
        android:centerX="0.5"
        android:centerY="0.5"
        android:startColor="#ff00ff00"
        android:gradientRadius="20dp"
        android:type="sweep" />
</shape>

圆（边框+填充+渐变）

  

圆-边框：circle_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圆形边框 -->
<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>

圆-填充：circle_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圆形边框 + 填充 -->
<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>

圆-边框填充：circle_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圆形边框 + 填充 -->
<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>

线性渐变：circle_gradient_linear.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圆形内部填充-线性渐变 -->
<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" />
 
    <!-- angle调整渐变角度，只能是45的倍数，centerX, centerY是百分百（0-1） -->
    <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>

径向渐变：circle_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圆形内部填充-径向渐变 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">
 
    <size
        android:width="40dp"
        android:height="40dp" />
 
    <!-- centerX, centerY是百分百（0-1） -->
    <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>

扫描渐变：circle_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圆形内部填充-扫描渐变 -->
<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" />
 
    <!-- sweep类型angle,gradientRadius无效，centerX, centerY是百分百（0-1） -->
    <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>

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

  

边框：oval_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 椭圆边框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">
 
    <stroke
        android:width="2dp"
        android:color="#ffff0000" />
 
</shape>

填充：oval_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 椭圆填充-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">
 
    <solid android:color="#800000ff" />
 
</shape>

边框+填充：oval_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 椭圆边框 + 填充-->
<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>

线性渐变：oval_gradient_linear.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 椭圆内部填充-线性渐变 -->
<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>

径向渐变：oval_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 椭圆内部填充-径向渐变 -->
<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>

扫描渐变：oval_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 椭圆内部填充-扫描渐变 -->
<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>

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

  

环内填充：ring_fill.xml

<?xml version="1.0" encoding="utf-8"?><!-- 圆环 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="4"
    android:shape="ring"
    android:thicknessRatio="4"
    android:useLevel="false">
    <!--android:useLevel="false"必须是false-->
    <size
        android:width="80dp"
        android:height="80dp" />
 
    <solid android:color="#80ff0000" />
 
</shape>

圆环边框:ring_border.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圆环-仅有边框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="20dp"
    android:shape="ring"
    android:thickness="16dp"
    android:useLevel="false">
    <!--android:useLevel="false"必须是false-->
 
    <size
        android:width="80dp"
        android:height="80dp" />
 
    <stroke
        android:width="2dp"
        android:color="#ffff00ff" />
</shape>

边框+填充：ring_border_and_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圆环 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="20dp"
    android:shape="ring"
    android:thickness="16dp"
    android:useLevel="false">
    <!--android:useLevel="false"必须是false-->
 
    <size
        android:width="80dp"
        android:height="80dp" />
 
    <solid android:color="#80ff0000" />
 
    <stroke
        android:width="2dp"
        android:color="#ffff00ff" />
</shape>

线性渐变：ring_gradient_linear.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圆环-线性渐变 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="30dp"
    android:useLevel="false">
    <!--android:useLevel="false"必须是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>

径向渐变：ring_gradient_radial.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圆环-径向渐变渐变 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="30dp"
    android:useLevel="false">
    <!--android:useLevel="false"必须是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>

扫描渐变:ring_gradient_sweep.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 圆环-线性渐变 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="10dp"
    android:thickness="30dp"
    android:useLevel="false">
    <!--android:useLevel="false"必须是false-->
 
    <size
        android:width="80dp"
        android:height="80dp" />
 
    <!--扫描渐变shape不能设置角度-->
    <gradient
        android:centerColor="#80ff0000"
        android:endColor="#ffff0000"
        android:startColor="#00ff0000"
        android:type="sweep" />
 
</shape>

原文地址：浅谈Android样式开发之shape：https://www.cnblogs.com/dreamGong/p/6170770.html 

                 Android XML shape 标签使用详解：https://www.cnblogs.com/popfisher/p/6238119.html