Android 实现【按钮】 —— 渐变背景色、外边框颜色、圆角弧度、点击变色 【完整源码】

实现的效果图：

图1：

图2：

第一步：

activity_main.xml ，布局代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

   <Button
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true"
       android:layout_marginLeft="100dp"
       android:textColor="#fff"
       android:text="登录"
       android:textSize="18dp"
       android:background="@drawable/button_style"/>

</RelativeLayout>
           

第二步：

在 res/drawble 目录下新建自定义xml文件，名字为： button_style.xml

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

    <!--点击之前-->
    <item android:state_pressed="false">
        <shape android:shape="rectangle" >
            <!--设置渐变色 angle=0 从左到右渲染，angle=90从上到下渲染，angle=180 从右到左渲染，-->
            <!--startColor 为开始颜色 ，  endColor 为最终后的颜色-->
            <gradient
                android:angle="0"
                android:startColor="#0626f5"
                android:endColor="#c95669" />
            <!--设置角的弧度-->
            <!--radius 越大，按钮越圆-->
            <corners android:radius="30dp" />
            <!--设置边框以及弧度-->
            <!--width 越大边框越大越明显  ， color 设置外边框颜色-->
            <stroke
                android:width="3dp"
                android:color="#01f5a8" />
        </shape>
    </item>

    <!--点击之后-->
    <item  android:state_pressed="true">
        <shape>
            <!--点击之后的颜色-->
            <solid android:color="#06f57a"/>
            <!--设置角的弧度-->
            <!--radius 越大，按钮越圆-->
            <corners android:radius="30dp"/>
            <!--点击之后的边框-->
            <!--width 越大边框越大越明显  ， color 设置外边框颜色-->
            <stroke
                android:width="3dp"
                android:color="#f70307"/>
        </shape>
    </item>
</selector>

           

MainActivity 不用变，直接点击运行即可！

总结：

1.  渐变色
	答： 
	< gradient
    android:angle="0"				    <!--angle=0 从左到右渲染，angle=90从上到下渲染，angle=180 从右到左渲染-->
    android:startColor="#0626f5"		<!--起始颜色-->
    android:endColor="#c95669"   		<!--最终颜色-->
    
2. 弧度
	<corners android:radius="30dp" />	<!--radius 越大，按钮越圆-->

3. 外边框
	<stroke
                android:width="3dp"		<!--width 越大边框越大越明显 -->
                android:color="#01f5a8" <!--color 设置外边框颜色 -->

4. 点击变色
     <!--点击之前-->
	 <item android:state_pressed="false">
	 	...
	 	点击之前的按钮样式
	 	...
  	 </item>

     <!--点击之后-->
     <item  android:state_pressed="true">
	 	...
	 	点击之后的按钮样式
	 	...
  	 </item>