Basic Drawing Techniques

1. Basic Drawing Techniques

2. Basic Drawing • 2 options • Draw to a View on an Activity • ImageView widget • Source is either image file, xml file, or ShapeDrawable object • Draw to a Canvas • Every View has a canvas associated with it • onDraw method provides handle to the Canvas

3. Basic Drawing • If a file is being used (.xml or an image file): • Stored in appropriate drawable directory • Can store image with different resolution in different folders to support multiple densities • drawable-xxhdpi (available since 4.1) • 480 pixels per inch • drawable-xhdpi(available since 2.3) • 320 pixels per inch • drawable-hdpi (available since 1.6) • 240 pixels per inch • drawable-mdpi (available since 1.6) • 160 pixels per inch • drawable-ldpi (available since 1.6) • 120 pixels per inch

4. Drawing via an ImageView

5. ImageView widget • android.widget.ImageView; • Displays image • Image can be loaded from various sources • from xml created shape • from source image file • from ShapeDrawable object

6. ImageView widget • Important methods in ImageView class • Direct Subclass of View • all methods/attributes in View class • New methods • setImageResource • load image from source file • iv.setImageResource(R.drawable.xml_file_name); • iv. setImageResource(R.drawable.png_file_name); • setImageDrawable • iv.setImageDrawable(instance of a ShapeDrawable);

7. Method 1 for drawing via an ImageView Loading an image from an XML file

8. Creating the resource in xml • Limited to rectangle and oval variations • File would be stored within the appropriate drawable directory • For all xml options, see: http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape <?xml version="1.0" encoding="utf-8"?> <!-- This is a simple XML definition for an image --> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#aa0000"/> <size android:width="30dp" android:height="30dp" /> </shape>

9. Loading the ImageView programmatically • Use the setImageResource method • Do not include .xml extension ImageView iv = (ImageView)findViewById(R.id.myImageView); iv.setImageResource(R.drawable.my_image_file)

10. Loading the ImageView via XML • Use the src attribute • Associated with setImageResource method • Do not include file extension <ImageView android:layout_height=“match_parent" android:layout_width=“match_parent" android:src="@drawable/my_image_file" android:id="@+id/myImageView" />

11. Method 2 for drawing via an ImageView Loading an image from a source image file

12. Image source file • Create or obtain the image file • Stored in drawable directory • 3 options • png • preferred – lossless and excellent transparency affects • jpg • acceptable – lossy compression • gif • least desirable

13. ‘Loading’ the ImageView programmatically • Use the setImageResource method • Do not include .file extension ImageView iv = (ImageView)findViewById(R.id.myImageView); iv.setImageResource(R.drawable.my_image_file)

14. ‘Loading’ the ImageView via XML • Use the src attribute • Associated with setImageResource method • Do not include file extension <ImageView android:layout_height=“match_parent” android:layout_width=“match_parent” android:src="@drawable/my_image_file" android:id="@+id/myImageView" />

15. Method 3 for drawing via an ImageView Loading an image programmatically from a ShapeDrawable object

16. ShapeDrawable class • android.graphics.drawable.ShapeDrawable; • Manages a Shape object • Flow: • Create a Shape • Create a ShapeDrawable using the Shape • pass into the constructor • Pass the ShapeDrawable to the setImageDrawable method

17. Shape Class • android.graphics.drawable.shapes.*; • Shape is abstract but has many subclasses • RectShape • OvalShape • ArcShape • RoundRectShape • PathShape • Most flexible – uses coordinates to create a shape

18. Creating a Circle //Creating a yellow oval, 10 dp high and 100 dp wide //in the middle of the ImageView ImageView iv = (ImageView)findViewById(R.id.myImageView); ShapeDrawablesd = new ShapeDrawable(new OvalShape()); sd.getPaint().setColor(Color.YELLOW); sd.setIntrinsicHeight(10); sd.setIntrinsicWidth(100); iv.setImageDrawable(sd);

19. Creating a Shape via a Path //Creating a rectangle using the coordinate system relative to stdWidth and stdHeight //of the PathShape (coordinate system is set via the last 2 constructor args) Path p = new Path(); p.moveTo(33, 0); p.lineTo(66, 0); p.lineTo(66, 66); p.lineTo(33, 66); p.lineTo(33, 0); PathShapeps = new PathShape(p, 100, 100); //Create ShapeDrawable and set its instrinsicHeight and instrinsicWidth – the PathShape will be //put into this container on the screen ShapeDrawablesd = new ShapeDrawable(ps); sd.setIntrinsicHeight(100); sd.setIntrinsicWidth(100); sd.getPaint().setColor(Color.MAGENTA); iv.setImageDrawable(sd);

20. Drawing via a Canvas

21. Drawing via a Canvas • Every View has a canvas • Every View responds to the onDraw method • automatically provides a handle to the Canvas via the argument to the method • onDraw method is: • called when associated Activity is first created • called when the View’s invalidate() method is called

22. Drawing via a Canvas • Flow • Create a new Class that extends View • Override the onDraw method • Create a new Activity that sets its content to the new View subclass • Notes • 2 java files required, but no .xml files • New Activity must be registered in manifest file

23. Drawing Path on canvas public class MyGraphicsView extends View { public MyGraphicsView (Context context) { super(context); } protected void onDraw(Canvas canvas) { Path rectangle = new Path(); Paint coloring = new Paint(); coloring.setColor(Color.GREEN); //Adding a rectangle: left side is on line x=5, right on x=100 //top on y = 50, bottom on y = 200 //width = 95, height = 150 rectangle.addRect(5, 50, 100, 200, Path.Direction.CW); canvas.drawPath(rectangle, coloring); } }

24. Drawing Bitmap on canvas public class MyGraphicsView extends View { public MyGraphicsView (Context context) { super(context); } protected void onDraw(Canvas canvas) { canvas.drawBitmap( //args: image, x-offset, y-offset, Paint object BitmapFactory.decodeResource(getResources(), R.drawable.image_file), 20, 20, null ); } }

25. Create a new Activity that sets its content to the new View public class MyActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView (new MyGraphicsView(this)); } }