2D Graphics: Part 1

Android Graphics Libraries custom 2D graphics library in packages android.graphics android.graphics.drawable android.graphics.drawable.shapes android.view.animation 3D Graphics OpenGL ES (subset of OpenGL for embedded systems) in packages android.opengl javax.microedition.khronos.opengles The slides in this section will concentrate on the 2D graphics library. ©SoftMoore Consulting

Hardware Acceleration Android 3.0 (Honeycomb, API level 11) included a new 2D rendering pipeline designed to support hardware acceleration. primarily for tablets originally all drawing operations carried out using the GPU Android 4.0 (Ice Cream Sandwich, API level 14) contained an improved version of the hardware-accelerated 2D rendering pipeline. extended hardware acceleration to phones on by default for all applications at API levels 4.0 and above can be turned on for applications at lower API levels by adding android:hardwareAccelerated="true" to the <application> element in AndroidManifest.xml ©SoftMoore Consulting

Drawing – Basic Concepts An application that does not require a significant amount of processing or frame-rate speed will typically create a custom View component and draw onto a Canvas in the view’s onDraw() callback method. A Canvas is passed as a parameter to this method. The onDraw() method is called by the Android framework to request that a View draw itself. An application can request that it’s View be redrawn by calling invalidate(), which causes Android to then call the onDraw() method. Note that the callback to onDraw() is not guaranteed to be instantaneous. ©SoftMoore Consulting

Main Classes Used in 2D Graphics Color – alpha (opaqueness), red, green, blue Paint – brush, style, fill, paint, font, font metrics…. Bitmap – holds the actual pixels being drawn Canvas – a way to draw to the screen or bitmap supports 2D transforms (scale, translate, rotate) drawing is actually performed on an underlying Bitmap has primitives for drawing lines, circles, rectangles, text, etc. Path – circles, rectangles, shape text, clipping shapes Drawable – for things that know how to draw on a canvas ©SoftMoore Consulting

Class Color Colors are implemented as four bytes representing the alpha, red, green, and blue components all four bytes are packed into a 32-bit integer (type int) each component has a value between 0 and 255 (00 and FF hex) alpha is a measure of transparency 0 for fully transparent 255 for opaque Constants in class Color (type int) BLACK – BLUE – CYAN DKGRAY – GRAY – GREEN LTGRAY – MAGENTA – RED TRANSPARENT – WHITE – YELLOW ©SoftMoore Consulting

Class Color (continued) Static methods to create a color object static int argb(int alpha, int red, int green, int blue) static int rgb(int red, int green, int blue) Note: If only three values are specified for a color, then the alpha component is assumed to be 255 (i.e., opaque). ©SoftMoore Consulting

Obtaining a Color Object (All color values below are equal.) Use one of the predefined constants in class Color int color1 = Color.MAGENTA; Use the static method argb() int color2 = Color.rgb(255, 0, 255); int color3 = Color.argb(0xFF, 0xFF, 0x00, 0xFF); Defined in a resource file (colors.xml) <?xml version="1.0" encoding="utf-8"?> <resources> <color name="magenta">#FFFF00FF</color> </resources> ... int color4 = ContextCompat.getColor(MainActivity.this, R.color.magenta); ©SoftMoore Consulting

Class Paint A Paint object holds the style and color information about how to draw geometries, text, and bitmaps. Selected methods in class Paint void setColor(int color) void setStrokeWidth(float width) void setStyle(Paint.Style style) void setTextAlign(Paint.Align align) void setTextSize(float textSize) Typeface setTypeface(Typeface typeface) void setUnderlineText(boolean underlineText) ©SoftMoore Consulting

Example: Using Class Paint Paint paint = new Paint(); paint.setAntiAlias(true); paint.setColor(Color.MAGENTA); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(2); Notes: Antialiasing reduces jagged edges for bitmap images to give a smoother appearance. Style STROKE is used to paint the perimeter of the circle. The default style is FILL. ©SoftMoore Consulting

