Click here to Skip to main content
12,693,693 members (34,652 online)
Click here to Skip to main content
Add your own
alternative version

Stats

8.4K views
5 bookmarked
Posted

How to Reference Colors by Name in Android Layouts

, 9 Jun 2014 CPOL
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
Founder Across Time & Space
United States United States
I am in the process of morphing from a software developer into a portrayer of Mark Twain. My monologue (or one-man play, entitled "The Adventures of Mark Twain: As Told By Himself" and set in 1896) features Twain giving an overview of his life up till then. The performance includes the relating of interesting experiences and humorous anecdotes from Twain's boyhood and youth, his time as a riverboat pilot, his wild and woolly adventures in the Territory of Nevada and California, and experiences as a writer and world traveler, including recollections of meetings with many of the famous and powerful of the 19th century - royalty, business magnates, fellow authors, as well as intimate glimpses into his home life (his parents, siblings, wife, and children).

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, including a two-volume social and cultural history of the U.S. which covers important events from 1620-2006: http://www.lulu.com/spotlight/blackbirdcraven

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionMy Vote of 1 Pin
FarhadFaghihi9-Jun-14 23:19
professionalFarhadFaghihi9-Jun-14 23:19 
AnswerRe: My Vote of 1 Pin
B. Clay Shannon10-Jun-14 4:05
professionalB. Clay Shannon10-Jun-14 4:05 
GeneralRe: My Vote of 1 Pin
FarhadFaghihi10-Jun-14 12:27
professionalFarhadFaghihi10-Jun-14 12:27 
GeneralRe: My Vote of 1 Pin
B. Clay Shannon10-Jun-14 12:32
professionalB. Clay Shannon10-Jun-14 12:32 
GeneralRe: My Vote of 1 Pin
FarhadFaghihi11-Jun-14 1:03
professionalFarhadFaghihi11-Jun-14 1:03 
GeneralRe: My Vote of 1 Pin
B. Clay Shannon11-Jun-14 4:04
professionalB. Clay Shannon11-Jun-14 4:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web02 | 2.8.170118.1 | Last Updated 9 Jun 2014
Article Copyright 2014 by B. Clay Shannon
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid