Android App Design: color usage

Posted on July 14, 2023 by codvator | Android Development

Summary

Introduction
Design Considerations
Applying color to your Android Apps
Conclusion

Introduction

Color is such an important aspect of design. When used effectively and sparingly, not only does it add a touch of professionalism to the designed application but it can also invoke brand emotion and create better user experiences. In today’s post, I want to talk about color usage in Android app design; how you can use it effectively and also show you how to apply color to your Android UI views.

We assume in this tutorial, you have basic knowledge of what color is. For a primer on what color is and how computers deal with it, check out this tutorial.

Design Considerations

To use color effectively, you need to follow certain design guidelines. These guidelines are meant to steer you in the right direction and not to limit your creativity and imagination. In designing and creating user interfaces, they have proved very helpful to me personally. These are:

Use color intentionally

I can’t say enough of this but before you use that color in your UI design, do you ask yourself a question like why am I specifically using this color in the first place? Who am I designing for? You need to think about it because color carries different meanings in different contexts.

For example; people tend to associate red as signaling danger, green for health and environmental friendliness, purple for luxury, blue for trust etc. Also, though some colors are gender neutral (like blue), while other colors like purple and pink are more liked by the female gender in comparison to blue that men usually like.

Now carrying this information with you in the design process, irrespective of whatever platform you are designing for will prove helpful since your design will be tailored to your user demographics, needs, preferences and common perceptions.

Use color consistently and sparingly

Avoid cluttering your products or service branding with lots of color. Its generally a good rule of thumb to stick with utmost three colors. Using the three colors, you can then;

Create a separate color palette for each color.
Each color palette contains different shades of that particular color.
Choose one color whose shades you will consistently apply to the entire user interface. This is usually a brand’s main color.
The other two colors and their palettes can then be variants to the main brand color. You bring them in to emphasize certain aspects of the user interface.

Mind your color contrast

Your need to ensure that there’s enough contrast between the colors you use for your foregrounds relative to those you use for the background. Foregrounds take on things like text while the backgrounds are used for surfaces.

As a result of good color contrast; your text, buttons, icons, widgets any other interfaces will stand out from your background. This is a good design principle since it makes your products more accessible to various people.

A good rule of thumb is to ensure that foreground objects like text need to have at least a 4.5:1 contrast with their background. There are a ton of tools available to check your contrast levels, including this one.

Understand google’s material design

Perhaps, Google’s intention to pen down design principles on which the material design is based was based on creating better android applications. But on reading through some of those principles, I find that these principles prove helpful even when you aren’t designing Android apps. for example; in website design

And just as Albert Einstein once said: “When you stop learning you start dying“. So just get enough of it and enhance your design skills by reading through Google’s material design.

Applying color to your Android apps

With all the above considerations at the back of your mind, applying color to your Android views is a simple thing. For better preparation, first read through this article about color and then follow the steps below:

Create a new Android Empty project and build it
Look through the Android File Structure for the colors.xml file. Its the color resource file and located under app/res/values folder.
Once found, open the file in the Android editor by double clicking it.

Color Resources File

This a file Android will by default create for you with sample colors already added. Its very useful in that all color resources used for your project are stored here to be accessed whenever needed. A color is defined by a color XML element which specifies its name attribute and its ARGB value

A typical colors.xml file looks as shown below.


<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="purple">#FF800080</color>
</resources>

Contrary to other digital design platforms (like in web designing), color values in Android apps are specified using only the hex ARGB value, with the alpha value being specified as first. If the alpha value is omitted, Android will assume that the color is fully opaque (the alpha value is FF).

The Android hex RGB value format

Adding Color Resources

To create a color resource, add a color element into the file above by specifying it name attribute and its hex #AARRGGBB value.

After the color is created, it can be referenced to style android views using the value of its name attribute like purple_200, white, black etc. Changes to your user interface are done using the design editor or by editing code in your layout files found under app/res/layout folder

For example the code below shows you how can style a button’s background to be purple with its text color being white.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="@dimen/layout_margin"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/gotoMainButton"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:background="@color/purple"
        android:text="Go to Second Activity"
        android:textColor="@color/white" />
</LinearLayout>

The main properties to note here are android:background and android:textColor. The former changes the button’s background color while the latter changes its text color. Thus for the above code, the button’s background is set to a purple and its text color set to a white.

The @ symbol simply means that the value applied to a particular property is a color resource (which was created in the colors.xml file) rather than hard coded into the design. For example, for this same effect we could hard code all our color values using the hex ARGB values; purple (#FF800080) and white (#FFFFFFFF) as shown below.


    <Button
        android:id="@+id/gotoMainButton"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:background="#FF800080"
        android:text="Go to Second Activity"
        android:textColor="#FFFFFFFF" />

Conclusion

In conclusion, color is such an important aspect in user interface design that careful consideration of what effects and goals its to achieve is a must. This is promotes accessibility and makes products as usable as possible for everyone, regardless of disability or impairment.