Android圆形水波纹按钮的实现(Ripple)

Android中的Ripple效果深度解析与实现指南 - 使用主题色 -->-- 非波纹状态下的背景 --></shape></item></ripple>样式资源效果特点适用场景?有界波纹,保持视图形状列表项、卡片?无界波纹,超出视图边界浮动按钮、图标?工具栏专用波纹ActionBar按钮XML属性对应方法效果控制setColor()波纹主色调波纹最大半径setMask()限制波纹形状-- 圆形按钮的Ripple --></shape></item></ripple> 阅读详情

在Android中,谷歌已经提供了对于按钮水波纹效果的一个实现。在组件的中添加以下代码即可实现:

超出组件边框(但不超出父类视图),此时水波纹效果为圆形:

android:background="?android:attr/selectableItemBackgroundBorderless"

不超出组件边框,水波纹效果为组件的形状:

android:background="?android:attr/selectableItemBackground"

然而,这些效果并不一定符合我们的需求。比如,我们需要在不超出组件边框的情况下实现圆形水波纹效果,用上面两种实现方式效果分别如下:


可以看出这种实现方式达不到我们所需求的效果。这时候,我们可以使用Ripple来实现我们对应的需求。

在res/drawable中创建对应的xml文件(此处实例为button_ripple.xml):

代码如下:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/holo_green_light">
    <item>
        <shape android:shape="oval">
            <solid android:color="#aacccccc"/>
        </shape>
    </item>
</ripple>

<ripple>标签内的color属性是必须写上的,这个颜色值为水波纹的效果颜色;<item>标签中利用<shape>标签的shape属性设置所需的形状,<solid>标签中的颜色属性对应按钮背景色。

在组件的background属性中使用:

<ImageButton
        android:background="@drawable/button_ripple"
        android:layout_centerInParent="true"
        android:src="@drawable/play_btton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

最终效果如下:



Android Ripple 按钮水波纹效果(二)优化 上一篇中我们讲了自定义ripple 水波纹效果,先来回顾一下效果吧! 看了以后感觉没甚么问题,我一开始也觉得很满意了,那好,我们拿Android 5.0自带的效果来对比一下 发现了不同之处没?点击中间的时候是看不出什么区别,但是点击两边的时候,就很明显了,我们自定义的效果,波纹向两边同速度的扩散,所以就会出现,如果点击点不在中心的时候,距离短的一边波纹先到达,而距离长的一边后到达,不能同时到达边 阅读详情

相关推荐

android 水波纹效果button_Android Ripple 按钮水波纹效果(二)优化

上一篇中我们讲了自定义ripple 水波纹效果,先来回顾一下效果吧!看了以后感觉没甚么问题,我一开始也觉得很满意了,那好,我们拿Android 5.0自带的效果来对比一下发现了不同之处没?点击中间的时候是看不出什么区别,但是点击两边的时候,就很明显了,我们自定义的效果,波纹向两边同速度的扩散,所以就会出现,如果点击点不在中心的时候,距离短的一边波纹先到达,而距离长的一边后到达,不能同时到达边缘!而...

weixin_31201555的博客 534

Android Ripple的详解

转自:Android L Ripple的使用总纲 没有边界的Ripple(Ripple With No Mask) 用颜色作为Mask的Ripple(Ripple With Color Mask),然而颜色并没有什么卵用 用图片作为Mask的Ripple(Ripple With Picture Mask) 用设定形状作为Mask的Ripple(Ripple With Shape Mask) 搭配se

1万+

Android 的UI效果篇Ripple

记录5.0以后的Ripple(波纹效果)的使用 1.为什么要使用Ripple 2.如何使用Ripple效果 3.Ripple效果的颜色值改变 4.Ripple的波纹范围改变 5.Ripple添加一个item,其id为@android:id/mask 1.为什么要使用Ripple 提高用户体验,更好的视觉效果反馈给用户 间接增加了用户在应用停留的时间 2.如何使用Ripple效果 在5.0的机型...

知道的越多,不知道的越多。 1309

Android UI效果篇--Ripple 最小代价实现波纹点击特效

记录5.0以后的Ripple(波纹效果)的使用.1.为什么要使用Ripple2.如何使用Ripple效果3.Ripple效果的颜色值改变4.Ripple的波纹范围改变5.Ripple添加一个item,其id为@android:id/mask。

chengzhenjia的博客 694

Android自定义圆形水波纹进度条

