Wednesday, 4 July 2018

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 -

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

t> UA-39527780-1 back to top