Material Design


1.Material Deisgn的Theme

  • @android:style/Theme.Material(dark version)
  • @android:style/Theme.Material.Light(light version)
  • @android:style/Theme.Material.Light.DarkActionBar

与之对应的Compat Theme:

  • Theme.AppCompat
  • Theme.AppCompat.Light
  • Theme.AppCompat.light.DarkActionBar

(1)个性化Color Palette

我们可以根据我们的app风格,去制定Color Palette(调色板),重点有以下几个属性:

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
  • colorPrimary对应的ActionBar的颜色;
  • colorPrimaryDark对应的状态栏的颜色;
  • colorAccent对应的EditText编辑时、RadioButton选中、CheckBox等选中时的颜色;

与之对应的图:

20150427034747930.png

注:对于5.0以下的设备,目前colorPrimaryDark无法个性化状态栏的颜色,底部的navagationBar可能也不一样,更别说设置颜色了。

2.实例Demo

values/styles.xml

    <style name="AppTheme" parent="AppBaseTheme">


    </style>
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light">

        <!-- customize the color palette -->
        <item name="colorPrimary">@color/material_blue_500</item>
        <item name="colorPrimaryDark">@color/material_blue_700</item>
        <item name="colorAccent">@color/material_green_A200</item>

    </style>

values-v21/styles.xml

    <style name="AppTheme" parent="AppBaseTheme">
        <item name="android:statusBarColor">@color/material_blue_700</item>
    </style>

vlaues/colors.xml

    <color name="material_blue_500">#009688</color>
    <color name="material_blue_700">#00796B</color>
    <color name="material_green_A200">#FD87A9</color>

效果展示:

QQ图片20170123110126.png

注:colorAccent就是图中的粉色,EditText正在输入时,RadioButton选中时的颜色。

参考文章:

  1. Android 5.x Theme 与 ToolBar 实战
    本文出自:张鸿洋的博客;
  2. android Toolbar控件;
  3. Android Material Design之Toolbar与Palette实践
    本文出自:Rocko's bog;
  4. Android开发:最详细的 Toolbar 开发实践总结;
  5. ToolBar的使用
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容