Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Mobile / Android

How to Reference Colors by Name in Android Layouts

5.00/5 (1 vote)
9 Jun 2014CPOL2 min read 23K  
A handful of easy steps to enable using names instead of hex vals for colors

Color My World

If you reference a color only one time in a layout, you may want to just look up the hex value for it and use that; but if you use the same color for multiple views, you should follow the DRY principle and create "constants" of/for those values, so that, instead of doing this:

XML
android:textColor="#FFA500"

...you can do this instead:

XML
android:textColor="@color/orange"

The latter is much more intuitive/easy to read; after all, who in their left mind knows that "#FFA500" is orange?

Here's how you can quickly and easily accomplish this:

  1. In [appName]\app\src\main\res\values, right-click and select New > Values Resource File

    Note: This is how it works in Droidio (Android studio); I'm not sure if it works the same way in Eclipse or another lesser-than-Droidio IDE.

  2. Name the new value resource file "color" (although the folder is not created for you by default, naming it this seems to be a standard; you could probably get away with naming it farbe, colour, or even desert_rose_band if you want to - but then you would have to use "android:textColor="@farbe/orange" or so, which would be confusing to non-German speaking people looking at your XML. English (and American English at that, is, for better or worse, the standard human language used within programming languages and related identifiers, so sticking with "color" is probably the smartest choice).

    After entering the name for the folder and mashing the Ok button, you have a file named color.xml (or whatever you named it) with this content:

    XML
    <?xml version="1.0" encoding="utf-8"?>
    <resources></resources>
  3. Now expand the resources and add some values, such as:
    XML
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    <color name="background">#FFFFFF</color>
      <!-- Roy G. Biv (Colors of the rainbow) -->
      <color name="red">#FF0000</color>
      <color name="orange">#FFA500</color>
      <color name="yellow">#FFFF00</color>
      <color name="green">#008000</color>
      <color name="blue">#0000FF</color>
      <color name="indigo">#4B0082</color>
      <color name="violet">#EE82EE</color>
      <!-- Some other standard and favored colors -->
      <color name="black">#000000</color>
      <color name="white">#F8F8FF</color>
      <color name="purple">#800080</color>
      <color name="purplecomplementary">#008000</color>
      <color name="teal">#008080</color>
      <color name="tealcomplementary">#800000</color>
      <color name="gray">#808080</color>
      <color name="skyblue">#6698FF</color>
      <color name="skybluecomplementary">#FFCC66</color>
      <color name="silver">#C0C0C0</color>
      <color name="cyan">#00FFFF</color>
      <color name="darkblue">#0000A0</color>
      <color name="brown">#A52A2A</color>
      <color name="olive">#808000</color>
      <color name="maroon">#800000</color>
      <color name="darkforestgreen">#254117</color>
      <color name="mediumforestgreen">#347235</color>
      <color name="seagreen">#4E8975</color>
    </resources>

The Proof is in the Putting it into Practice

You can test this out with the following XML, showing some of Mark Twain's best works:

XML
<TextView
    android:layout_width="0dip"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:lines="1"
    android:padding="5dip"
    android:textColor="@color/red"
    android:text="The Adventures of Tom Sawyer"
    android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:lines="1"
        android:padding="5dip"
        android:textColor="@color/orange"
        android:text="The Adventures of Huckleberry Finn"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:lines="1"
        android:padding="5dip"
        android:textColor="@color/yellow"
        android:text="Roughing It"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:lines="1"
        android:padding="5dip"
        android:textColor="@color/green"
        android:text="The Innocents Abroad"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:lines="1"
        android:padding="5dip"
        android:textColor="@color/blue"
        android:text="A Tramp Abroad"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:lines="1"
        android:padding="5dip"
        android:textColor="@color/indigo"
        android:text="Life on the Mississippi"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:lines="1"
        android:padding="5dip"
        android:textColor="@color/violet"
        android:text="A Connecticut Yankee in King Arthur's Court"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <TextView
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:lines="1"
        android:padding="5dip"
        android:textColor="@color/white"
        android:text="The Prince and the Pauper"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

Which should give you something like this:

Image 1

Get Psychedelic

You can, of course, add any more colors that you like to the color.xml file, including "your" (company or favorite) colors. You can find a list of colors and their corresponding hex values here and here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)