Drawing on the Screen Android

In Chapter “Exploring User Interface Screen Elements,” and Chapter “Designing User Interfaces with Layouts,” we talk about layouts and the various View classes available in Android to make screen design simple and efficient. Now we must think at a slightly lower level and talk about drawing objects on the screen. With Android, we can display images such as PNG and JPG graphics, as well as text and primitive shapes to the screen. We can paint these items with various colors, styles, or gradients and modify them using standard image transforms. We can even animate objects to give the illusion of motion.

Working with Canvases and Paints

To draw to the screen, you need a valid Canvas object. Typically we get a valid Canvas object by extending the View class for our own purposes and implementing the

For example, here’s a simple View subclass called ViewWithRedDot. We override the onDraw() method to dictate what the View looks like; in this case, it draws a red circle on a black background.

We can then use this View like any other layout. For example, we might override the onCreate() method in our Activity with the following:

setContentView(new ViewWithRedDot(this));

The resulting screen looks something like Figure.

The ViewWithRedDot view draws a red circle on a black canvas background.

The ViewWithRedDot view draws a red circle on a black canvas background

Understanding the Canvas

The Canvas (android.graphics.Canvas) object holds the draw calls, in order, for a rectangle of space. There are methods available for drawing images, text, shapes, and support for clipping regions.

The dimensions of the Canvas are bound by the container view. You can retrieve the size of the Canvas using the getHeight() and getWidth() methods.

Understanding the Paint

In Android, the Paint (android.graphics.Paint) object stores far more than a color. The Paint class encapsulates the style and complex color and rendering information, which can be applied to a drawable like a graphic, shape, or piece of text in a given Typeface.

Working with Paint Color

You can set the color of the Paint using the setColor() method. Standard colors are predefined within the android.graphics.Color class. For example, the following code sets the paint color to red:

Working with Paint Antialiasing

Antialiasing makes many graphics—whether they are shapes or typefaces—look smoother on the screen. This property is set within the Paint of an object.

For example, the following code instantiates a Paint object with antialiasing enabled:

Working with Paint Styles

Paint style controls how an object is filled with color. For example, the following code instantiates a Paint object and sets the Style to STROKE, which signifies that the object should be painted as a line drawing and not filled (the default):

Working with Paint Gradients

You can create a gradient of colors using one of the gradient subclasses.The different gradient classes, including LinearGradient, RadialGradient, and SweepGradient, are available under the superclass android.graphics.Shader.

All gradients need at least two colors—a start color and an end color—but might contain any number of colors in an array. The different types of gradients are differentiated by the direction in which the gradient “flows.” Gradients can be set to mirror and repeat as necessary.

You can set the Paint gradient using the setShader() method.

An example of a LinearGradient (top), a RadialGradient (right), and a SweepGradient (bottom).

An example of a LinearGradient (top), a RadialGradient (right), and a SweepGradient (bottom).

Working with Linear Gradients

A linear gradient is one that changes colors along a single straight line. The top-left circle in Figure is a linear gradient between black and red, which is mirrored.

You can achieve this by creating a LinearGradient and setting the Paint method setShader() before drawing on a Canvas, as follows:

Working with Radial Gradients

A radial gradient is one that changes colors starting at a single point and radiating outward in a circle. The smaller circle on the right in Figure is a radial gradient between green and black.

You can achieve this by creating a RadialGradient and setting the Paint method setShader() before drawing on a Canvas, as follows:

Working with Sweep Gradients

A sweep gradient is one that changes colors using slices of a pie. This type of gradient is often used for a color chooser. The large circle at the bottom of Figure is a sweep gradient between red, yellow, green, blue, and magenta.

You can achieve this by creating a SweepGradient and setting the Paint method setShader() before drawing on a Canvas, as follows:

Working with Paint Utilities for Drawing Text

The Paint class includes a number of utilities and features for rendering text to the screen in different typefaces and styles. Now is a great time to start drawing some text to the screen.


Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Android Topics