MaterialDesign使用及开发指南

序言

Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

参考:
Material Design中文网
http://design.1sters.com/

谷歌开发者平台
https://developer.android.google.cn/design/index.html

开始使用

1.清单文件

注意theme的设置

<application
        android:name=".application.MyApplication"
        android:allowBackup="true"
        android:icon="@drawable/logo"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar">

2.Gradle配置

(1)appcompat

compile 'com.android.support:appcompat-v7:25.1.0'

(2)design

compile 'com.android.support:support-v4:25.1.0'

3.命名空间

为使用Material Design控件的布局文件指定命名空间

xmlns:app="http://schemas.android.com/apk/res-auto"

悬浮按钮 FloatButton

<android.support.design.widget.FloatingActionButton
   android:id="@+id/fab"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:layout_marginRight="15dp"
   android:layout_marginTop="180dp"
   android:elevation="1dp"
   android:onClick="playVideo"
   android:src="@mipmap/bofang_float"
   app:backgroundTint="@color/lable_blue"
   app:borderWidth="0dp"
   app:rippleColor="@color/mediumseagreen"/>

1.说明
android:elevation="1dp"设置阴影
app:backgroundTint="@color/lable_blue"背景色
app:rippleColor="@color/mediumseagreen"点击时的颜色
app:borderWidth="0dp"边缘宽度

2.安卓5.x存在的一些问题
在5.x的设备上运行，你会发现一些问题（测试系统5.0）：
(1)没有阴影
记得设置app:borderWidth="0dp"
(2)按上述设置后，阴影出现了，但是竟然有矩形的边界（未设置margin时，可以看出）
需要设置一个margin的值。在5.0之前，会默认就有一个外边距（不过并非是margin，只是效果相同）。
解决方案:添加属性app:borderWidth="0dp"对于5.x设置一个合理的margin

3.其他
app:fabSize风格,有正常和小两种normal、mini两个选择
android:src按钮中间的图片
app:elevation空闲状态下的阴影深度默认为6dp
app:pressedTranslationZ按下状态下的阴影深度默认为12dp
app:backgroundTint按钮颜色-
其它的点击事件等与Button无异。

纸片 Chips

此语义常指向PopupMenu控件

1.建立values下的menu文件

使用PopupMenu控件要为菜单指定item属性

2.Menu属性解析

showAsAction属性共有五个值：ifRoom、never、always、withText、collapseActionView，可以混合使用(用|符号隔开)
ifRoom 会显示在Item中，但是如果已经有4个或者4个以上的Item时会隐藏在溢出列表中。当然个数并不仅仅局限于4个，依据屏幕的宽窄而定.
never 永远不会显示。只会在溢出列表中显示，而且只显示标题，所以在定义item的时候，最好把标题都带上。
always 无论是否溢出，总会显示。
withText 示意Action bar要显示文本标题。Action bar会尽可能的显示这个标题，但是，如果图标有效并且受到Action bar空间的限制，文本标题有可能显示不全。
collapseActionView 声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。否则，这个操作视窗在默认的情况下是可见的，并且即便在用于不适用的时候，也要占据操作栏的有效空间。一般要配合ifRoom一起使用才会有效果。

示例代码

<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools" >
   <item
       android:id="@+id/action_comment"
       android:orderInCategory="100"
       android:title="评论"
       app:showAsAction="never"/>
   <item
       android:id="@+id/action_contact"
       android:orderInCategory="100"
       android:title="联系"
       app:showAsAction="never"/>
   <item
       android:id="@+id/action_collect"
       android:orderInCategory="100"
       android:title="收藏"
       app:showAsAction="never"/>
   <item
       android:id="@+id/action_orderlesson"
       android:orderInCategory="100"
       android:title="预约"
        app:showAsAction="never"/>
</menu>

3.点击事件

/**
 * 显示纸片chips
*@param view
 */
