Material Design学习笔记（一）

前言

Marterial Design是Google推出的全新UI设计规范，拥有很棒的用户体验效果。

关于Material介绍大家可以查看 Material中文版 。

今天我们根据Google 官方文档 学习如何使用Material Design主题。

开发工具：android studio ， SDK版本 Android 5.0（API level 21）及以上版本。

应用 Material 主题

首先，要在应用之中使用Material 主题，我们只需要修改res/values/styles.xml文件，
使其继承

android:Theme.Material

 ，如下：

<!-- res/values/styles.xml -->
<resources>
<!-- your theme inherits from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- theme customizations -->
</style>
</resources>

或者在AndroidManifest.xml 中直接设置主题：

android:theme="@android:style/Theme.Material.Light"

自定义 Material 主题

Material主题可以定义成如下形式：

@android:style/Theme.Material （暗色）
@android:style/Theme.Material.Light（亮色）
@android:style/Theme.Material.Light.DarkActionBa

          


对于其他主题风格可以参考API文档（android.R.style）

注意：Material主题只能5.0(api21)及以上才能使用support-v7提供了兼容支持：

自定义调色板

我们可以根据自己的风格修改调色板，调整action bar和状态栏的颜色等，从而自定义 Material 主题颜色。
也可以参考 Material
Design规范 使用颜色搭配。如下：       
              


只需修改res/values/color.xml 文件，如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--<color name="primary">#009688</color>
<color name="primaryDark">#00796b</color>-->

<!--设置状态栏的颜色-->
<color name="colorPrimaryDark">#1e88e5</color>
<!--设置Toolbar的颜色-->
<color name="colorPrimary">#2196f3</color>
<!-- 设置Toolbar 字体颜色 -->
<color name="textColorPrimary">#FFFFFF</color>
<!-- 设置背景颜色-->
<color name="windowBackground">#FFFFFF</color>
<!-- 设置底部导航栏颜色 -->
<color name="navigationBarColor">#000000</color>
<color name="colorAccent">#a7ffeb</color>

</resources>

然后在res/values/styles.xml 文件下修改如下，即可引用自己自定义的Material
颜色主题，如下：

<resources>
Base application theme.
<style name="AppTheme" parent="Apptheme.Base">
<!-- Customize your theme here. -->
</style>

<style name="Apptheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

<!--设置状态栏的颜色-->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!-- 设置Toolbar的颜色-->
<item name="colorPrimary">@color/colorPrimary</item>
<!-- 设置Toolbar 字体的颜色-->
<item name="android:textColorPrimary">@color/textColorPrimary</item>
<!-- 设置背景颜色-->
<!--<item name="android:windowBackground">@color/windowBackground</item>-->

<item name="colorAccent">@color/colorAccent</item>
</style>

</resources>

通过以上步奏，你就成功的使用自己定义的 Material design 主题风格~