Android Button 实现渐变背景色、外边框颜色、圆角弧度、点击变色(完整源码)

实现的效果图:

图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>
	
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王睿丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值