private void showPopupMenu(View view) {
    //View当前PopupMenu显示的相对View的位置
   PopupMenu popupMenu = new PopupMenu(this, view);

   //menu布局
                popupMenu.getMenuInflater().inflate(R.menu.detailtch_popmenu,popupMenu.getMenu());

     //动态设置menuItem文字
    if (xxx){
        //getItem()参数 = menu的item数-1
        popupMenu.getMenu().getItem(2).setTitle("取消收藏");
    }

    //menuiItem点击事件
   popupMenu.setOnMenuItemClickListener(newPopupMenu.OnMenuItemClickListener() {
       @Override
       public boolean onMenuItemClick(MenuItem item) {
           if (item.getItemId() == R.id.action_comment) {
                    //干点小事情
           }
           if (item.getItemId() == R.id.action_contact) {
                    //干点小事情
           }
           if (item.getItemId() == R.id.action_collect) {
                   //干点小事情
           }
           if (item.getItemId() == R.id.action_orderlesson) {
                   //干点小事情
           }
           return false;
       }
    });

    //PopupMenu关闭事件
   popupMenu.setOnDismissListener(new PopupMenu.OnDismissListener() {
       @Override
       public void onDismiss(PopupMenu menu) {

       }
});

//强制显示菜单图标,详情见下面
try {
             ...
} catch (…) {
             …
}

         //PopupMenu显示
    popupMenu.show();
}

4.PopMeun显示Icon

使用反射原理，强制显示菜单图标

try {
   Field field = popupMenu.getClass().getDeclaredField("mPopup");
   field.setAccessible(true);
   MenuPopupHelper mHelper = (MenuPopupHelper) field.get(popupMenu);
   mHelper.setForceShowIcon(true);
} catch (IllegalAccessException |NoSuchFieldException e) {
   e.printStackTrace();
}

工具栏 Toolbar

1.布局文件

略,直接在布局中声明Toolbar空间即可.

2.菜单项布局

Menu_toolbar.xml

<?xml version="1.0"encoding="utf-8"?>
<menu
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">

   <item
       android:id="@+id/action_search"
       android:icon="@mipmap/ic_search_white_24dp"
       android:title="搜索"
        app:showAsAction="ifRoom" />

   <item
       android:id="@+id/action_setting"
       android:icon="@mipmap/ic_more_vert_white_24dp"
       android:title="设置"
       app:showAsAction="ifRoom" />
</menu>

3.点击事件

/**
 * 初始化toolbar
 */
private void initToolBar() {
         finalToolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
         //设置导航栏图标,标题等
         toolbar.setNavigationIcon(R.mipmap.ic_menu_white_24dp);      
         toolbar.setTitle("演示标题");
         toolbar.setTitleTextColor(Color.WHITE);

         //反射菜单项
         toolbar.inflateMenu(R.menu.menu_toolbar);

         //找到menu里的每个item项
         MenuItemitem = toolbar.getMenu().getItem(0);

         //左上角图标点击,打开抽屉
         toolbar.setNavigationOnClickListener(newView.OnClickListener() {
                   @Override
                   publicvoid onClick(View v) {
                            drawer.openDrawer(Gravity.LEFT);
                   }
         });

         //右边item点击
         toolbar.setOnMenuItemClickListener(newToolbar.OnMenuItemClickListener() {
                   @Override
                   publicboolean onMenuItemClick(MenuItem item) {
                            intmenuItemId = item.getItemId();
                            if(menuItemId == R.id.action_search) {
                                     //干点小事情
                            }

                            if(menuItemId == R.id.action_setting) {
                                    //弹出菜单项
                                     showPopupMenu(toolbar);                       
                            }
                            return true;
                   }
         });
}

抽屉 Drawer

DrawerLayout+NavigationView+ToolBar配合使用效果更好.

1.创建布局

用DrawerLayout嵌套NavigationView,NavigationView布局由头部和菜单项组成

(1)总体布局

