android drawable下自定义的xml文件各种形式汇总

最新推荐文章于 2026-06-15 11:26:36 发布

原创最新推荐文章于 2026-06-15 11:26:36 发布 · 7.5k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #xml

本文介绍如何使用XML绘制各种图形元素，包括圆形、矩形、线条等，并展示如何定制UI元素如按钮、文本视图的效果。同时，还探讨了颜色渐变、动画制作及自定义进度条的方法。

1、我们需要画一个小圆圈shape=”oval”

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/colorPrimary" />
    <corners android:topLeftRadius="10dp"
        android:topRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        />
</shape>

2、圆角textview

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#fff7f3" />
    <corners
        android:bottomLeftRadius="4dp"
        android:bottomRightRadius="4dp"
        android:topLeftRadius="4dp"
        android:topRightRadius="4dp" />
</shape>

3、按钮点击效果选择

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="@android:integer/config_shortAnimTime" android:exitFadeDuration="@android:integer/config_mediumAnimTime">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </item>
    <item android:state_focused="true">
        <shape>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
</selector>

4、checkbox选中、未选中，自定义的图片

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/cb_selected" android:state_checked="true"/>
    <item android:drawable="@mipmap/cb_selected" android:state_selected="true"/>
    <item android:drawable="@mipmap/cb_selected" android:state_pressed="true"/>
    <item android:drawable="@mipmap/cb_unselected"/>
</selector>

5、指定高度，画横线、竖线

<?xml version="1.0" encoding="utf-8"?>
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="@dimen/divider_line_height_small"/>
    <solid android:color="@color/divider"/>
</shape>


竖线：
<?xml version="1.0" encoding="utf-8"?>
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="@dimen/divider_line_height_small"/>
    <solid android:color="@color/divider"/>
</shape>

6、SVG是一种矢量图格式，是Scalable Vector Graphics三个单词的首字母缩写。在xml文件中的标签是，画出的图形可以像一般的图片资源使用

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportHeight="32.0"
        android:viewportWidth="32.0">
    <path
        android:fillColor="#666"
        android:pathData="m31.84 13.35c-0.31 0.57 -1 0.76 -1.54 0.43l-1.01 -0.61c-0.42 0.9 -0.98 1.86 -1.73 2.77l0.91 0.95c0.44 0.46 0.44 1.21 0 1.67c-0.44 0.46 -1.16 0.46 -1.6 0l-0.93 -0.97c-0.9 0.76 -2 1.43 -3.3 1.96l0.34 1.33c0.16 0.63 -0.2 1.28 -0.8 1.45c-0.6 0.17 -1.22 -0.21 -1.38 -0.84l-0.32 -1.24c-0.99 0.24 -2.08 0.41 -3.27 0.49v2.04c0 0.66 -0.5 1.2 -1.11 1.2c-0.61 0 -1.11 -0.54 -1.11 -1.2v-2.1c-1.36 -0.14 -2.56 -0.4 -3.64 -0.75l-0.38 1.52c-0.16 0.64 -0.77 1.02 -1.36 0.85c-0.59 -0.17 -0.94 -0.83 -0.78 -1.47l0.43 -1.75c-1.14 -0.59 -2.1 -1.3 -2.89 -2.06l-1.35 1.47c-0.43 0.47 -1.13 0.47 -1.57 0c-0.43 -0.47 -0.43 -1.23 0 -1.7l1.41 -1.52c-0.65 -0.92 -1.13 -1.85 -1.48 -2.72l-1.72 1.08c-0.53 0.33 -1.21 0.13 -1.51 -0.44c-0.31 -0.57 -0.12 -1.31 0.41 -1.64l1.92 -1.2c0.06 -0.04 0.13 -0.07 0.2 -0.1c-0.1 -0.45 -0.16 -0.81 -0.19 -1.07h-0.04c0 -0.07 0.01 -0.13 0.02 -0.2c-0.01 -0.13 -0.02 -0.2 -0.02 -0.2h0.07c0.15 -0.46 0.56 -0.8 1.04 -0.8c0.48 0 0.89 0.34 1.04 0.8h0.07c2.22 9.69 11.82 9.6 11.82 9.6c0 0 9.6 -0 11.82 -9.59h0.06c0.15 -0.47 0.56 -0.81 1.04 -0.81c0.49 0 0.89 0.34 1.04 0.81h0.07c0 0 -0.01 0.07 -0.02 0.2c0.01 0.06 0.02 0.13 0.02 0.19h-0.04c-0.05 0.37 -0.15 0.98 -0.36 1.74l1.32 0.8c0.54 0.33 0.73 1.05 0.41 1.62z"/>
</vector>

是不是很羡慕这些酷酷的图形，当然自己也可以去动手去做。显而易见，上面例子的重点是在PathData里面的那一大窜数字：

