Android MeterDesign(一)

请查看下面这个视频作为本教程最终的结果。

从这里开始，空白 Activity 里面有一个 DrawerLayout 。

Activity 已经调整为材料设计风格的主题。

   <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#2196F3</item><!-- toolbar背景色 -->
        <item name="colorPrimaryDark">#1565C0</item><!-- 状态栏颜色 -->
        <item name="colorAccent">#E91E63</item>
   </style>

好了，让我们开始吧！

第一步：拷贝源码

代码资源：CodeLabActivity 初始入口 

     http://download.csdn.net/detail/moyuxueyi/9482326

第二步：添加Android Design Support Library 依赖

1）Android Studio 导入：

光标定位项目名，右键，选择“Open Module Settings”

选择项目名>"Dependencies">点击“+”>选择1“Library dependency”>在弹出的列表中选择需要导入的包确定即可

这样在在 app 的 build.gradle 文件下会自动添加上依赖代码

2）Ecplices 导入

导入Sdk路径下需要的support lib项目（sdk\extras\android\support）android-support-v7-appcompat 、design(必须引入appcompat) ，且将项目设置为Library，注意：导入Library项目一定要和工程项目在同一目录下。

注意：一定要记得导入recyclerview的包，否则Didn't find class "android.support.design.internal.NavigationMenuView"会一直纠缠着你，本人就是深受其害，问了好多人，最后才靠着冯姐解决，\(^o^)/~

步骤三：添加FAB

Floating Action Button (FAB) 是一个有一些阴影的圆形按钮，这个令人难以置信的，可以改变世界的设计。毫不奇怪它为什么会变成材料设计的标志。因此我们从这开始。添加一个 FAB 在布局文件，因为它需要一些父类来使它在屏幕的右下方位置对齐，所以用 FrameLayout 来包裹 FloatingActionButton。请做这样的事情作为 DrawerLayout 的内容：更换activity_code_lab.xml 中已经存在的 TextView ，像下面的代码这样。（注意不要忘记添加app命名空间）

<android.support.v4.widget.DrawerLayout ...
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ....>
    <FrameLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:src="@drawable/ic_plus"
            app:fabSize="normal" />
    </FrameLayout>
    ...
</android.support.v4.widget.DrawerLayout>

android:src