1. Basic 2D Graphics in Android

2. Android Graphics Programming There are many ways to do graphics programming in Android – 2D vs. 3D – static vs. dynamic Many of them require a lot of knowledge of the underlying graphics libraries We will look at the very simplest form of 2D graphics

3. Drawing on a Canvas Visible elements in an Android UI are called Views Each View has an associated Canvas When the View is shown, its onDraw method is automatically called by Android It uses the Canvas to render the different things it wants to display We can create our own View with our own onDraw method to display basic objects using the Canvas

4. Canvas and Paint Canvas has methods for drawing Arcs, Bitmaps, Circles, Lines, Ovals, Paths, Rectangles, etc. Also methods to rotate, scale, skew, translate Paint has methods for setting the alpha, color, shade, stroke, etc.

5. Let's Create a New Project! In Studio, go to File → New → Project Name the project “FunWithDrawing” Specify the package as “ and.an.cs42d ” Name the Activity class “FunWithDrawingActivity” Next, create your own custom View class

6. Creating Your Own View Class 1. Create a new Java class that extends View 2. Implement the necessary constructors 3. Implement the onDraw method and use the Canvas parameter to draw using a Paint object 4. Add your View to the application's Layout

7. 1 package and.an.cs42d; 2 3 public class DrawableView extends View { 4 5 // Second, you must implement these constructors!! 6 public DrawableView(Context c) { 7 super(c); 8 } 9 public DrawableView(Context c, AttributeSet a) { 10 super(c, a); 11 } 12... continued on next slide... Create a DrawableView class

8. Still in the DrawableView class... 13 // Third, implement the onDraw method. 14 // This method is called when the View is displayed 15 protected void onDraw(Canvas canvas) { 16 17 // this is the “paintbrush” 18 Paint paint = new Paint(); 19 // set the color 20 paint.setColor(Color.RED); 21 22 // draw Rectangle with corners at (40, 20) and (90, 80) 23 canvas.drawRect(40, 20, 90, 80, paint); 24 25 // change the color 26 paint.setColor(Color.BLUE); 27 // set a shadow 28 paint.setShadowLayer(10, 10, 10, Color.GREEN); 29 30 // create a “bounding rectangle” 31 RectF rect = new RectF(150, 150, 280, 280); 32 // draw an oval in the bounding rectangle 33 canvas.drawOval(rect, paint); 34 } 35 36 } // end of DrawableView class

9. 1 2 3 <and.an.cs42d.DrawableView 4 xmlns:android="http://schemas.android.com/apk/res/android" 5 android:layout_width="fill_parent" 6 android:layout_height="wrap_content" 7 /> 8 Modify main.xml as follows

10. More on Drawables Android offers a custom 2D graphics library for drawing shapes and images. The android.graphics.drawable package is where you'll find the common classes used for drawing in two-dimensions. A Drawable is a general abstraction for "something that can be drawn."

11. The Drawable class extends to define a variety of specific kinds of drawable graphics, including BitmapDrawable, ShapeDrawable, PictureDrawable, LayerDrawable etc.

12. There are three ways to define and instantiate a Drawable: 1)using an image saved in your project resources. 2)using an XML file that defines the Drawable properties. 3)using the normal class constructors.

13. Creating from resource images To use an image resource, just add your file to the res/drawable/ directory of your project. From there, you can reference it from your code or your XML layout. Either way, it is referred using a resource ID, which is the file name without the file type extension (E.g., my_image.png is referenced as my_image).

14. The following code snippet demonstrates how to build an ImageView that uses an image from drawable resources and add it to the layout.

15. To handle your image resource as a Drawable object. To do so, create a Drawable from the resource like so:

16. The XML snippet below shows how to add a resource Drawable to an ImageView in the XML layout.

17. Creating from resource XML If there is a Drawable object that you'd like to create, which is not initially dependent on variables defined by your application code or user interaction, then defining the Drawable in XML is a good option.

