Professional Documents
Culture Documents
Android Drawing 1 PDF
Android Drawing 1 PDF
Android Programming:
2D Drawing Part 1: Using onDraw
Originals of Slides and Source Code for Examples:
http://www.coreservlets.com/android-tutorial/
Customized Java EE Training: http://courses.coreservlets.com/
Java, JSF 2, PrimeFaces, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Java, JSF 2,
PrimeFaces, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.
Spring, Hibernate/JPA, EJB3, GWT, Hadoop, SOAP-based and RESTful Web Services
Contact
hall@coreservlets.com
for details
Developed and taught by well-known
author
and developer. At public
venues or onsite at your location.
Extending a View
Using onDraw
Referring to custom View in layout file
Drawing basic shapes with Canvas
Drawing bitmaps (images) with Canvas
Extending a View
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Summary: Java
Idea
Extend the View class, put the drawing code in onDraw
Note: this assumes the View is placed in a fixed-size
region. In lecture on Custom Components, we will discuss
using onMeasure to calculate desired sizes.
Syntax
public class RandomShapeView extends View {
}
}
7
Summary: XML
Idea
Refer to the custom View with the view tag in layout
file. Pass standard attributes (id, sizes, background).
In lecture on Custom Components, we will discuss passing
custom attributes.
Syntax
<view
class="com.someCompany.somePackage.YourView"
android:id=""
android:layout_width=""
android:layout_height=""
If you use regular (non-inner) classes, you can
android:background="" />
replace <view class="package.Class" /> with
<package.Class />. However, this will not
View Constructors
ViewName(Context)
Used when you directly call View constructor. Usually
when you add View to Activity with setContentView.
public ViewName(Context context) {
super(context);
ViewName(Context, AttributeSet)
Used when View built from layout XML file. Section on
Custom Components will show how to use AttributeSet.
public ViewName(Context context, AttributeSet attrs) {
super(context);
}
9
Using onDraw:
Canvas and Paint
Canvas
onDraw is passed a Canvas. Use its drawing methods.
Paint
Most of the drawing methods (drawArc, drawCircle, etc.)
take a Paint as an argument. This is different from Swing
and the AWT, where you set the paint on the Graphics
separately from the drawing methods.
The Paint also incorporates the font size
Making a Paint
10
drawBitmap
Draw a picture. Create a Bitmap from an image file via
BitmapFactory.decodeResource
(getResources(),R.drawable.blah)
drawPath
A Path lets you combine multiple shapes into one object
11
Drawing Images
Put image files in res/drawable
If file is res/drawable/foo_bar.gif, you will refer to it with
R.drawable.foo_bar.
You often want versions of your image in various resolutions, so
you will put the images in res/drawable-xhdpi (extra high),
res/drawable-hdpi (high), res/drawable-mdpi (medium),
res/drawable-ldpi (low)
Supported image types are jpeg, gif, png, bmp, and (Android 4.0+
only) webp
Draw Bitmap
canvas.drawBitmap(pic, left, top, null);
The last arg is the Paint (null for opaque images)
12
Triggering Redrawing
Automatically
After screen is rotated or covered and reexposed
Manually
Yes
Call invalidate on the View
If called by Thread other than main thread, you should call
postInvalidate instead of invalidate
No
Call onDraw directly
Consequence
Dont allocate graphics objects in onDraw
This is especially true of Bitmaps, but applies to Paint
and other simpler objects as well
14
Developed and taught by well-known author and developer. At public venues or onsite at your location.
Example Summary
Idea
Make View that draws random backgrounds, circles,
rectangles, bitmaps, and text
All sizes and locations based on current dimensions of the
View
View must go in fixed-sized region for now. We will
discuss using onMeasure to request sizes in section on
Custom Components
16
View: onDraw
public class RandomShapeView extends View {
...
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(RandomUtils.randomElement(mBackgrounds));
int viewWidth = getWidth();
int viewHeight = getHeight();
int avgShapeWidth = viewWidth/5;
for(int i=0; i<20; i++) {
drawRandomCircle(canvas, viewWidth,
viewHeight, avgShapeWidth);
drawRandomRect(canvas, viewWidth,
viewHeight, avgShapeWidth);
drawRandomBitmap(canvas, viewWidth, viewHeight);
drawRandomText(canvas, viewWidth,
viewHeight, avgShapeWidth);
}
}
You must call getWidth and getHeight in onDraw (or after), not in the constructor.
}
18
However, to avoid repeated allocation, real objects like Paint and Bitmap objects
should not be instantiated in onDraw.
View:
Random Background Colors
public class RandomShapeView extends View {
private Integer[] mBackgrounds =
{ Color.CYAN, Color.GRAY, Color.LTGRAY,
Color.MAGENTA, Color.YELLOW, Color.WHITE };
...
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(RandomUtils.randomElement(mBackgrounds));
...
}
}
19
21
Random Text
public class RandomShapeView extends View {
private String mMessage = "Android";
...
private void drawRandomText(Canvas canvas, int viewWidth,
int viewHeight, int avgShapeWidth) {
float x = RandomUtils.randomFloat(viewWidth);
float y = RandomUtils.randomFloat(viewHeight);
float textSize = RandomUtils.randomFloat(avgShapeWidth);
Paint textPaint = RandomUtils.randomElement(mForegrounds);
textPaint.setTextSize(textSize);
canvas.drawText(mMessage, x, y, textPaint);
}
}
23
26
27
Results
29
Wrap-Up
Customized Java EE Training: http://courses.coreservlets.com/
Java, JSF 2, PrimeFaces, Servlets, JSP, Ajax, jQuery, Spring, Hibernate, RESTful Web Services, Hadoop, Android.
Developed and taught by well-known author and developer. At public venues or onsite at your location.
References
Android Dev Guide: Canvas & Drawables
http://developer.android.com/guide/topics/graphics/
2d-graphics.html
31
Summary
Java
Extend View
Make 2 constructors (Context and Context/AttributeSet)
Override onDraw
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBlah();
XML
32
<view
class="com.someCompany.somePackage.YourView"
android:id=""
android:layout_width=""
android:layout_height=""
android:background="" />
Questions?
JSF 2, PrimeFaces, Java 7, Ajax, jQuery, Hadoop, RESTful Web Services, Android, Spring, Hibernate, Servlets, JSP, GWT, and other Java EE training.
Developed and taught by well-known author and developer. At public venues or onsite at your location.