Android material design colors

Background

When you creating an Android app from Android studio, studio pre-creates certain files for you. This includes the default style for the application. It looks something like below -

<resources>
    <!-- Base application theme. -->
    <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>
</resources>

Now the question is what is this 

• colorPrimary,
• colorPrimaryDark and
• colorAccent

These are all based on material design guidelines. For me, colors are as follows -

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

But you can really choose any color theme you want. For more details, you can see google documentation -

• https://material.io/design/color/#

In this post, I will list what each color naming means.

Android material design colors

Following are naming conventions used -

• colorPrimary:  The color of the app bar.
• colorPrimaryDark: The color of the status bar and contextual app bars; this is normally a dark version of colorPrimary.
• colorAccent: The color of UI controls such as checkboxes, radio buttons, and edit text boxes.
• windowBackground: The color of the screen background.
• textColorPrimary: The color of UI text in the app bar.
• statusBarColor: The color of the status bar.
• navigationBarColor: The color of the navigation bar.

To visualize refer to the following picture -

You can create and preview your colors here -> https://www.materialpalette.com/

Related Links

• https://material.io/design/color/#
• https://www.materialpalette.com/
• Material Design for Your Xamarin.Forms Android Apps