前言
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 主题风格~