Graphics Concepts CS 2302, Fall 2014

11/17/20142 Drawing in Android

11/17/20143 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/20144 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/20145 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/20146 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/20147 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) Color Paint Paint.Style Path (will be discussed later) Path

11/17/20148 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/20149 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/ Start an Application Start a new Android application In the same package with the main activity, create a new class named ViewForGraphics

11/17/ 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/ 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/ 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/ 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/ Drawing Text Some terminology Baseline Ascent, descent Leading Font family Drawing text Alignment

11/17/ 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/ Drawing Paths

11/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/ 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/ 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/ 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/ 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/ 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/ 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/ 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