<?xml version="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:toolbar="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <!--抽屉-->
   <android.support.v4.widget.DrawerLayout
       android:id="@+id/drawer"
       android:layout_width="match_parent"
       android:layout_height="match_parent">

       <!--主内容页面-->
       <RelativeLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent">
           <FrameLayout
               android:id="@+id/fl_toolbar_container"
                android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:background="@color/blue_indicater">

               <android.support.v7.widget.Toolbar
                   android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:background="@color/blue_indicater"
                   android:elevation="0dp"></android.support.v7.widget.Toolbar>
           </FrameLayout>

           <!--碎片容器-->
           <FrameLayout
               android:id="@+id/fl_forFragment"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:layout_above="@id/inc_bottom_main"
               android:layout_below="@id/fl_toolbar_container"></FrameLayout>
       </RelativeLayout>

       <!--抽屉的侧滑页面-->
       <include
           android:id="@+id/include_drawer"
            layout="@layout/drawer_user"
           android:layout_width="296dp"
           android:layout_height="match_parent"
           android:layout_gravity="start"></include>

   </android.support.v4.widget.DrawerLayout>
</RelativeLayout>

(2)侧滑页面布局

draw_user.xml

<?xml version="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="wrap_content"
   android:layout_height="match_parent"
   android:background="@color/pink"
   android:orientation="vertical">

   <android.support.design.widget.NavigationView
       android:id="@+id/navigation_view"
       android:layout_width="296dp"
       android:layout_height="match_parent"
       android:layout_gravity="start"
       app:headerLayout="@layout/navigation_drawer_header"
       app:menu="@menu/menu_navigation_drawer" />
</LinearLayout>

属性说明
app:headerLayout="@layout/navigation_drawer_header"头部布局
app:menu="@menu/menu_navigation_drawer"/>菜单项设置

(3)NavigationView头部布局

navigation_drawer_header.xml

<?xml version="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="184dp"
   android:background="@mipmap/header"
   android:padding="@dimen/margin_all">

   <!—avatar-->
   < ImageViewxmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/imgv_avatar_nav"
       android:layout_width="72dp"
       android:layout_height="72dp"
       android:layout_marginBottom="@dimen/divider_small"
       android:layout_marginTop="32dp"
        android:src="@drawable/avatar"
       />

   <!--name-->
   <TextView
        android:id="@+id/txv_username_nav"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentLeft="true"
       android:layout_below="@id/imgv_avatar_nav"
       android:layout_marginLeft="4dp"
       android:text="试验"/>
</RelativeLayout>

(4) NavigationView菜单项设置

可以用group标签设置分组,组与组之间会有分割线
menu_navigation_drawer.xml

<?xml version="1.0"encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
   <group
       android:id="@+id/first_group"
       android:checkableBehavior="none">
       <item
           android:id="@+id/item_comment"
           android:icon="@mipmap/ic_chat_black_24dp"
           android:title="我的评论" />

       <item
           android:id="@+id/item_collect"
           android:icon="@mipmap/ic_grade_black_24dp"
           android:title="我的关注" />
   </group>

   <group
       android:id="@+id/second_group"
       android:checkableBehavior="none">
       <item
           android:id="@+id/item_setting"
           android:icon="@mipmap/ic_settings_black_24dp"
           android:title="应用设置" />
   </group>

   <group
       android:id="@+id/third_group"
       android:checkableBehavior="none">
       <item
           android:id="@+id/item_function"
           android:title="功能介绍" />

      <item
           android:id="@+id/item_creater"
           android:title="关于作者" />
   </group>

</menu>

2.NavigationView点击事件

//NavigationView声明抽屉相关控件
DrawerLayout drawer;
ImageView imgv_avatar_nav;
TextView txv_username_nav;

/**
 * 初始化抽屉
 */