android:pathData="M22,16V4c0,-1.1 -0.9,-2 -2,-2H8c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.1 0.9,2 2,2h14v-2H4V6H2z" />

http://www.cnblogs.com/yuhanghzsd/p/5466846.html

7、rating bar自定义图片，空白-半星-全星

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@android:id/background"
        android:drawable="@mipmap/ic_empty_star" />

    <item
        android:id="@android:id/secondaryProgress"
        android:drawable="@mipmap/ic_half_star" />

    <item
        android:id="@android:id/progress"
        android:drawable="@mipmap/ic_star" />

</layer-list>

8、xml里面引用其他的xml

1、
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/laevatein_button_background_count_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/laevatein_button_background_count_disable" android:state_enabled="false"/>
    <item android:drawable="@drawable/laevatein_button_background_count_normal"/>
</selector>

引用1：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="6dp"/>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </item>
</layer-list>

引用2：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="6dp"/>
            <solid android:color="#bbbbbb"/>
        </shape>
    </item>
</layer-list>

引用3：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="6dp"/>
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
</layer-list>

9、button点击效果全面

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="true" android:state_focused="true" android:state_pressed="false">

        <shape>
            <solid android:color="#e0b419" />
            <corners android:radius="12dp"/>
        </shape>

    </item>

    <item android:state_enabled="true" android:state_pressed="true">

        <shape>
            <solid android:color="#e0b419" />
            <corners android:radius="12dp"/>
        </shape>
    </item>

    <item android:state_checked="true" android:state_enabled="true">
        <shape>
            <solid android:color="#e0b419" />
            <corners android:radius="12dp"/>
        </shape>
    </item>

    <item android:state_enabled="false">
        <shape>
            <solid android:color="#bbbbbb" />
            <corners android:radius="12dp"/>
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="#e0b419" />
            <corners android:radius="12dp"/>
        </shape>
    </item>
</selector>

10、颜色渐变，从某个角度开始，默认左边-右边

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

 <gradient
     android:startColor="@color/white"
     android:endColor="@color/line_shadow"
     android:angle="270"
     />
</shape>

android:angle
Integer，代表渐变颜色的角度， 0 is left to right, 90 is bottom to top. 必须是45的整数倍. 
http://blog.csdn.net/zjdyhant/article/details/46537647

11、画圆半径5dp

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="@color/red" />
    <size
        android:width="10dp"
        android:height="10dp" />
</shape>

12、声音大小动画

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@mipmap/progress_voice_01"
        android:duration="500" />
    <item
        android:drawable="@mipmap/progress_voice_02"
        android:duration="500" />
    <item
        android:drawable="@mipmap/progress_voice_03"
        android:duration="500" />
</animation-list>

13、radio button

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/radio_bt_selected" android:state_checked="true" />
    <item android:drawable="@mipmap/radio_bt_selected" android:state_selected="true" />
    <item android:drawable="@mipmap/radio_bt_selected" android:state_pressed="true" />
    <item android:drawable="@mipmap/radio_bt_unselected" />
</selector>

14、渐变色左边—右边

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:angle="0"
        android:endColor="?attr/colorPrimary"
        android:startColor="?attr/colorAccent"/>
</shape>

15、item点击变色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/grey_light" android:state_pressed="true" />
    <item android:drawable="@color/grey_light" android:state_selected="true" />
    <item android:drawable="@android:color/transparent" />

</selector>

16、progressbar 进度条和背景

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 背景  gradient是渐变,corners定义的是圆角 -->
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#00000000" />
        </shape>
    </item>

    <!-- 进度条 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:angle="0"
                    android:endColor="?attr/colorPrimary"
                    android:startColor="?attr/colorAccent"/>
            </shape>
        </clip>
    </item>

</layer-list>
使用：
   <ProgressBar
        android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        tools:progress="20"
        android:progressDrawable="@drawable/web_progressbar"
        />

17、button选中效果全面

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="true" android:state_focused="true" android:state_pressed="false">

        <shape>
            <gradient android:angle="0" android:endColor="?attr/colorPrimary" android:startColor="?attr/colorAccent" />
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
        </shape>

    </item>

    <item android:state_enabled="true" android:state_pressed="true">

        <shape>
            <gradient android:angle="0" android:endColor="@color/colorPrimaryPressed" android:startColor="@color/colorAccentPressed" />
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>

    <item android:state_checked="true" android:state_enabled="true">
        <shape>
            <gradient android:angle="0" android:endColor="@color/colorPrimaryPressed" android:startColor="@color/colorAccentPressed" />
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>

    <item android:state_enabled="false">
        <shape>
            <gradient android:angle="0" android:endColor="@color/colorPrimaryDisabled" android:startColor="@color/colorAccentDisabled" />
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>

    <item>
        <shape>
            <gradient android:angle="0" android:endColor="?attr/colorPrimary" android:startColor="?attr/colorAccent" />
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>
</selector>