Class Canvas Intuitively you can think of a Canvas as representing the surface on which you draw, but technically drawing is actually performed on an underlying Bitmap. Features provided by class Canvas contains primitives for drawing lines, circles, rectangles, text, etc. provides support for clipping (restriction of an image to a specified subregion of the canvas in order to protect other portions of the canvas. Primitives lying outside the clip region are not drawn. implements 2D transforms scale, translate, and rotate ©SoftMoore Consulting

Matrix Transformations Class Matrix holds a 3x3 matrix for transforming coordinates provides the capability to perform transformations on a View It is possible to create a Matrix corresponding to the desired transformation and then apply it via the following Canvas method: void set(Matrix src) Class Canvas provides convenience methods for common transformations. void rotate(float degrees) void scale(float sx, float sy) void skew(float sx, float sy) void translate(float dx, float dy) ©SoftMoore Consulting

Selected Methods in Class Canvas void drawCircle(float cx, float cy, float radius, Paint paint) Draw the specified circle using the specified paint. void drawColor(int color) Fill the entire canvas bitmap with the specified color. public void drawLine (float startX, float startY, float stopX, float stopY, Paint paint) Draw a line segment with the specified coordinates and paint. void drawLines(float[] pts, Paint paint) Draw a series of lines. Each line is taken from 4 consecutive values in the pts array. ©SoftMoore Consulting

Selected Methods in Class Canvas (continued) void drawPath(Path path, Paint paint) Draw the specified path using the specified paint. void drawRect(float left, float top, float right, float bottom, Paint paint) Draw the specified Rect using the specified paint. void drawRoundRect(RectF rect, float rx, float ry, Paint paint) Draw the specified rounded rectangle using the specified paint. void drawText(String text, float x, float y, Paint paint) Draw the text, with origin at (x,y), using the specified paint. ©SoftMoore Consulting

Creating a Custom View with Graphics Basic Idea: Extend the View class and put drawing code in the onDraw() method. Since the new class extends View, it can also listen for and respond to events; e.g., by overriding View methods setOnClickListener() and setOnTouchListener(). ©SoftMoore Consulting

Example: Drawing a Circle public class GraphicsView extends View { private Paint paint; public GraphicsView(Context context) super(context); init(); } public GraphicsView(Context context, AttributeSet attrs) super(context, attrs); (continued on next slide) ©SoftMoore Consulting

Example: Drawing a Circle (continued) protected void init() { paint = new Paint(); paint.setAntiAlias(true); paint.setColor(Color.MAGENTA); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(2); } (continued on next slide) ©SoftMoore Consulting

Example: Drawing a Circle (continued) protected void onDraw(Canvas canvas) { float centerX = getWidth()/2; float centerY = getHeight()/2; // set radius to 3/4 of the smaller dimension float radius = (3*(centerX <= centerY ? centerX : centerY))/4; canvas.drawColor(Color.WHITE); canvas.drawCircle(centerX, centerY, radius, paint); } ©SoftMoore Consulting

Example: Drawing a Circle (continued) // declare view in the layout file with full package name <edu.citadel.android.graphics2d_demo.GraphicsView android:layout_width="match_parent" android:layout_height="match_parent"/> ©SoftMoore Consulting

Example: Drawing a Circle (continued) public class MainActivity extends AppCompatActivity { @Override public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); } ©SoftMoore Consulting

Example: Drawing a Circle (continued) ©SoftMoore Consulting

Class Path Class Path encapsulates compound geometric paths consisting of straight line segments and curves. can be drawn with canvas.drawPath(path, paint) Enum Path.Direction CCW (for counter-clockwise) CW  (for clockwise) Enum Path.FillType EVEN_ODD INVERSE_EVEN_ODD INVERSE_WINDING WINDING  ©SoftMoore Consulting

Selected Methods in Class Path void addCircle(float x, float y, float radius, Path.Direction dir) Add a closed circle contour to the path. void addOval(RectF oval, Path.Direction dir) Add a closed oval contour to the path. void addRect(float left, float top, float right, float bottom, Path.Direction dir) Add a closed rectangle contour to the path. void addRoundRect(RectF rect, float[] radii, Path.Direction dir) Add a closed round-rectangle contour to the path. ©SoftMoore Consulting

Selected Methods in Class Path (continued) void close() Close the current contour. void lineTo(float x, float y) Add a line from the last point to the specified point (x,y). void moveTo(float x, float y) Set the beginning of the next contour to the point (x,y). void setFillType(Path.FillType ft) Set the path's fill type. void transform(Matrix matrix) Transform the points in this path by matrix. ©SoftMoore Consulting

Example: Using Class Path to Draw a Circle Similar to the “Draw Circle” example: Declare a Path instance variable for a circle private Path circle; Construct a new Path for the circle in method init() circle = new Path(); Add a circle to the path and draw it circle.addCircle(centerX, centerY, radius, Direction.CW); canvas.drawPath(circle, paint); ©SoftMoore Consulting

Drawing Text Among the most important Canvas draw methods are those used to draw text since, unlike some drawing commands, text rendering capabilities are not duplicated in other Android classes. The basic draw methods simply draws the text starting at coordinates passed as parameters. void drawText(String text, float x, float y, Paint paint) It is also possible to draw text along a Path. For a Path that defines a circle, the text is drawn in the same direction (clockwise/counterclockwise) as the circle. void drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint) ©SoftMoore Consulting

Example: Drawing Text on a Path protected void init() { paint = new Paint(); paint.setAntiAlias(true); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(2); paint.setColor(Color.BLUE); circle = new Path(); textSize = 35; textPaint = new Paint(); textPaint.setColor(Color.BLUE); textPaint.setTextSize(textSize); textPaint.setStyle(Paint.Style.FILL); textPaint.setStrokeWidth(1); } (continued on next slide) ©SoftMoore Consulting

Example: Drawing Text on a Path (continued) @Override protected void onDraw(Canvas canvas) { float centerX = getWidth()/2; float centerY = getHeight()/2; // set radius to 3/4 of the smaller dimension float radius = (3*(centerX <= centerY ? centerX : centerY))/4; canvas.drawColor(Color.WHITE); circle.addCircle(centerX, centerY, radius, Direction.CW); canvas.drawPath(circle, paint); String quote = getContext().getString(R.string.quote); (continued on next slide) ©SoftMoore Consulting

Example: Drawing Text on a Path // draw text three fourths the distance around the circle float threeFourths = (float)(3*Math.PI*radius)/2; // approx. path length of the quote float strPathLength = (float) (quote.length()*textSize*0.205); float hOffset = threeFourths - strPathLength; canvas.drawTextOnPath(quote, circle, hOffset, textSize, textPaint); } ©SoftMoore Consulting

Example: Drawing Text on a Path (continued) ©SoftMoore Consulting

Relevant Links Creating a View Class Custom Drawing https://developer.android.com/training/custom-views/create-view.html Custom Drawing https://developer.android.com/training/custom-views/custom-drawing.html Canvas and Drawables https://developer.android.com/guide/topics/graphics/2d-graphics.html Android Programming: 2D Drawing Part 1: Using onDraw http://courses.coreservlets.com/Course-Materials/pdf/android/Android-Drawing-1.pdf API Demos (Graphics Demos) https://android.googlesource.com/platform/development/+/master/samples (navigate to ApiDemos/src/com/example/android/apis/graphics/) ©SoftMoore Consulting