1. 2D Graphics: Part 1

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

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

21. Example: Drawing a Circle (continued)
©SoftMoore Consulting

22. 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

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

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

31. Relevant Links Creating a View Class Custom Drawing
Custom Drawing
Canvas and Drawables
Android Programming: 2D Drawing Part 1: Using onDraw
API Demos (Graphics Demos)
(navigate to ApiDemos/src/com/example/android/apis/graphics/)
©SoftMoore Consulting