colors.xmlマイベストプラクティス

colors.xmlをうまく定義して使用することで、アプリ全体の統一感を持たせることができます。
どんな色をどんな名前で定義するのがいいのか整理するために、GitHubの公開リポジトリのコードを色々と見ながら、変更に強く開発時にも使いやすいcolors.xmlを考えてみました。

最終的にこうなった（例）

colors.xml

<!-- Based on http://www.google.com/design/spec/style/color.html -->

<!-- Theme & Accent -->
<color name="theme300">#FF8A65</color>
<color name="theme500">#FF5722</color>
<color name="accent500">#1E88E5</color>

<!-- Greyscales -->
<color name="grey200">#EEEEEE</color>
<color name="grey600">#757575</color>
<color name="black">#000000</color>
<color name="white">#FFFFFF</color>

<!-- Others -->
<color name="green600">#43A047</color>

以下、解説です。

1. 基本的にはカラーパレットとして利用

android-best-practiceでも言及されているとおり、colors.xmlはカラーパレットのように色を記述した方がいいです。

colors.xml is a color palette. There should be nothing else in your colors.xml than just a mapping from a color name to an RGBA value. Do not use it to define RGBA values for different types of buttons.

例えば以下のように書いてしまうと、記述が散らばって変更に弱い作りになってしまいます。

colors.xml

<color name="btn_blue">#FF5722</color>
<color name="actionbar_blue">#FF5722</color>

そのため、ボタンやテキストなどのようなコンポーネントに依存する記述ではなく、カラーパレットと捉えて定義すべきです。もしコンポーネントごとにまとめたい場合はstyles.xmlを利用して統一感を持たせるのがよさそうです。
また、タッチフィードバックの色など特定の場所でしか使わない色は、drawable xmlでカラーコードを直接指定するようにしています。

drawable/bg_feedback.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#0a000000" />
        </shape>
    </item>
</selector>

2. Material Color Paletteに沿った命名

他のアプリでは？

nameのつけかたにも色々あります。
例えば、JakeWhartonが作ったTelecineを見てみると

colors.xml

<color name="primary_normal">#ff455a64</color>
<color name="primary_dark_normal">#ff263238</color>
<color name="gray_normal">#ff757575</color>
<color name="gray_pressed">#ff616161</color>

_normal、_darkのような色の濃さを表す表記と、_pressedのような状態を表す表記が入っています。

android-best-practicesだとこんな感じ。

colors.xml

<!-- Grayscale -->
<color name="white"     >#FFFFFF</color>
<color name="gray_light">#DFDFDF</color>
<color name="gray"      >#939393</color>
<color name="gray_dark" >#5F5F5F</color>
<color name="black"     >#303030</color>

<!-- Basic colors -->
<color name="green">#27D34D</color>
<color name="blue">#2A91BD</color>

色の濃さを表す_light、_darkがくっついています。

Material Color paletteの表記に従う

_light、_darkのようなsuffixは他のアプリでもよく使われているのですが、これがベストではないんじゃないかと思っていました。
例えば_lightより少し濃い色がデザインに追加された場合にちょっと変更がめんどくさそうです。

ここは、Material Color paletteの表記をそのまま使ってgrey600、blue300のような名前にすることにしました。
Googleが提供しているmaterial-design-iconsでも、アイコンのファイル名はColor palletに合わせてic_add_to_photos_grey600_18dp.pngのような名称になっています。

colors.xml

<color name="grey200">#EEEEEE</color>
<color name="grey600">#757575</color>

3. ThemeカラーとAccentカラー

色の表記の中でも、ThemeカラーとAccentカラーだけは特別な色として定義しておくことにしました。あまりないかもしれませんが、アプリのデザインカラーを一新する場合でもこの2つの色は同じように定義されるため、具体的な色をnameにつけるよりもtheme_、accent_のように命名しておく方が変更しやすいと思います。

Android-Material-ExamplesやLollipopShowcaseなど、多くのアプリがそうしているようです。

colors.xml

<color name="theme300">#FF8A65</color>
<color name="theme500">#FF5722</color>
<color name="accent500">#1E88E5</color>

4. コメント

ガイドラインに沿って色を定義していることを明記しています。

colors.xml

<!-- Based on http://www.google.com/design/spec/style/color.html -->

その他、セクションを3つに分けています。あまり多くするとめんどくさくなるので3つに抑えています。

colors.xml

<!-- Theme & Accent -->
...
<!-- Greyscales -->
...
<!-- Others -->
...

まとめ

結果、こんな感じになりました。

colors.xml

<!-- Based on http://www.google.com/design/spec/style/color.html -->

<!-- Theme & Accent -->
<color name="theme300">#FF8A65</color>
<color name="theme500">#FF5722</color>
<color name="accent500">#1E88E5</color>

<!-- Greyscales -->
<color name="grey200">#EEEEEE</color>
<color name="grey600">#757575</color>
<color name="black">#000000</color>
<color name="white">#FFFFFF</color>

<!-- Others -->
<color name="green600">#43A047</color>

あくまで自分の場合はこうしてるという話なので、ここはこうした方がもっといいよ等あれば是非お願いします><