18. Once you've defined your Drawable in XML, save the file in the res/drawable/ directory of your project. Then, retrieve and instantiate the object by calling Resources.getDrawable(), passing it the resource ID of your XML file.

19. Once you've defined your Drawable in XML, save the file in the res/drawable/ directory of your project. Then, retrieve and instantiate the object by calling Resources.getDrawable(), passing it the resource ID of your XML file.

20. XML that defines a TransitionDrawable: With this XML saved in the file res/drawable/expand_collapse.xml, the following code will instantiate the TransitionDrawable and set it as the content of an ImageView:

21. Then this transition can be run forward (for 1 second) with:

22. Shape Drawable When you want to dynamically draw some two- dimensional graphics, a ShapeDrawable object has to be used. With a ShapeDrawable, you can programmatically draw primitive shapes and style them in any way imaginable.

23. A ShapeDrawable is an extension of Drawable, so you can use one wherever a Drawable is expected. For the background of a View, set with setBackgroundDrawable(). You can also draw your shape as its own custom View, to be added to your layout. The ShapeDrawable has its own draw() method, you can create a subclass of View that draws the ShapeDrawable during the View.onDraw() method

24. To draw a ShapeDrawable as a View:

25. With the custom View defined, it can be drawn any way you like. With the sample above, we can draw the shape programmatically in an Activity:

26. To draw custom drawable from the XML layout instead of from the Activity, then the CustomDrawable class must override the View(Context, AttributeSet) constructor, which is called when instantiating a View via inflation from XML. Then add a CustomDrawable element to the XML, like so:

27. Detecting User Interaction and Touch Events

28. Detecting Touch Events When the user touches/clicks on the View, Android invokes the View's onTouchEvent method A MotionEvent object is automatically generated and is passed to the method From the MotionEvent, you can determine: – the type of Action (down, up/release, move) – where the event occurred (x/y coordinate) – the time at which the event occurred

29. Modifying the DrawableView 1. In your DrawableView class, modify onDraw so that the color of the rectangle is randomized 2. Then add an onTouchEvent method that looks for an “up” action and calls this.invalidate if the touch is within the bounds of the rectangle

30. 1 package and.an.cs42d; 2 3 public class DrawableView extends View { 4 5 // these constructors shouldn't change 6 public DrawableView(Context c) { 7 super(c); 8 } 9 public DrawableView(Context c, AttributeSet a) { 10 super(c, a); 11 } 12 DrawableView class

31. 13 // This version of onDraw randomly chooses a color 14 // to use when drawing the rectangle 15 protected void onDraw(Canvas canvas) { 16 17 // this is the “paintbrush” 18 Paint paint = new Paint(); 19 20 // set the color randomly 21 int whichColor = (int)(Math.random() * 4); 22 if (whichColor == 0) paint.setColor(Color.RED); 23 else if (whichColor == 1) paint.setColor(Color.GREEN); 24 else if (whichColor == 2) paint.setColor(Color.BLUE); 25 else paint.setColor(Color.YELLOW); 26 27 // draw Rectangle with corners at (40, 20) and (90, 80) 28 canvas.drawRect(40, 20, 90, 80, paint); 29 30 31 } Modify onDraw as follows

32. 32 // this method is called when the user touches the View 33 public boolean onTouchEvent(MotionEvent event) { 34 35 // if it's an up (“release”) action 36 if (event.getAction() == MotionEvent.ACTION_UP) { 37 38 // get the coordinates 39 float x = event.getX(); 40 float y = event.getY(); 41 42 // see if they clicked on the box 43 if (x >= 40 && x = 20 && y <= 80) { 44 45 // redraw the View... this calls onDraw again! 46 invalidate(); 47 } 48 } 49 // indicates that the event was handled 50 return true; 51 } // end of onTouchEvent 52 } // end of DrawableView class Add an onTouchEvent method