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. 经验分享:Xcode 创建.a和framework静态库【转】

    作者:Haley_Wong 最近因为项目中的聊天SDK,需要封装成静态库,所以实践了一下创建静态库的步骤,做下记录. 库介绍 库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态 ...

  2. SPARK支持的常见文件格式

    SequenceFile读写文件Scala\java类型对应表

  3. ExtJs 使用点滴 十四 通过设置CheckboxSelectionModel属性值来实现GridPanel复选框可用不可用

    var sm = new Ext.grid.CheckboxSelectionModel({singleSelect : false,renderer:function(v, p, record)   ...

  4. Redis的Python客户端redis-py

    1. 安装 1. redis-py a. 使用easy_install 1 sudo easy_install redis  b. 源码安装 1 2 3 git clone https://githu ...

  5. JS阻止链接跳转代码

    刷新后focus在第一个标签 onload="$('#input_email').focus(); " $(document).ready(function(){ $(" ...

  6. Cursor use

    Ref:http://www.cnblogs.com/Gavinzhao/archive/2010/07/14/1777644.html declare @Id varchar(100),@name ...

  7. PHP js使用ajax异步处理方式请求PHP,解决数组中文乱码

    html端: <html> <head> <script type="text/javascript" src="jquery/jquery ...

  8. SQL2005中的事务与锁定(五)- 转载

    ------------------------------------------------------------------------ -- Author : HappyFlyStone - ...

  9. React,js实现分页的案列

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  10. solr 4.6配置正解

    最近在学习solr,可是在网上找了很多个配置的资料,要不就是solr版本不对,反正各种问题.最后终于出来了,在这里给大家分享一下 1.准备工作 我们要先去下载一个tomcat,我下载的版本是tomca ...