Android Tutorial: Graphics and Custom Views

Thanks to Android’s extensive library, you have dozens of views and widgets at your disposal. If none of these meets your need, you can create a custom view and draw directly on it using the Android Graphics API.

This chapter discusses the use of some members of the Graphics API to draw on a canvas and create a custom view. A sample application called CanvasDemo is presented at the end of this chapter. related: Android Tutorial: Bitmap Processing

Overview

The Android Graphics API comprises the members of the android.graphics package. The Canvas class in this package plays a central role in 2D graphics. You can get an instance of Canvas from the system and you do not need to create one yourself. Once you have an instance of Canvas, you can call its various methods, such as drawColor, drawArc, drawRect, drawCircle, and drawText.

In addition to Canvas, Color and Paint are frequently used. A Color object represents a color code as an int. The Color class defines a number of color code fields and methods for creating and converting color ints. Color code fields defined in Color includes BLACK, CYAN, MAGENTA, YELLOW, WHITE, RED, GREEN and BLUE.

Take the drawColor method in Canvas as an example. This method accepts a color code as an argument.

public void drawColor(int color);

drawColor changes the color of the canvas with the specified color. To change the canvas color to magenta, you would write

canvas.drawColor(Color.MAGENTA);

A Paint is required when drawing a shape or text. A Paint determines the color and transparency of the shape or text drawn as well as the font family and style of the text.

To create a Paint, use one of the Paint class’s constructors:

public Paint()
public Paint(int flags)
public Paint(Paint anotherPaint)

If you use the second constructor, you can pass one or more fields defined in the Paint class. For example, the following code creates a Paint by passing the LINEAR_TEXT_FLAG and ANTI_ALIAS_FLAG fields.

Paint paint = new Paint(
        Paint.LINEAR_TEXT_FLAG | Paint.ANTI_ALIAS_FLAG); 

Hardware Acceleration

Modern smart phones and tablets come with a graphic processing unit (GPU), an electronic circuit that specializes in image creation and rendering. Starting with Android 3.0, the Android framework will utilize any GPU it can find on a device, resulting in improved performance through hardware acceleration. Hardware acceleration is enabled by default for any application targeting Android API level 14 or above.

Unfortunately, currently not all drawing operations work when hardware acceleration is turned on. You can disable hardware acceleration by setting the android:hardwareAccelerated attribute to false in either the application or activity element in your android manifest file. For example, to turn off hardware acceleration for the whole application, use this:

<application android:hardwareAccelerated="false">

To disable hardware acceleration in an activity, use this:

It is possible to use the android:hardwareAccelerated attribute in both application or activity levels. For example, the following indicates that all except one activity in the application should use hardware acceleration.

<application android:hardwareAccelerated="true"> 
    <activity ... /> 
    <activity android:hardwareAccelerated="false" /> 
</application>

Note: To try out the examples in this chapter, you must disable hardware acceleration.

Creating A Custom View

To create a custom view, extend the android.view.View class or one of its subclasses and override its onDrawmethod. Here is the signature of onDraw.

protected void onDraw (android.graphics.Canvas canvas)

The system calls the onDraw method and pass a Canvas. You can use the methods in Canvas to draw shapes and text. You can also create path and regions to draw more complex shapes.

The onDraw method may be called many times during the application lifecycle. As such, you should not perform expensive operations here, such as allocating objects. Objects that you need to use in onDraw should be created somewhere else.

For example, most drawing methods in Canvas require a Paint. Rather than creating a Paint in onDraw, you should create it at the class level and have it available for use in onDraw. This is illustrated in the following class.

public class MyCustomView extends View {
    Paint paint;
    {
        paint = ... // create a Paint object here
    }
    @Override
    protected void onDraw(Canvas canvas) {
        // use paint here.
    }
}

Drawing Basic Shapes

The Canvas class defines methods such as drawLine, drawCircle, and drawRect to draw shapes. For example, the following code shows how you can draw shapes in your onDraw method.

Paint paint = new Paint(Paint.FAKE_BOLD_TEXT_FLAG); 
    
protected void onDraw(Canvas canvas) { 
    // change canvas background color. 
    canvas.drawColor(Color.parseColor("#bababa")); 
        
    // draw basic shapes 
    canvas.drawLine(5,  5, 200, 5, paint); 
    canvas.drawLine(5,  15, 200, 15, paint); 
    canvas.drawLine(5,  25, 200, 25, paint); 
        
    paint.setColor(Color.YELLOW); 
    canvas.drawCircle(50, 70, 35, paint); 
        
    paint.setColor(Color.GREEN); 
    canvas.drawRect(new Rect(100, 60, 150, 80), paint); 
        
    paint.setColor(Color.DKGRAY); 
    canvas.drawOval(new RectF(160, 60, 250, 80), paint); 

    ...
}

Figure 1.1 shows the result.

Drawing Text

To draw text on a canvas, use the drawText method and a Paint. For example, the following code draws text using different colors.

// draw text 
textPaint.setTextSize(22); 
canvas.drawText("Welcome", 20, 100, textPaint); 
textPaint.setColor(Color.MAGENTA); 
textPaint.setTextSize(40); 
canvas.drawText("Welcome", 20, 140, textPaint);

Figure 1.2 shows the drawn text.

Transparency

Android’s Graphics API supports transparency. You can set the transparency by assigning an alpha value to the Paint used in drawing. Consider the following code.

// transparency 
textPaint.setColor(0xFF465574); 
textPaint.setTextSize(60); 
canvas.drawText("Android Rocks", 20, 340, textPaint); 
// opaque circle 
canvas.drawCircle(80, 300, 20, paint); 
// semi-transparent circles 
paint.setAlpha(110); 
canvas.drawCircle(160, 300, 39, paint); 
paint.setColor(Color.YELLOW); 
paint.setAlpha(140); 
canvas.drawCircle(240, 330, 30, paint); 
paint.setColor(Color.MAGENTA); 
paint.setAlpha(30); 
canvas.drawCircle(288, 350, 30, paint); 
paint.setColor(Color.CYAN); 
paint.setAlpha(100); 
canvas.drawCircle(380, 330, 50, paint);

Figure 1.3 shows some semi transparent circles.

Shaders

A Shader is a span of colors. You create a Shader by defining two colors as in the following code.

// shader 
Paint shaderPaint = new Paint(); 
Shader shader = new LinearGradient(0, 400, 300, 500, Color.RED,
        Color.GREEN, Shader.TileMode.CLAMP); 
shaderPaint.setShader(shader); 
canvas.drawRect(0, 400, 200, 500, shaderPaint);

Figure 1.4 shows a linear gradient shader.

Clipping

Clipping is the process of allocating an area on a canvas for drawing. The clipped area can be a rectangle, a circle, or any arbitrary shape you can imagine. Once you clip the canvas, any other drawing that would otherwise be rendered outside the area will be ignored.

Figure 1.5 shows a clip area in the shape of a star. After the canvas is clipped, drawn text will only be visible within the clipped area.