private void initDrawer() {
         drawer= (DrawerLayout) findViewById(R.id.drawer);

         //获取头布局文件
         NavigationViewnavigationView = (NavigationView) findViewById(R.id.include_drawer)
                            .findViewById(R.id.navigation_view);

         //动态设置NavigationView头布局控件
         ViewheaderView = navigationView.getHeaderView(0);
         imgv_avatar_nav= (ImageView) headerView.findViewById(R.id.imgv_avatar_nav);
         txv_username_nav= (TextView) headerView.findViewById(R.id.txv_username_nav);

         if(usertype == 1) {//学生
                   //隐藏授课菜单项
                   //MenuItemmenuItem = navigationView.getMenu().findItem(R.id.item_teachlesson);
                   //menuItem.setVisible(false);
         }

         if(usertype == 2) {//老师
                   //隐藏收藏菜单项
                   MenuItemmenuItem = navigationView.getMenu().findItem(R.id.item_collect);
                   menuItem.setVisible(false);

                   //隐藏预约菜单项
                   //MenuItemmenuItem1 = navigationView.getMenu().findItem(R.id.item_orderlesson);
                   //menuItem1.setVisible(false);
         }

         //设置NavigationView头部点击事件
         imgv_avatar_nav.setOnClickListener(newView.OnClickListener() {
                   @Override
                   publicvoid onClick(View v) {
                            //Utils.showToast("点了头像");
                            //跳转个人资料
                            Intentintent = new Intent(getApplicationContext(), EditorActivity.class);
                            //等待返回值
                            startActivityForResult(intent,Constans_lekao.REQUEST_CHANGE_AVATAR);
                            drawer.closeDrawers();
                   }
         });

         //设置NavigationView菜单项点击事件
         navigationView.setNavigationItemSelectedListener(newNavigationView.OnNavigationItemSelectedListener() {
                   @Override
                   publicboolean onNavigationItemSelected(MenuItem item) {
                            //在这里处理item的点击事件
                            if(item.getItemId() == R.id.item_comment) {
                                     //干点小事情
                            }

                            if(item.getItemId() == R.id.item_collect) {
                                     //干点小事情
                            }

                            if(item.getItemId() == R.id.item_setting) {
                                     //干点小事情
                            }                         
                            …
                            return true;
                   }
         });
}

卡片 Cards

1.添加依赖

compile 'com.android.support:cardview-v7:25.1.0'

2.布局文件

跟RelativeLayout等一样使用,把需要的替换成CardView即可

<?xml version="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <android.support.v7.widget.CardView
       android:id="@+id/cardView"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_margin="10dp">

       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="100dp">

           <ImageView
               android:layout_width="150dp"
               android:layout_height="match_parent"
                android:layout_margin="5dp"
               android:scaleType="centerCrop"
               android:src="@drawable/sng" />

           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="match_parent"
                android:orientation="vertical">

                <TextView
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:padding="5dp"
                    android:text="棒冰行动"
                    android:textSize="18sp"
                   android:textStyle="bold" />

                <TextView
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:padding="5dp"
                    android:text="棒冰行动，公益传播设计夏令营" />
           </LinearLayout>
       </LinearLayout>
   </android.support.v7.widget.CardView>
</LinearLayout>

3.java

private CardView cardView;
   @Override
    protected void onCreate(BundlesavedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       cardView = (CardView)findViewById(R.id.cardView);
       cardView.setRadius(8);//设置图片圆角的半径大小
       cardView.setCardElevation(8);//设置阴影部分大小
       cardView.setContentPadding(5,5,5,5);//设置图片距离阴影大小
}

第三方库

搜索框 MaterialSearchView

1.添加依赖

dependencies {
   compile 'com.miguelcatalan:materialsearchview:1.4.0'
}

2.把MaterialSearchView添加到Toolbar所在的布局,并保证在布局的最后一个

<!-- Must be last for right layering display -->
   <FrameLayout
       android:id="@+id/toolbar_container"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           android:background="@color/theme_primary" />

       <com.miguelcatalan.materialsearchview.MaterialSearchView
           android:id="@+id/search_view"
           android:layout_width="match_parent"
           android:layout_height="wrap_content" />
</FrameLayout>

3.添加菜单项

<item
       android:id="@+id/action_search"
       android:icon="@drawable/ic_action_action_search"
       android:orderInCategory="100"
       android:title="@string/abc_search_hint"
       app:showAsAction="always" />

4.java

//toolbar和搜索框相关
MaterialSearchView searchView;

//找到menu里的每一个item
public void initToolbar(){
         …
MenuItem item =toolbar.getMenu().getItem(0);
searchView.setMenuItem(item);
searchView.setCursorDrawable(R.drawable.shape_searchview_cursor);
…
}

