Graphics Concepts

CS 2302, Fall 2014

11/17/2014 2

Drawing in Android

11/17/2014 3

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 4

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 5

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 6

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 7

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 8

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' Characteristics of text such as font family, font size, and

weight

11/17/2014 9

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 10

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 11

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 12

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 13

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 14

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 15

Drawing Text

Some terminology Baseline Ascent, descent Leading Font family

Drawing text Alignment

11/17/2014 16

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 17

Drawing Paths

11/17/2014 18

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.

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 the point

where it started, the area enclosed can be filled.

11/17/2014 19

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 20

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 21

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 22

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 23

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 The color will have value .75 but with random hue and

saturation

11/17/2014 24

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 25

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

It tells the system that the current state of the view is not valid, so it must be redrawn