【安卓】1.修改按钮样式之圆角按钮+按钮图标(保姆级图文+附示例+api例程)


欢迎关注 『安卓』 系列,持续更新中
欢迎关注 『安卓』 系列,持续更新中
【1.修改按钮样式之圆角按钮+按钮图标(保姆级图文+附示例+api例程)】
【2.修改app名、图标、主题风格(保姆级图文+附示例+api例程)】
【3.修改列表增加下划线样式(保姆级图文+附示例)】
【4.修改SeekBar样式进度条样式(保姆级图文+附示例)】
【5.关于音乐播放器的按钮动态效果修改】
【更多内容敬请期待】

美化按钮样式分为两步

  • 按钮图标
    可以在阿里图标库寻找合适的按钮图片下载使用
  • 按钮形状
    圆角按钮需要使用自定义的xml样式模板

1.按钮图标

1.1获取按钮图标文件

你可以自己找自己喜欢的图标,不一定用我的。
介绍下载方法的博客 https://blog.csdn.net/u011027547/article/details/122379520

这里我给出我用的几个按钮来自 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=10812
辛苦的给你打包好了,直接下载 https://download.csdn.net/download/u011027547/74908220

  1. next.png在这里插入图片描述
  2. play.png在这里插入图片描述
  3. previous.png在这里插入图片描述
  4. stop.png在这里插入图片描述
  5. clear_cancel.png在这里插入图片描述

下载得到的图标文件放在main/res/drawable文件下
在这里插入图片描述

1.2 按钮图标API说明:

app:srcCompat=“参数”
app:srcCompat="@drawable/previous"

  • 参数:填写按钮自定义的图标图片名,不需要加上.png等文件后缀

1.3 按钮图标基本例程

这里以改动一个img_prev按钮为例子

基础版原来的代码:

<ImageButton
                android:id="@+id/img_prev"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="@drawable/new_button_style"
                app:srcCompat="@android:drawable/ic_media_previous" />

修改后的代码

 <ImageButton
                android:id="@+id/img_prev"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="@drawable/new_button_style"
                app:srcCompat="@drawable/previous" />

2.按钮样式文件

也可以访问另一个博客观看 https://blog.csdn.net/u011027547/article/details/122382014

2.1 new_button_style.xml

在main/res/drawable文件夹下新建new_button_style.xml样式文件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

    <!--1、圆角 和 按下后背景变颜色-->
    <item android:state_pressed="false"><!-- 按钮未点击-->
        <shape>
            <stroke android:width="3dp" android:color="@color/Purple" /><!-- 边框颜色,边框大小-->
            <solid android:color="@color/touming" /> <!-- 填充的颜色:这里设置背景透明 -->
            <corners android:radius="50dp" /><!-- android:radius 弧形的半径 -->
            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
        </shape>
    </item>

    <item android:state_pressed="true"> <!-- 按钮选中状态-->
        <shape>
            <stroke android:width="3dp" android:color="@color/red" /><!-- 边框颜色,边框大小-->
            <solid android:color="@color/green" /> <!-- 填充的颜色:这里设置背景透明 -->
            <corners android:radius="50dp" /><!-- android:radius 弧形的半径 -->
            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
        </shape>
    </item>
</selector>

2.2 color.xml

颜色文件values/color.html
在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="orange">#FFC107</color>
    <color name="yellow">#f5d14b</color>
    <color name="red">#e66eb8</color>
    <color name="green">#6bd669</color>
    <color name="blue">#3d68ce</color>
    <color name="Purple">#7e55fc</color>
    <color name="touming">#11512124</color>

</resources>

在这里插入图片描述


2.3 按钮样式API说明:

android:background=“参数”
android:background="@drawable/new_button_style"

  • 参数:填写按钮自定义的样式名

2.4 按钮样式基本例程

这里以改动一个img_prev按钮为例子

基础版原来的代码:

<ImageButton
                android:id="@+id/img_prev"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="@android:color/holo_blue_light"
                app:srcCompat="@android:drawable/ic_media_previous" />

修改后代码示例

            <ImageButton
                android:id="@+id/img_prev"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="@drawable/new_button_style"
                app:srcCompat="@drawable/previous" />

修改后的效果,出现了圆角图标
在这里插入图片描述


完整修改例程

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.5"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageButton
                android:id="@+id/img_prev"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="@drawable/new_button_style"
                app:srcCompat="@drawable/previous" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageButton
                android:id="@+id/img_play"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="@drawable/new_button_style"
                app:srcCompat="@drawable/play" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageButton
                android:id="@+id/img_stop"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="@drawable/new_button_style"
                app:srcCompat="@drawable/clear_cancel"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageButton
                android:id="@+id/img_next"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="@drawable/new_button_style"
                app:srcCompat="@drawable/next" />
        </LinearLayout>
    </LinearLayout>

总结

大家喜欢的话,给个👍,点个关注!继续跟大家分享敲代码过程中遇到的问题!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2022 mzh

Crated:2022-1-8

欢迎关注 『安卓』 系列,持续更新中
欢迎关注 『安卓』 系列,持续更新中
【更多内容敬请期待】


  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

发现你走远了

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

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

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

打赏作者

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

抵扣说明:

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

余额充值