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
• 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
Drawing via an ImageView
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
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);
Method 1 for drawing via an ImageView
Loading an image from an XML file
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>
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)
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"
/>
Method 2 for drawing via an ImageView
Loading an image from a source image file
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
‘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)
‘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"
/>
Method 3 for drawing via an ImageView
Loading an image programmatically from a ShapeDrawable object
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
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
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);
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);
Drawing via a Canvas
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
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
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);}
}
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);}
}
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)); }}