在本文中,我们将介绍如何在Android应用程序中创建一个自定义的圆形水波纹进度条。我们通过自定义View和绘制路径来实现了水波纹效果,并使用动画来改变进度值。在上面的代码中,我们首先创建了两个画笔对象,分别用于绘制圆形进度条和水波纹。然后,我们定义了一些属性,如最大进度值、当前进度值、圆形半径、水波纹高度和长度等。首先,我们需要创建一个自定义的View类,用于绘制圆形水波纹进度条。这样,当应用程序运行时,我们就可以看到一个圆形水波纹进度条,进度值为50。方法中,我们首先绘制圆形进度条。

PixelNovaO的博客 457

Unity+Hybridclr发布WebGL记录

问题不多,比预想中的顺利,如果遇到问题建议先看Hybridclr的常见问题里面有没有解决方案,没遇到Hybridclr的报错,所以记录的问题里面没有Hybridclr相关的。导出设置里的压缩格式选择了Brotli,而服务器或浏览器不支持,据说是可以拓展服务器配置使支持Brotli,但是由于我本人是IIS小白,所以换了种压缩格式,在publishing Settings修改Compression Fromat为Gzip。3.在浏览器运行之后视图一直闪烁。,修改配置,这个网上很常见。

a598211757的博客 1038

android水波圆圈动画,Android圆形水波纹按钮的实现(Ripple)

在Android中,谷歌已经提供了对于按钮水波纹效果的一个实现。在组件的中添加以下代码即可实现:超出组件边框(但不超出父类视图),此时水波纹效果为圆形:android:background="?android:attr/selectableItemBackgroundBorderless"不超出组件边框,水波纹效果为组件的形状:android:background="?android:attr/s...

weixin_30177835的博客 1380

【PLIO学习总结】laserMapping中的时间戳与状态更新逻辑

本文仅用于个人学习总结记录。如有错误,请批评指正。

larrydong的博客 1648

android ripple 大小,Android Ripple 旋钮水波纹效果(一)

看到android 5.0有一个按钮点击效果非常棒,先来看效果图:但是这种效果只能在5.0的系统上有效果,如何在低版本上实现呢?这种效果网上也有人实现了,blog 地址http://blog.youkuaiyun.com/singwhatiwanna/article/details/42614953ok,直接进入主题,要实现这种动画效果也不难,原理可以用一句话概括:就是,在我们按下view的时候,从按下的位置...

weixin_29416629的博客 230

企业和个人 AI 编程工具怎么选?2025 年 12 款主流工具(Claude/Cursor 等)核心能力 + 收费对比

2025 年最火的 12 款 AI 编程工具,像 Claude、Cursor 这些热门款,我把它们的核心能力、收费标准全扒得明明白白,看完这篇你不用再瞎琢磨,直接就能挑到对的!再说说 Cursor,美国 Cursor Labs 做的,还拿过红杉资本投资,2022 年推出后,2024 年收入直接涨了 6400%,势头很猛。总之,不管你是企业技术管理者、程序员,还是刚入门的 AI 小白,按自己的需求(语言、合规、预算)挑,保准能找到最适合的 AI 编程工具!最后给大家划重点,不同需求直接对号入座:?

hundred98的博客 2801

Android 13 录音APK在后台无数据的处理

未获取到录音数据

chenchen4310的博客 1183

Android 水波纹ripple统一添加说明

目前几种水波纹效果说明: 1、圆形无边界(一般用作父布局背景或前) 2、圆形有边界(常用,一般用作父布局背景或前景) 3、方形有边界(常用,一般用作父布局背景或前景) 4、图形表面水波纹(常用,易被忽略的重点) 5、水波纹和selector配合(常用,一般用作有选中效果的布局) Android系统已经提供给我们有边界和无边界(圆形)的效果(API要求21以上,如果没效果加上android:clickable="true") android:background="?android:attr/selectab

学习飞翔 2048

数学建模——相关系数(4)——斯皮尔曼相关系数(spearman)

文章目录引述斯皮尔曼相关系数(spearman)定义 引述 经过之前几节的学习,我们了解并掌握了皮尔逊相关系数。在学习中我们发现,皮尔逊相关系数的使用条件相当苛刻:两组变量必须是连续数据、呈现正态分布,且两者间必须成线性关系。如果我们在数学建模中拿到一组数据无法满足以上条件,那么有没有其他的方法去判断两组变量之间的相关性呢?答案是肯定的,它就是斯皮尔曼相关系数(spearman). 斯皮尔曼相关系...

东 6万+

Android实现圆形按钮(附带源码)

Android实现圆形按钮(附带源码)

欢迎来到我的博客!这里是一个专注于计算机技术的分享平台,涵盖编程开发、算法研究、系统架构、软件工程等多个领域。无论你是初学者还是资深开发者,都能在这里找到有价值的内容。 1794

