1. Graphics with Canvas

2. Approaches for Graphics
Load image from /res/drawable
Best for static images
OpenGL ES
3D graphics (i.e., transforms such as spin can be applied to graphical objects)
Draw on Canvas or SurfaceView
Canvas for drawing within the main thread
SurfaceView is faster, and better for detailed graphics
Note, if your main thread take too long, the OS will kill it, and it will be difficult to debug.

3. Drawable shapes Make new app, edu.eleg454.Graphics1
In onCreate is setContentView(R.layout.main)
Instead of the view generated by R.layout.main, we use our own, which extends View
In Graphics1 class, add
private class MyView extends View {
public MyView(Context context) {
super(context); }
@Override
protected void onDraw(Canvas canvas) {
ShapeDrawable mDrawable = new ShapeDrawable(new OvalShape());
mDrawable.getPaint().setColor(0xff74AC23);
mDrawable.setBounds(10, 10, 310, 60);
mDrawable.draw(canvas);
Then, in onCreate, replace setContentView(R.layout.main); with setContentView(new MyView(this));
Run
Besides OvalShape, ArcShape, PathShape, RoundRectShape, and Shape

4. View Widget
The previous method required us to replace setContentView(R.layout.main);
This resulted in the entire view being controlled by our view
E.g., we could not have a button in the view where we place the button with the layout editor
To fix this, we add a view widget
Move MyView to separate class
Also, in MyView add
public MyView(Context context, AttributeSet attrs) {
super(context, attrs); }
Go to main.xml graphical layout editor
drag linear layout
Drag text box
So the layout is TextView, linear layout, TextView
Go to main.xml (not the editor)
Find second <LinearLayout ….> </LinearLayout>
Before </LinearLayout>, add
<edu.TestGraphics1.MyView android:layout_width="wrap_content" android:layout_height="wrap_content"
Note that edu.TestGraphics1.MyView is the name of the separate class. If another name is used, then this name should be changed
Run

5. Canvas Drawing
Canvas has many drawing functions, e.g., drawPath(Path path, Paint paint)
Path: sequence of graphical objects
Path path = new Path();
Make line between two points
path.moveTo(10,10); // starting place
path.lineTo(60,60);
add circle somewhere
path.addCircle(50,250,20, Path.Direction.CCW);
Paint – for setting color and line width
Paint paint = new Paint();
paint.setDither(true);
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(2);
Draw view
canvas.drawPath(path, paint);
run

6. notes Use invalidate() to force redraw
In TestGraphics, add variable
MyView myView;
In TestGraphics.onCreate(), add
myView = (MyView) findViewById(R.id.View01);
Then myView.invalidate(); will force redraw
Is canvas documentation for more graphics
E.g., drawBitmap has several functions
Avoid declaring and setting variables in onDraw, instead, setting them elsewhere and access them from draw
Use SurfaceView for faster screen drawing