1. Basic Drawing Techniques

2. Basic Drawing 2 options Draw to a View on an Activity Draw to a Canvas
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:
<?xml version="1.0" encoding="utf-8"?>
<!-- This is a simple XML definition for an image -->
<shape xmlns: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"
/>

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”
/>

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);
ShapeDrawable sd = 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);
PathShape ps = new PathShape(p, 100, 100);
//Create ShapeDrawable and set its instrinsicHeight and instrinsicWidth – the PathShape will be
//put into this container on the screen
ShapeDrawable sd = 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 Notes 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)); }