public void initEvent(){
//searchview输入监听
searchView.setOnQueryTextListener(newMaterialSearchView.OnQueryTextListener() {
                  @Override
                  public boolean onQueryTextSubmit(Stringquery) {
                           if(!TextUtils.isEmpty(query)) {
                                     getSearchTeacher(query);
                           }
                           returnfalse;
                  }

                  @Override
                  public boolean onQueryTextChange(StringnewText) {

                           returnfalse;
                  }
});

//打开关闭监听
searchView.setOnSearchViewListener(newMaterialSearchView.SearchViewListener() {
                  @Override
                  public void onSearchViewShown() {

                  }

                  @Override
                  public void onSearchViewClosed() {

                  }
});
}

5.定制样式

在values的styles里定义样式,然后在布局文件关联样式

<com.miguelcatalan.materialsearchview.MaterialSearchView
                   android:id="@+id/search_view"
                    style="@style/MaterialSearchViewStyle"
                   android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                   android:layout_marginTop="25dp" />

样式说明
<stylename="MaterialSearchViewStyle">
         <!—背景色 -->
         <itemname="searchBackground">@color/theme_primary</item>

         <!--Change voice icon -->
         <itemname="searchVoiceIcon">@drawable/ic_action_voice_search_inverted</item>

         <!—清除图标 inverted是白色的;没有inverted是黑色的 -->
         <itemname="searchCloseIcon">@drawable/ic_action_navigation_close_inverted</item>

         <!--Change up icon -->
         <itemname="searchBackIcon">@drawable/ic_action_navigation_arrow_back_inverted</item>

         <!--Change icon for the suggestions -->
         <itemname="searchSuggestionIcon">@drawable/ic_suggestion</item>

         <!--Change background for the suggestions list view -->
         <itemname="searchSuggestionBackground">@android:color/white</item>

         <!--Change text color for edit text. This will also be the color of the cursor-->
         <itemname="android:textColor">@color/theme_primary_text_inverted</item>

         <!--Change hint text color for edit text -->
         <itemname="android:textColorHint">@color/theme_secondary_text_inverted</item>

         <!—Hint文字 -->
         <itemname="android:hint">@string/search_hint</item>
</style>

圆形头像 CircleView

1.添加依赖

dependencies {
   ...
   compile 'de.hdodenhof:circleimageview:2.1.0'
}

2.使用

<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/profile_image"
   android:layout_width="96dp"
   android:layout_height="96dp"
   android:src="@drawable/profile"
   app:civ_border_width="2dp"
   app:civ_border_color="#FF000000"/>
app:civ_border_width:边框宽度
app:civ_border_color:边框颜色

材料设计库MaterialDesign

Github官方地址
https://github.com/navasmdc/MaterialDesignLibrary

1.导入方法

官方方法:
How to use
If you want use this library, you only haveto download MaterialDesign project, import it into your workspace and add theproject as a library in your android project settings.
If you prefer it, you can use the gradledependency, you have to add these lines in your build.gradle file:
repositories {
jcenter()
}
dependencies {
compile ‘com.github.navasmdc:MaterialDesign:1.5@aar’
}

2.如果导入失败,请按照以下方法导入:

(1)先从github上把官方demo下载到电脑上

(2)打开下载的文件,我们只要类库,不要其他的

(3)File—New—Import Module,找到上图框起来的文件夹,当成一个模组导入.

(4)然后给你的工程添加依赖

build.gradle(Module:app) 
dependencies {
    compile project(':MaterialDesign')
}

或者直接在Structure里添加也可以.

(5)修改模组配置

修改MaterialDesign模组的gradle编译版本,工具版本,最小版本和你的主模组Module:app一致.
修改后,同步时可能会提示下载sdk,都不大,下载即可.MaterialDesign模组的gradle有时会报红,不用管,直接用就可以.

3.使用

使用很简单,建议直接参考官方教程
https://github.com/navasmdc/MaterialDesignLibrary

这里只说需要注意的

(1)不要忘了指定命名空间

Somecomponents have custom attributes, if you want use them, you must add this linein your xml file in the first component:

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
</RelativeLayout>

(2)扁平按钮

<com.gc.materialdesign.views.ButtonFlat
               android:id="@+id/buttonflat"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:background="#1E88E5"
                android:text="Button"/>
