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

Example to implement shape of oval with gradient color

To implement shape using "oval", create /res/drawable/myshape.xml to define the shape.

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval" >
    <solid 
        android:color="#e0e0e0" />
    <stroke 
        android:width="5dip" 
        android:color="#505050"/>
    <gradient 
        android:startColor="#FFFF0000" 
        android:endColor="#800000FF"
        android:angle="45"/>
</shape>

Apply the shape on layout background, modify /res/layout/activity_main.xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:textStyle="bold|italic"
        android:layout_gravity="center_horizontal"
        android:background="#B0B0B0" />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:gravity="center_horizontal"
        android:background="@drawable/myshape"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold"
        android:textColor="@android:color/black"
        android:gravity="center"
        android:background="@drawable/myshape" />

</LinearLayout>