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

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' ● Characteristics of text such as font family, font size, and weight 11/17/2014 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 ● Alignment 11/17/2014 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. ● 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 18

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 ● 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 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 ● The color will have value .75 but with random hue and saturation 11/17/2014 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 ● It tells the system that the current state of the view is not valid, so it must be redrawn 11/17/2014 25