android:background就是扁平按钮的文字的颜色.

图标素材

谷歌官方MaterialDesign素材库
说明文档 http://google.github.io/material-design-icons/
下载地址 https://github.com/google/material-design-icons/

标准及规范

http://design.1sters.com/
按照MarginDesign的规范,总结的一些设计标准,直接复制进dimens.xml使用即可.
虽然md的规范条目很多很细,但还是有规律可循的,我总结了一句话,基本可以概括md的设计标准———4dp的偶数倍(或者8的整数倍),且不是10dp的整数倍
详情见下:

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="fab_margin">16dp</dimen>

    <!--阴影-->
    <dimen name="elevation_header">2dp</dimen>
    <dimen name="elevation_tab">4dp</dimen>

    <!--按钮-->
    <dimen name="btn_width">88dp</dimen>
    <dimen name="btn_height">36dp</dimen>
    <dimen name="flatbtn_twogroup_height">72dp</dimen>
    <dimen name="flatbtn_twogroup_margin">24dp</dimen>

    <!--文本输入框-->
    <dimen name="edt_height">48dp</dimen>

    <!--列表项-->
    <dimen name="item_height_oneline">48dp</dimen>
    <dimen name="item_height_oneline_avatar">56dp</dimen>
    <dimen name="item_height_twoline">72dp</dimen>
    <dimen name="item_height_threeline">88dp</dimen>
    <dimen name="item_height_fourline">104dp</dimen>
    <dimen name="item_padding">16dp</dimen>

    <!--边距-->
    <dimen name="margin_all">16dp</dimen>
    <dimen name="margin_left_all">16dp</dimen>
    <dimen name="margin_right_all">16dp</dimen>
    <dimen name="margin_left_title_txt">72dp</dimen>
    <dimen name="margin_dialog_24">24dp</dimen>

    <!--高度-->
    <dimen name="height_tab">48dp</dimen>
    <dimen name="height_header">56dp</dimen>
    <dimen name="height_listitem">72dp</dimen>

    <!--宽度-->

    <!--间隔-->
    <dimen name="divider_small">8dp</dimen>
    <dimen name="divider_medium">24dp</dimen>
    <dimen name="divider_large">48dp</dimen>
    <dimen name="divider_huge">56dp</dimen>
    <dimen name="divider_textline">4dp</dimen>


    <!--字体-->
    <dimen name="txt_headline">24sp</dimen>
    <dimen name="txt_title">20sp</dimen>
    <dimen name="txt_subhead">16sp</dimen>
    <dimen name="txt_body">14sp</dimen>
    <dimen name="txt_caption">12sp</dimen>
    <dimen name="txt_menu">14sp</dimen>
    <dimen name="txt_btn">14sp</dimen>

    <!--对话框-->

    <!--TAB-->
    <dimen name="tab_indicator_height">2dp</dimen>
    <dimen name="tab_txt_margin">12dp</dimen>
    <dimen name="tab_height">48dp</dimen>


    <!--图片-->
    <dimen name="imgv_small">32dp</dimen>
    <dimen name="imgv_large">56dp</dimen>
    <dimen name="imgv_huge">72dp</dimen>

</resources>

其他

---

RippleEffect

点击控件产生的Material Design的水波纹效果
https://github.com/traex/RippleEffect
示例:

<com.andexert.library.RippleView
    android:layout_width="match_parent"
    android:layout_height="36dp"
    android:layout_alignParentBottom="true"
    app:rv_color="@color/fontlight"
    app:rv_rippleDuration="200">

    <RelativeLayout
        android:id="@+id/rl_register"
        android:layout_width="match_parent"
        android:layout_height="36dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="还没有账号?马上注册"
            android:textColor="@color/fontlight"
            android:textSize="16sp" />

    </RelativeLayout>
</com.andexert.library.RippleView>

ReyMaterial

强烈推荐 另外一个好用的MaterialDesign第三方库
https://github.com/rey5137/material

MaterialEdit

MaterialDesign风格输入框
https://github.com/rengwuxian/MaterialEditText