Unreal5从入门到精通之初学者碰到解决不了的问题怎么办?

在学习Unreal的过程中,你曾陷入困境了吗?对于我来说,这种情况发生得比我愿意承认的要多得多。幸运的是,除了一般地在网上搜索之外,还有很多地方可以获得虚幻引擎的帮助。

TxNet 980

R语言导入.dta文件实战

R语言导入.dta文件实战 #导入.dta文件的基本语法 R的导入.dta文件最简单方法是使用haven库中的read_dta()函数。 此函数使用以下基本语法: data <- read_dta('C:/you-path/file_name.dta') #包的安装和导入 install.packages('haven') library(haven) #下载.dta数据文件 我们将从该页面下载名为cola.dta的.dta文件。 #导入.dta文件 ..

data+scenario+science+insight 1万+

Android 笔记 - 点击 水波纹效果-续

还是点击水波纹效果之前有讨论过点击水波纹效果,当时没仔细看,就了解了一个最基本的办法//在控件里加入如下属性值即可: //圆形波纹 android:background=”?android:attr/selectableItemBackgroundBorderless” //有边界波纹 android:background=”?android:attr/selectableItemBackg

super_zq的博客 860

华为OD面试手撕真题目录

2026最新华为OD面试手撕真题 , 提供Java、C++、Python、Go、JavaScript源码实现,并提供完整思路讲解.

qq_45776114的博客 1万+

ImageButtom 实现点击水波纹效果和图标切换

ImageButtom 实现点击水波纹效果和图标切换 一个简单的点击效果: 一:水波纹的实现 5.0以上button原生自带水波纹效果,而其他控件或者布局要实现点击时水波纹的效果,我们这里可以使用ripple标签。在Drawable中新建跟标签为ripple的XML文件作为布局或者控件的背景,ripple的具体使用网上已经有很多了,我这里贴两张用法的图。 (1)最简单的用法: 当然你可以直接引...

sinat_38115473的博客 763

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Android自定义图形按钮

效果如下(红框内即是):点击按钮有水波纹效果 如上,分别是四个按钮。在布局文件中,以第一个按钮为例: <Button android:id="@+id/bt1" android:layout_width="140dp" android:layout_height="120dp" and...

qq_40309403的博客 743

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

android仿知乎按钮动效,Android仿知乎客户端关注和取消关注的按钮点击特效实现思路详解...

先说明一下,项目代码已上传至github,不想看长篇大论的也可以先去下代码,对照代码,哪里不懂点哪里。代码在这https://github.com/zgzczzw/ZHFollowButton前几天发现知乎关注的点击效果确实赞,查了一下实现方式,刚好看到这个问题,花了一天时间终于把这个效果实现了,现在来回答一下,很不幸,楼上各位的答案都不全对,且听我一一道来。首先,我先详细观察了一些知乎的效果,其...

weixin_42449548的博客 351

android ripple 大小,Android Ripple 按钮水波纹效果(二)优化

2015-05-01发现了不同之处没?点击中间的时候是看不出什么区别,但是点击两边的时候,就很明显了,我们自定义的效果,波纹向两边同速度的扩散,所以就会出现,如果点击点不在中心的时候,距离短的一边波纹先到达,而距离长的一边后到达,不能同时到达边缘!而系统自带的则不存在这种情况,所以这是一个优化点;另一个优化点是:我们自定义的效果,在波纹全部覆盖以后,按钮的选中效果没了。有两处需要优化的1、实现不...

weixin_39552768的博客 213

FlycoRoundView与Material Design:打造符合Google设计规范的圆角组件

FlycoRoundView是一款专为Android开发者设计的圆角组件库,它能够帮助开发者轻松实现符合Material Design规范的圆角UI效果,无需编写复杂的shape资源文件。本文将详细介绍如何利用FlycoRoundView快速构建现代化的Android界面,让你的应用既美观又符合设计标准。 ## 为什么选择FlycoRoundView实现Material Design圆角? M

gitblog_00034的博客 343

深入解析material-ripple:Android Material Design动画实现原理

material-ripple是一个为Android视图提供Material Design风格涟漪效果的开源库,它能够轻松为任何视图添加触摸反馈动画,让应用界面更加生动和现代化。通过简单的集成,开发者可以为按钮、卡片等UI元素实现符合Material Design规范的水波纹交互效果。 ## 什么是Material Design涟漪效果? Material Design涟漪效果是Android

gitblog_00560的博客 415
上一篇: Android自定义控件的简单使用
下一篇: Java线程的基本使用
ZGUIZ
博客等级 码龄10年 106粉丝 49原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值