Tutorial details

Build Brighter Apps: Using Colour in Android | App Code for Sale | Preview

Build Brighter Apps: Using Colour in Android | Android Tutorial

How to quickly and easily apply colour to a range of UI elements: backgrounds, text and buttons, and demonstrate how to make working with colours easier by defining them in a designated XML file

Overview PAGE TOP

One of the most effective ways of making your Android app stand out is to add some colour. In this tutorial, I’ll show you how to quickly and easily apply colour to a range of UI elements: backgrounds, text and buttons, and demonstrate how to make working with colours easier by defining them in a designated XML file. In the final section of the tutorial we’ll move onto something more advanced: using a color state list to change the colour of a button whenever it’s pressed.

Getting Started

The quickest way to get started with colour is to leverage one of Android’s predefined colours: black or white. Create a new Android project and delete any default UI

elements and layouts that Eclipse generates. To get us started, we’ll change this project’s background to black:

  • Open your XML file in res/layout.
  • Add the following, paying particular attention to the “android:background” attribute:

    1   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2           xmlns:tools="http://schemas.android.com.tools"
    3           android:background="@color/black"
    4           android:layout_width="match_parent"
    5           android:layout_height="match_parent"   >
    6   
    7          </RelativeLayout>
    

Switch to Eclipse’s graphical layout editor and you will see that the background has changed to black.

Colour Constants

If you want to change the background colour to anything more adventurous than black or white, you’ll need to use colour constants. A list of these constants is available at the official Android docs. At its most basic level, changing the background colour is simply a matter of replacing “@color/black” with one of these codes. For example, the value for ‘blue’ is:

1   Constant Value: -16776961 ff0000ff

Enter the following to change the background to blue:

1   android:background="#ff0000ff"

Or, to change the background colour to green enter:

1   android:background="#ff00ff00"

This is a good starting point, but you’ll have already noticed how time-consuming it is to constantly flit between the Android docs and your Eclipse installation. To save yourself time, you should define all the colours you’ll be using in your project in advance.

Creating a Color.xml File

There are several possible ways to define colour resources, but it’s good practice to keep them together in a dedicated color.xml file in the res/values folder. Eclipse doesn’t generate this file by default, so you’ll need to add it your project first.

  1. Right-click on the ‘values’ folder and select ‘New’ from the context menu. If you cannot see an ‘Android XML File’ option you can select ‘Other…’ to bring up a more comprehensive list of options.
  2. In the subsequent dialog, name your new XML file ‘color’ and select ‘Finish.’

sob.jpg

3.Success! A color.xml file has been added to the ‘Values’ folder.

tyu.jpg

Defining Colour Constants

Now we’ve created a colour.xml file to hold our colour values, we’ll define the colour blue so that we can reference it as though it’s a predefined colour.

  1. Open the color.xml file and switch to the ‘color.xml’ tab if it doesn’t open automatically.
  2. Enter the following:

    1   <?xml version="1.0" encoding="utf-8"?>
    2   
    3   <resources>
    4   
    5   <color name="blue">#ff0000ff</color>
    6   
    7   </resources>
    
  3. Return to your res/layout XML file and set the background colour, in exactly the same way as the predefined ‘black’ we used earlier:

    1 android:background="@color/blue"

  4. Switch to the graphical layout editor. The background should now be blue.

Defining new colours is now simply a matter of returning to the ‘color.xml’ file and adding another line of XML. Try changing the background colour one last time by defining a new colour:

1   <color name="LightPink">#FFE4E1</color>

Return to your layout file and replace “@color/blue” with “@color/LightPink.” It’s as easy as that!

Applying Colour to UI Elements

But this exciting new world of colour isn’t just restricted to your app’s background. Once you’ve defined your colours, a single line of XML is all that’s required to change the colour of your text:

01  <TextView
02  
03  android:id="@+id/textView1"
04  
05  android:layout_width="wrap_content"
06  
07  android:layout_height="wrap_content"
08  
09  android:layout_alignParentLeft="true"
10  
11  android:layout_alignParentTop="true"
12  
13  android:textColor="@color/blue"
14  
15  android:text="This is blue text" />

frew.jpg

You can also change the background colour of a button:

