Material Design是Google在2014年Google I/O大会上推出的一套全新的设计语言,经过接近两年的发展,可谓是以燎原之势影响着整个设计交互生态,和Material Design相关的开源项目也犹如雨后春笋般的出现。

其中,Ripple Effect是Google非常推崇的Material Design风格的交互方式,甚至已经将它组件化。在越来越多的应用上可以看到这种水波效果,不仅仅是Google自家的应用比如Google Play, 我们在市面上见到的很多应用也都纷纷跟随Google的步伐,加入了Ripple Effect的元素,比如我最早在360手机卫士上看到了Ripple Effect的大量运用。

那Ripple Effect应该如何实现呢?我们平时在开发的时候又如何轻松的将它引入呢。正如之前所说的,Ripple Effect是谷歌现在非常推崇的一种风格,已经将它组件化,实现起来可谓是so easy…

这是一个Ripple Effect的demo录像:

怎么样?是不是看上去很炫,很Material。下面就来看下他的实现到底有多简单。

第一步,在drawable目录下面添加xml文件touchable_background_white.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/grey">
<item android:drawable="@color/white"/>
</ripple>
  • android:color设置的颜色表示控件正常状态下的颜色,android:drawable设置的颜色表示控件按下时的颜色。

第二步,在colors.xml文件中添加如下:

<color name="grey">#AAAAAA</color>
<color name="white">#FFFFFF</color>
  • white就是button正常情况下的颜色,grey则是button按下时的颜色。

这个时候你有可能遇到报错,出现 <ripple> requires API level 21

如果你使用的开发环境是Android Studio的话,就需要在build.gradle文件中把minSdkVersion修改为21: 
minSdkVersion 21

如果使用的是eclipse的话,就需要在AndroidManifest.xml中将minSdkVersion修改为21: 
android:minSdkVersion=”21”

第三步,再来看下他的xml布局文件,我们看到的Button控件对应的xml代码如下:

<Button
android:layout_width="match_parent"
android:layout_height="200dip"
android:background="@drawable/touchable_background_white"
android:text="RIPPLE EFFECT!"/>

Material Design风格的水波涟漪效果(Ripple Effect)的实现的更多相关文章

  1. 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

    分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...

  2. 自定义 Material Design风格的提示框

    关闭 自定义 Material Design风格的提示框 2016-04-24 10:55 152人阅读 评论(0) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. 其实在14年谷歌 ...

  3. [原创]自定义view之:快速开发一款Material Design风格的dialog的开源项目MDDialog

    随着google开始主导Material Design风格的设计,越来越多的app开始使用Material Design风格来设计自己的UI.虽然在Android Studio中集成了多种快速开发框架 ...

  4. 基于React Native的Material Design风格的组件库 MRN

    基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...

  5. Android开发实战之拥有Material Design风格的侧滑布局

    在实现开发要求中,有需要会使用抽屉式布局,类似于QQ5.0的侧滑菜单,实现的方式有很多种,可以自定义控件,也可以使用第三方开源库. 同样的谷歌也推出了自己的侧滑组件——DrawLayout,使用方式也 ...

  6. 创建Material Design风格的Android应用--应用主题

    本人全部文章首先公布于个人博客,欢迎关注,地址:http://blog.isming.me 昨天正式公布了android 5,同一时候android developer站点也更新了,添加了创建Mate ...

  7. Material Design风格登录注册

    本文实现了以下功能 完整的代码和样例托管在Github 当接口锁定时,防止后退按钮显示在登录Activity 上. 自定义 ProgressDialog来显示加载的状态. 符合材料设计规范. 悬浮标签 ...

  8. Android实现Material Design风格的设置页面(滑动开关控件)

    前言 本文链接 http://blog.csdn.net/never_cxb/article/details/50763271 转载请注明出处 參考了这篇文章 Material Design 风格的设 ...

  9. 开发Google Material Design风格的WPF程序

    今天在网上看到了一个Material Design风格的WPF皮肤,看上去还是挺不错的 这个项目是开源的,感兴趣的朋友可以下载试下: https://github.com/ButchersBoy/Ma ...

随机推荐

  1. [转]SQLSERVER如何获取一个数据库中的所有表的名称、一个表中所有字段的名称

    1.查询数据库中的所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name 2.查询某个数据库中所有的表名: SELECT Name FR ...

  2. css 待处理

    三角css http://www.jb51.net/article/42513.htm http://blog.aizhet.com/web/4382.html 实现图片灰度效果 http://www ...

  3. iOS 数组内中英文混合排序

    NSInteger sortObjects(id obj1, id obj2,void *context) { NSMutableString * str1 = [[NSMutableString a ...

  4. ssm框架中的struts我的配置问题

    <?xml version="1.0" encoding="UTF-8" ?>  <!DOCTYPE struts PUBLIC    &qu ...

  5. CentOS编译安装PHP 7.0

    问题1: Cannot find ldap.h 解决办法: yum install openldapyum install openldap-devel 问题2: Cannot find ldap l ...

  6. HttpClient_001_初步实现项目01的servlet,与项目02的servlet,之间数据访问

    HttpClient_001_初步实现项目01的servlet,与项目02的servlet,之间数据访问 代码下载地址: http://download.csdn.net/detail/poiuy19 ...

  7. 关于为busybox设置setuid

    安卓root了,重启之后就没root权限了,于是想到了为 busybox 设置 setuid 来实现使用root的身份执行命令. 可是,不管用啊,还是提示没有权限.搜了一下 busybox setui ...

  8. [ruby]Windows Ruby安装步骤

    Windows Ruby 安装步骤 准备工作: 1.http://rubyinstaller.org/downloads/ 下载选择Ruby 1.9.3 2.http://rubyinstaller. ...

  9. 在win 7 vs2013下 web 调试 出现“ iis Express Worker Process 已停止工作”错误

    在win 7 vs2013下 web 调试 出现“ iis Express Worker Process 已停止工作”错误: 如下图:   最终解决方案如下: 用管理员身份运行CMD,输入netsh  ...

  10. Unity随机随学

    1.什么是渲染管道? 是指在显示器上为了显示出图像而经过的一系列必要操作.渲染管道中的步骤很多,都要将几何物体从一个坐标系中变换到另一个坐标系中去. 主要步骤有: 本地坐标->视图坐标-> ...