Graphics with Canvas

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.

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

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" android:id="@+id/View01"></edu.TestGraphics1.MyView> Note that edu.TestGraphics1.MyView is the name of the separate class. If another name is used, then this name should be changed Run

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

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