Saturday, September 19, 2015

Customize color for your app, for Material Theme, using Android Studio


The new material theme provides:

  • System widgets that let you set their color palette
  • Touch feedback animations for the system widgets
  • Activity transition animations

You can customize the look of the material theme according to your brand identity with a color palette you control. You can tint the action bar and the status bar using theme attributes, as shown in Here.


reference: https://developer.android.com/training/material/theme.html

This video show how to do it in Android Studio.


Create values/colors.xml to define our custom color.
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#FFFF00</color>
    <color name="primary_dark">#502020</color>
    <color name="text_primary">#FF00ff00</color>
    <color name="text_secondary">#FFff0000</color>
    <color name="window_background">#000000</color>
    <color name="nav_color">#505050</color>
</resources>


Edit values-v21/styles.xml to use our custom color.
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="android:Theme.Material.Light">
        <item name="android:colorPrimary">@color/primary</item>
        <item name="android:colorPrimaryDark">@color/primary_dark</item>
        <item name="android:textColorPrimary">@color/text_primary</item>
        <item name="android:textColor">@color/text_secondary</item>
        <item name="android:windowBackground">@color/window_background</item>
        <item name="android:navigationBarColor">@color/nav_color</item>
    </style>
</resources>


reference: Customize the Color Palette

No comments:

Post a Comment