Leaking Colors

One part of maintaining visual consistency throughout your app is making sure you don’t use too many different colors. This can happen in a few cases: forgetting to extract a color resource to the obvious place, including subtle variations of the same color, and not deleting color resources which aren’t used.

Stop leaking colors through your app:

  • Create a colors.xml file that declares all the color values in your app.
  • Never create any colors outside of this file (in code/other XML files)
  • Create further colors-xyz.xml files for different screens/components; here, you only create aliases (never new values)

Now, you have a single swatch (colors.xml) which contains all the different colors used in your app. Your designers can manage this list of colors (and their IDs), delivering design specs which refer to these, and not raw values.

With the extra color resource files, it now becomes trivial to update the color of an element in the app. Consider colors-xyz.xml for all the colors used in screen XYZ:

<color name="xyz_background">@color/primary_dark</color>

Designers can also directly edit these files. Why not, right? Sometimes it’s helpful to be able to make changes and see what they look like on a device – how awesome would it be if we just made it easier for them to do this.

For me, although it increases the number of files in the project (like with all the strings files), I think lots of smaller, single-purpose files are easier to manage and keep super clean.

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>