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.


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"?>
    <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>

Edit values-v21/styles.xml to use our custom color.
<?xml version="1.0" encoding="utf-8"?>
    <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>

reference: Customize the Color Palette

No comments: