CS 2302, Fall 2014
Graphics Concepts
Drawing in Android
11/17/2014
2
Android Alternatives

Android provides several ways to create graphic images

Drawable objects


Defined by program code

Defined in resource files

Can be manipulated and animated
2D Canvas


More in a moment, this is the approach we will take
3D Canvas
11/17/2014
3
Constructive Graphics



Android supports building graphic images from simple
components
This is sometimes called vector graphics, recalling very
early graphics display systems
The organization of the visible interface and underlying
code is very similar to other systems

Event driven drawing

Constructive graphics
11/17/2014
4
Drawing Surface

Any View can be used as a drawing surface
Reference
Every View has an associated Canvas object that
provides various drawing methods



Canvas reference
Even buttons and other widgets can be drawn on,
though that may conflict with the drawing done for their
basic look
View has a method onDraw() that is called by the system
when any drawing needs to be done


11/17/2014
5
Why Event Driven Drawing?



In older systems, especially before Windows and Linux,
drawing was carried out directly and immediately by
programming commands
In Android and other GUI systems, drawing is delayed until
the system asks for it by calling a method
This is because there are many situations in which the
drawing may be needed, based on external circumstances

The application is starting

The application is being uncovered

The application is being un-minimized
11/17/2014
6
Supporting Classes


There are numerous supporting classes needed to carry
out effective drawing.
We mention just a few for now (the links lead to reference
pages)

Color (already discussed)

Paint

Paint.Style

Path (will be discussed later)
11/17/2014
7
Class Paint


Paint objects are used to specify many characteristics of
drawing
Paint can be used to specify

The color used to outline and/or fill shapes

The style of drawing a shape: filled or outlined

Width of lines and curves

How lines and curves will be 'joined' and 'capped'

11/17/2014
Characteristics of text such as font family, font size, and
weight
8
A Widget to Draw On



Since drawing is carried out when the system calls the
onDraw method in View, we must create a new class that

Extends View

Overrides onDraw
The overriding method will carry out the drawing
The onDraw method takes one parameter, a Canvas that
can be used to create the graphics we wish
11/17/2014
9
Start an Application


Start a new Android application
In the same package with the main activity, create a new
class named ViewForGraphics
11/17/2014
10
View Details


View does not have a default constructor, so we must
provide at least one constructor that uses 'super'
It is convenient to use the constructor that takes two
parameters
public ViewForGraphics(Context context, AttributeSet attrs)

This will allow the new class to be used like any other
widget in the GUI editor
We won't use that constructor in code
When overriding onDraw, call the super method to make
sure any standard actions are taken


11/17/2014
11
Creating the Interface

In the GUI editor, remove the standard TextView

Find the new 'widget' at the bottom of the palette

Drag the new widget into the editing area

Set the widget to fill the space completely

Running the app at this point will show nothing
11/17/2014
12
Creating Paint

Any drawing needs paint

A default Paint object will work, but is monochrome

Define a color

Define the style for filling or not

Define the stroke width
11/17/2014
13
Drawing a Figure

Start with a Paint object

Use one of the drawing methods from Canvas


Rectangle, Circle and Oval are easy to use
The example we will do is

Draw a rectangle outline

Draw a filled oval using the same coordinates

The oval touches the sides of the rectangle

Drawing a circle uses the center and radius, so beware!
11/17/2014
14
Drawing Text


Some terminology

Baseline

Ascent, descent

Leading

Font family
Drawing text

11/17/2014
Alignment
15
Add Some Text

Write the word 'Center' in the center of the oval/rectangle
combination

Set the text size to 40 to make it more visible

Try different text alignment settings

Try both stroke and fill for the characters
11/17/2014
16
Drawing Paths
11/17/2014
17
Drawing models




Drawing models explain how color is applied to the screen
to create graphics.
We’ve not had to worry about that so far because we’ve
worked with very simple figures.
However, even to draw something as simple as a triangle
and fill it in, our tools are not adequate.
Drawing models usually work with a pen which is moved
around.


11/17/2014

Sometimes the pen leaves a trace, sometimes it does
not
The color of the trace the pen leaves can change
If the pen traces a closed curve, that is it finishes at the18
point where it started, the area enclosed can be filled.
Turtle Graphics

One drawing model, called Turtle Graphics was
popularized by a language called Logo.

The pen is called a turtle in this model

In this model, the turtle has a position and heading.

The turtle can turn in place, changing its heading

The turtle can move a given distance in the direction it is
currently heading
11/17/2014
19
Android Paths





The model used in Android for paths is similar, but only
works with position.
The pen has a current position at any time
The pen can be moved to another position. The pen can
leave a trace or not.
The pen can move in a straight line to another position or
along a variety of curved segments.
If the path is the outline of an area to be filled, the path is
ended by closing the path.

Once the Path is created, it must be drawn to be visible

Path Reference
11/17/2014
20
Polygonal Paths

Paths made of line segments

Create a Path object

Apply methods


moveTo(x,y)

lineTo(x,y)

Close()
Use drawPath to make display the path
11/17/2014
21
Examples



We'll continue using the example project we used earlier
Each example will be implemented as a new widget that
can be dragged into the user interface
The first example will be a path that has five line
segments: two will be invisible, three will be visible

Fill the path first

Outline the path second

Note the visible and invisible segments

Note that even invisible segments bound the interior
11/17/2014
22
Diamonds


Another view will draw diamonds
A diamond is created by connecting the midpoints of the
sides of a rectangle


Write a method that will create and return a diamond
shaped path given the left, top, right and bottom
coordinates of the enclosing rectangle
The view will draw many diamonds in random position and
with random color

11/17/2014
The color will have value .75 but with random hue and
saturation
23
Interactive Diamonds View





This is the same as the basic diamond view except that
every time the view is clicked, the number of diamonds is
reduced by 1
The view will contain a listener registered to 'this'
Once the number of diamonds has been reduced, the view
must be redrawn
Note that, right now, clicking the view causes no visible
change
Write a message to the log file (visible in the logcat view)
to show that the listener is actually active
11/17/2014
24
Forcing Redrawing

There is an internal change but not a visible change

The onDraw method must be executed somehow

However, we don't have a Canvas, necessary to call
onDraw

There's no good way to create a useful one either

The system must call onDraw

So, we ask the system to call onDraw for us

This is what the method 'invalidate' does

11/17/2014
It tells the system that the current state of the view is
not valid, so it must be redrawn
25