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.xmlfile 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.xmlfiles 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.