几个月前（本文发表于2014年11月10日），Google 发布了app和web应用的 Material Design 设计准则之后，设计师 Emmanuel Pacamalan 发布了一则概念视频，演示了 Instagram 如果做成Material风格会是什么样子：

这仅仅是停留在原型设计上，估计很多人都会问，能否用相对简单的办法实现它呢？答案是肯定的。不仅仅能实现，而且无须要求在最新的 Lollipop 版本，实际上几年前 Android 4.0 发布之后我们就可以实现这些效果了。

鉴于此，我决定开始写一个新的系列文章，那就是如何将《INSTAGRAM with Material Design》视频中的效果转变成现实。当然，我们并不是真的要做一个Instagram应用，只是将界面做出来而已，并且尽量减少一些不必要的细节。

开始

本文将要实现的是视频中前7秒钟的效果。我觉得对于第一次尝试来说已经足够了，同时也考虑到了我们也要准备和配置我们的项目。

我想要提醒诸位的是，里面的实现方法不仅仅是能实现，也是我个人最喜欢的实现方式。还有，我不是一个美工，因此项目中的所有图片是直接从网上的公开渠道获取的。（主要来源是 resources page ）。

好了，下面是最终效果的两组截图和视频（分别从 Android 4.0 和 5.0 上获得的）：

视频地址：http://www.youtube.com/embed/rTucTiIlQDA

视频地址：http://www.youtube.com/embed/fYhpc1LddHE

准备

在我们的项目中，将使用一些热门的 Android 开发工具和库。并不是所有这些东西本篇文章都会用到，我只是将它们准备好以备不时之需。

初始化项目

首先我们需要创建一个新的 Android 项目。我使用的是 Android Studio 和 Gradle 构建系统。最低版本要求sdk是15（即 Android 4.0.4 ）。

然后我们将添加一些依赖。没什么好讲的，下面是 build.gradle 以及 app/build.gradle 文件的代码：

build.gradle

简而言之，我们有如下工具：

• 一些兼容包（CardView, RecyclerView, Palette, AppCompat），我喜欢使用最新的控件。当然你完全可以使用 ListView、Actionbar 甚至 View/FrameView 来替代，但是为什么要这么折腾？
  • ButterKnife – View注解工具简化我们的代码。（比方说不再需要写 findViewById() 来引用 View，以及一些更强大的功能，比如 onClick() 等等）。
  • Rebound – 我们目前还没有用到，但是我以后肯定会用它。这个 Facebook 开发的动画库可以让你的动画效果看起来更自然。（它提供了一些工具使用弹性动画，从 Facebook 的 Messager 的 Chat Heads 中你可以看到他们是如何展示的，我确定你希望在你的下一个项目中使用它）
  • Timber 和 Hugo – 对这个项目而言并不是必须的，我仅仅是用它们打印log日志。

图片资源

本项目中将使用到一些 Material Design 的图标资源。应用程序图标来自于 NSTAGRAM with Material Design视频，这里 是项目的全套资源。

样式

我们从定义app的默认样式开始。同时为 Android 4.0 和 5.0 定义 Material Desing 样式的最简单的方式是直接继承 Theme.AppCompat.NoActionBar 或者 Theme.AppCompat.Light.NoActionBar 主题。为什么是 NoActionBar？因为新的sdk中为我们提供了实现 Actionbar 功能的新模式。本例中我们将使用 Toolbar 控件，Toolbar是比 ActionBar 更好更灵活的解决方案。我们不会深入讲解这个问题，但你可以去阅读 Android开发者博客 AppCompat v21。

根据概念视频中的效果，我们在 AppTheme 中定义了三个基本色调：

styles.xml

colors.xml