Click here to Skip to main content
Click here to Skip to main content
Go to top

How to Reference Colors by Name in Android Layouts

, 9 Jun 2014
Rate this:
Please Sign up or sign in to vote.
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:

android:textColor="#FFA500"

...you can do this instead:

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 version="1.0" encoding="utf-8"?>
    <resources></resources>
  3. Now expand the resources and add some values, such as:
    <?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:

    <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:

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)

Share

About the Author

B. Clay Shannon
Publisher "Found in the Translation"
United States United States
I am the entire team at "Found in the Translation," which produces multilingual books (paperback and Kindle versions) such as "Don Quixote: In Spanish and English, Paragraph-by-Paragraph" among many others (English paired with not only Spanish, but also French and even Finnish). You can see all those books here: http://jsfiddle.net/clayshannon/pRgQL/75/
 
Personal web sites that I have created can be seen at http://usamaporama.azurewebsites.net and http://bigsurgarrapata.azurewebsites.net/
 
Peripatetic and picaresque, I have lived in eight states; specifically, besides my native California (where I was born and where I now again reside) in chronological order: New York, Montana, Alaska, Oklahoma, Wisconsin, Idaho, and Missouri.
 
I am also a writer of both fiction (for which I use a nom de plume, "Blackbird Crow Raven", as a nod to my Native American heritage - I am "½ Cowboy, ½ Indian") and nonfiction: http://www.lulu.com/spotlight/blackbirdcraven
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionMy Vote of 1 PinprofessionalFarhadFaghihi9-Jun-14 22:19 
AnswerRe: My Vote of 1 [modified] PinprofessionalB. Clay Shannon10-Jun-14 3:05 
GeneralRe: My Vote of 1 PinprofessionalFarhadFaghihi10-Jun-14 11:27 
GeneralRe: My Vote of 1 PinprofessionalB. Clay Shannon10-Jun-14 11:32 
GeneralRe: My Vote of 1 PinprofessionalFarhadFaghihi11-Jun-14 0:03 
GeneralRe: My Vote of 1 PinprofessionalB. Clay Shannon11-Jun-14 3:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 9 Jun 2014
Article Copyright 2014 by B. Clay Shannon
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid