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
<ImageView
android: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
<ImageView
android: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 screen
ShapeDrawable 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 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);
}
}
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
);
}
}
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));
}
}