CS 2302, Fall 2014 Graphics Concepts Drawing in Android 11/17/2014 - - PowerPoint PPT Presentation

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
• ut 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
• nDraw 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
• r 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
• Use getWidth() and getHeight() so that the drawing will

scale with the size of the view

• Fill the path first
• Outline the path second

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