01  <Button
02  
03  android:id="@+id/button1"
04  
05  android:layout_width="wrap_content"
06  
07  android:layout_height="wrap_content"
08  
09  android:layout_alignParentLeft="true"
10  
11  android:layout_alignParentTop="true"
12  
13  android:background="@color/blue"
14  
15  android:text="Button" />

Or combine the two to create a button with a blue background and light pink text:

01  <Button
02  
03  android:id="@+id/button1"
04  
05  android:layout_width="wrap_content"
06  
07  android:layout_height="wrap_content"
08  
09  android:layout_alignParentLeft="true"
10  
11  android:layout_alignParentTop="true"
12  android:background="@color/blue"
13  
14  android:textColor="@color/LightPink"
15  
16  android:text="Button" />

hut.jpg

Using Android’s Color State List

There are several ways to let a user know you’ve registered their activity within your app, but one of the simplest is to use a ‘color state list’ to change the colour of a UI element. A ‘color state list’ is essentially an object that changes colour to correspond with the changing state of a related View object. In this final part of the tutorial, I’ll show you how to use a color state list in your project, using the example of a button that changes colour as it’s pressed.

  1. Define Some Colours

Before we start, you should return to the colors.xml file and add the colours you’ll be using in your app.

1   <color name="red">#ff00</color>
2   <color name="green">#f0f0</color>

2.Define a Color State List Resource

Create a ‘color_list.xml’ file in the res/drawable folder.

budhhi.jpg

An empty color state list uses the following opening and closing XML:

1   <?xml version="1.0" encoding="utf-8"?>
2   
3   <selector xmlns:android="http://schemas.android.com/apk/res/android">
4   
5   </selector>

Each colour in your list is defined using the tag, referring to the colours as a standard drawable resource. You’ll also need to attach each to a state, so choose from the following:

  • android:state_pressed=”true/false”
  • android:state_focused=”true/false”
  • android:state_selected=”true/false”
  • android:state_checkable=”true/false”
  • android:state_checked=”true/false”
  • android:state_enabled=”true/false”
  • android:statewindowfocused=”true/false”

We’ll create two states, the default state and android:state_pressed. Note that the default value of the item should always be positioned at the bottom of the list, as your Eclipse installation will take the first item in the list that matches the current state. If the first state is the default, Eclipse will never even look at the rest of your states.

01  <?xml version="1.0" encoding="utf-8"?>
02  
03  <selector xmlns:android="http://schemas.android.com/apk/res/android">
04  
05  <item
06  
07  android:state_pressed="true"
08  
09  android:drawable="@color/green" />
10  
11  <item
12  
13  android:drawable="@color/red" />
14  
15  </selector>

3.Create Your UI

Now it’s time to put your color state list to work! Open your layout file and create a layout with a single button. In this example, I’m using:

01  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
02  
03  android:layout_width="match_parent"
04  
05  android:layout_height="match_parent"  >
06  
07  <Button
08  
09  android:id="@+id/button1"
10  
11  style="?android:attr/buttonStyleSmall"
12  
13  android:layout_width="wrap_content"
14  
15  android:layout_height="wrap_content"
16  
17  android:layout_alignParentLeft="true"
18  
19  android:layout_alignParentTop="true"
20  
21  android:layout_marginTop="18dp"
22  
23  android:text="@string/click"  />
24  
25  </RelativeLayout>

Tip

. Don’t forget to create a string resource for @string/click. Open your strings.xml file and add the following:

1   <string name="click">Click Me</string>

4.Link It All Up!

Now it’s time to link your Color State List to the button you just created. Reference the list as you would any drawable resource:

01  <Button
02  
03  android:id="@+id/button1"
04  
05  style="?android:attr/buttonStyleSmall"
06  
07  android:layout_width="wrap_content"
08  
09  android:layout_height="wrap_content"
10  
11  android:layout_alignParentLeft="true"
12  
13  android:layout_alignParentTop="true"
14  
15  android:layout_marginTop="18dp"
16  
17  android:text=“@string/click"
18  
19  android:background=“@drawable/color_list" />

5.Check Your Work

Boot up the Android Emulator and take a look at how this displays.

sort.jpg

Now click the button and see what happens.

hoye.jpg

Try defining additional states and colours in your project, and experimenting with different UI elements such as checkboxes, to really make your Android app stand out from the competition!

Reference PAGE TOP

http://www.javacodegeeks.com/2013/02/build-brighter-apps-using-colour-in-android.html

1 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.