Basic Drawing Techniques

25
Basic Drawing Techniques

description

Basic Drawing Techniques. 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. Basic Drawing. - PowerPoint PPT Presentation

Transcript of Basic Drawing Techniques

Page 1: Basic Drawing Techniques

Basic Drawing Techniques

Page 2: Basic Drawing Techniques

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

Page 3: Basic Drawing Techniques

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

Page 4: Basic Drawing Techniques

Drawing via an ImageView

Page 5: Basic Drawing Techniques

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

Page 6: Basic Drawing Techniques

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);

Page 7: Basic Drawing Techniques

Method 1 for drawing via an ImageView

Loading an image from an XML file

Page 8: Basic Drawing Techniques

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>

Page 9: Basic Drawing Techniques

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)

Page 10: Basic Drawing Techniques

Loading the ImageView via XML

• Use the src attribute– Associated with setImageResource method– Do not include file extension

<ImageViewandroid:layout_height=“match_parent"android:layout_width=“match_parent"android:src="@drawable/my_image_file"android:id="@+id/myImageView"

/>

Page 11: Basic Drawing Techniques

Method 2 for drawing via an ImageView

Loading an image from a source image file

Page 12: Basic Drawing Techniques

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

Page 13: Basic Drawing Techniques

‘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)

Page 14: Basic Drawing Techniques

‘Loading’ the ImageView via XML

• Use the src attribute– Associated with setImageResource method– Do not include file extension

<ImageViewandroid:layout_height=“match_parent”android:layout_width=“match_parent”android:src="@drawable/my_image_file"android:id="@+id/myImageView"

/>

Page 15: Basic Drawing Techniques

Method 3 for drawing via an ImageView

Loading an image programmatically from a ShapeDrawable object

Page 16: Basic Drawing Techniques

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

Page 17: Basic Drawing Techniques

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

Page 18: Basic Drawing Techniques

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);

Page 19: Basic Drawing Techniques

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 screenShapeDrawable sd = new ShapeDrawable(ps);

sd.setIntrinsicHeight(100);sd.setIntrinsicWidth(100);sd.getPaint().setColor(Color.MAGENTA);iv.setImageDrawable(sd);

Page 20: Basic Drawing Techniques

Drawing via a Canvas

Page 21: Basic Drawing Techniques

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

Page 22: Basic Drawing Techniques

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

Page 23: Basic Drawing Techniques

Drawing Path on canvaspublic 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);}

}

Page 24: Basic Drawing Techniques

Drawing Bitmap on canvaspublic class MyGraphicsView extends View { public MyGraphicsView (Context context) { super(context); }

protected void onDraw(Canvas canvas) { canvas.drawBitmap(//args: image, x-offset, y-offset, Paint objectBitmapFactory.decodeResource(getResources(), R.drawable.image_file), 20, 20, null);}

}

Page 25: Basic Drawing Techniques

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)); }}