这篇文章主要是方便以后我去查找材料特性的使用方式，并不会作过多的分析。如果想了解更多材料特性的使用方式请参考https://developer.android.com/design/。
这是我实现的效果图，需要完整demo的朋友可以私我
ToolBar作用
用来替换ActionBar，单独使用的情况较少;我个人更喜欢搭配android:fitsSsystemWindows （背景图和系统状态栏融合）使用。
举例：
<!--android:theme:设置toolbar上各种元素的颜色-->
<!--app:popupTheme:弹出的菜单项指定颜色-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<!--toolbar整体颜色-->
<item name="colorPrimary">@color/colorPrimary</item>
<!--导航栏颜色-->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!--FloatingButton和按钮的颜色-->
<item name="colorAccent">@color/colorAccent</item>
<!--App文本颜色-->
<item name="android:textColorPrimary">@android:color/black</item>
<!--主体背景颜色-->
<item name="android:windowBackground">@android:color/white</item>
<!--底部导航栏颜色-->
<item name="android:navigationBarColor">@android:color/holo_red_light</item>
</style>
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//设置侧滑菜单图标
if (getSupportActionBar() != null) {
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.menu);
}
DrawerLayout+NavigationView使用
DrawerLayout作为Material侧滑菜单，必须作为顶层布局；NavigationView包含两个布局的引用，一个是导航里面的头部，另一个是菜单项；
举例：
<android.support.v4.widget.DrawerLayout 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"
android:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.p00746.googlemapdemo.materialDemo.MaterialActivity">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include layout="@layout/page_start" />
<!--侧滑菜单项-->
<!--android:layout_gravity="start"必须指定-->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="none">
<item
android:id="@+id/nav_recycler_and_swipe_refresh"
android:icon="@drawable/ic_format_list_bulleted_black_24dp"
android:title="@string/nav_recycler_view" />
<item
android:id="@+id/nav_scrolling"
android:icon="@drawable/ic_file_download_black_24dp"
android:title="@string/nav_scrolling" />
<item
android:id="@+id/nav_full_screen"
android:icon="@drawable/ic_fullscreen_black_24dp"
android:title="@string/nav_fullscreen" />
<item
android:id="@+id/nav_bottom_navigation"
android:icon="@drawable/ic_more_horiz_black_24dp"
android:title="@string/nav_bottom_navigation" />
<item
android:id="@+id/nav_settings"
android:icon="@drawable/ic_settings_black_24dp"
android:title="@string/nav_settings" />
</group>
<group android:id="@+id/group_about">
<item
android:id="@+id/nav_about"
android:icon="@drawable/ic_info_black_24dp"
android:title="@string/nav_about" />
<item
android:id="@+id/nav_donate"
android:icon="@drawable/ic_monetization_on_black_24dp"
android:title="@string/nav_donate" />
<item
android:id="@+id/nav_my_apps"
android:icon="@drawable/ic_apps_black_24dp"
android:title="@string/nav_my_apps" />
</group>
</menu>
drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
//DrawerLayout相关设置
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,
drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawerLayout.addDrawerListener(toggle);
toggle.syncState();
navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
//更改菜单icon和title颜色变化效果
navigationView.setItemIconTintList(null);
View headerView = navigationView.getHeaderView(0);
nav_header = (LinearLayout) headerView.findViewById(R.id.nav_header);
nav_header.setOnClickListener(this);
CoordinatorLayout+AppBarLayout的使用
CoordinatorLayout加强版的FrameLayout，用来协调Material各种控件。AppBarLayout加强版的LinearLayout,内部阻力很多滚动事件封装。可以设置layout_scrollFlags属性让控件具有一些炫酷效果；
- scroll:View会随着滚动事件一起移动
- enterAlways:View向下滚动时，该View会直接往下滚动
- exitUntilCollapsed:View向上逐渐消失时，会一直往上滑动，直到剩下的高度达到它最小高度后，在响应内部事件
- enterAlwaysCollapsed:一般跟enterAlways一起使用，它是指，View在往下“出现”的时候，首先是enterAlways效果，当View的高度达到最小高度时，View就暂时不去往下滚动，直到ScrollView滑动到顶部不再滑动时，View再继续往下滑动，直到滑到View的顶部结束
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<!--android:theme:设置toolbar上各种元素的颜色-->
<!--app:popupTheme:弹出的菜单项指定颜色-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@color/colorAccent" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_add_white_24dp"
android:visibility="gone"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout的作用
加强版的ToolBar，只能作为AppBarlayout的直接布局来使用,AppBarLayout又必须是CoordinatorLayout的子布局；
<android.support.design.widget.CoordinatorLayout 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"
android:id="@+id/activity_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.p00746.googlemapdemo.materialDemo.ScrollViewActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_scrolling"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height_image_view"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<!--app:contentScrim="?attr/colorPrimary" 趋于折叠时的颜色-->
<!--layout_collapseMode-->
<!--pin:折叠的过程中位置始终保持不变-->
<!--parallax：折叠过程中产生一定的错位偏移-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/image_scrolling_top"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_scrolling"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/big_activity_fab_margin"
android:src="@drawable/ic_share_white_24dp"
app:layout_anchor="@id/app_bar_scrolling"
app:layout_anchorGravity="bottom|end" />
<include layout="@layout/content_scrolling" />
</android.support.design.widget.CoordinatorLayout>
TextInputLayout的使用
TextInputLayout 控件表现得就像LinearLayout 一样，它是一个容器。TextInputLayout 中只能放一个子元素，和ScrollView有点类似，并且子元素必须是EditText；
TextInputLayout 实现的功能就是当EditText中输入第一个字母要隐藏hint的时候，TextInputLayout中会出现一个悬浮的标签来显示这个hint，还负责一个炫酷的的material 动画
<android.support.design.widget.TextInputLayout
android:id="@+id/input_user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="@+id/tv_user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/login_user_name_hint"
android:imeOptions="actionNext"
android:maxLength="20"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
底部导航栏的另一种实现方式（3-5之间使用）
<LinearLayout 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"
android:id="@+id/activity_bottom_navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".materialDemo.BottomNavigationActivity">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager_bottom_navigation"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/white"
app:itemIconTint="@color/nav_color_select"
app:itemTextColor="@color/nav_color_select"
app:menu="@menu/bottom_navigation" />
</LinearLayout>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/bottom_navigation_blue"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="Blue" />
<item
android:id="@+id/bottom_navigation_green"
android:icon="@drawable/ic_photo_black_24dp"
android:title="Green" />
<item
android:id="@+id/bottom_navigation_yellow"
android:icon="@drawable/ic_music_note_black_24dp"
android:title="Yellow" />
<item
android:id="@+id/bottom_navigation_red"
android:icon="@drawable/ic_movie_black_24dp"
android:title="Red" />
</menu>
// If BottomNavigationView has more than 3 items, using reflection to disable shift mode
BottomNavigationViewHelper.disableShiftMode(navigation);
CardView 的使用
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_main_1_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/main_card_margin_vertical"
android:layout_marginEnd="@dimen/main_card_margin_horizontal"
android:layout_marginStart="@dimen/main_card_margin_horizontal"
android:layout_marginTop="@dimen/main_card_margin_vertical"
android:background="?attr/selectableItemBackgroundBorderless"
card_view:cardCornerRadius="@dimen/card_recycler_corner_radius"
card_view:cardElevation="@dimen/card_recycler_elevation">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/img_main_card_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:src="@drawable/material_design_2"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/tv_card_main_1_title"
style="@style/TextAppearance.AppCompat.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/img_main_card_1"
android:layout_marginEnd="@dimen/card_title_margin"
android:layout_marginStart="@dimen/card_title_margin"
android:layout_marginTop="@dimen/card_title_margin_top"
android:text="@string/main_card_title"
android:textColor="@color/black" />
<TextView
android:id="@+id/tv_card_main1_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv_card_main_1_title"
android:layout_marginBottom="@dimen/card_subtitle_margin"
android:layout_marginEnd="@dimen/card_subtitle_margin"
android:layout_marginStart="@dimen/card_subtitle_margin"
android:layout_marginTop="@dimen/card_button_margin"
android:text="@string/main_card_subtitle" />
<Button
android:id="@+id/btn_card_main1_action1"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv_card_main1_subtitle"
android:layout_margin="@dimen/card_button_margin"
android:text="@string/main_card_button_1"
android:textColor="@color/colorAccent" />
<Button
android:id="@+id/btn_card_main1_action2"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv_card_main1_subtitle"
android:layout_marginBottom="@dimen/card_button_margin"
android:layout_marginTop="@dimen/card_button_margin"
android:layout_toEndOf="@id/btn_card_main1_action1"
android:text="@string/main_card_button_2"
android:textColor="@color/colorAccent" />
</RelativeLayout>
</android.support.v7.widget.CardView>
