1. 2D Graphics: Part 2

2. Class Drawable
A Drawable is an object that knows how to render itself on a Canvas.
Class Drawable and a number of related subclasses (e.g., BitmapDrawable, LayerDrawable, ShapeDrawable, etc.) are defined in package android.graphics.drawable.
Unlike a View, a Drawable does not have any facility to receive events or otherwise interact with the user.
Similar to other Android UI objects, most Drawable objects can be defined programmatically or in an XML file.
©SoftMoore Consulting

3. Different Types of Drawables
Drawables may take a variety of forms including
Bitmap: e.g., a PNG or JPEG image
Nine Patch: an extension to the PNG format allows it to specify information about how to stretch it and place things inside of it
Shape: contains simple drawing commands instead of a raw bitmap, allowing it to resize better in some cases.
Layers: a compound drawable that draws multiple underlying drawables on top of each other.
States: a compound drawable that selects one of a set of drawables based on its state.
©SoftMoore Consulting

4. Example: Defining a Shape Drawable in XML
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=" android:shape="oval"> <solid /> <stroke android:width="2px" /> <size android:height="200dp" android:width="200dp" /> </shape>
circle = oval with
equal dimensions
File res\drawable\circle.xml
©SoftMoore Consulting

5. Example: Defining a Shape Drawable in XML (continued)
public class DrawableDemo extends ActionBarActivity public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView circleView = (ImageView) findViewById(R.id.circleImage); circleView.setImageResource(R.drawable.circle); }
©SoftMoore Consulting

6. Example: Defining a Shape Drawable in XML (continued)
©SoftMoore Consulting

7. Defining a Shape Drawable Programmatically
Package android.graphics.drawable.shapes provides support for several geometric shapes
rectangles (and squares)
rectangles with rounded corners
ovals (and circles)
arcs and lines
other shapes defined as Paths
These shapes generally have no dimensions but are bound by their container object, usually a ShapeDrawable.
©SoftMoore Consulting

8. Example: Defining a Shape Drawable Programmatically
@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); OvalShape ovalShape = new OvalShape(); ShapeDrawable circle = new ShapeDrawable(ovalShape); circle.setIntrinsicWidth(400); circle.setIntrinsicHeight(400); Paint paint = circle.getPaint(); paint.setAntiAlias(true); paint.setColor(Color.MAGENTA); paint.setStyle(Paint.Style.STROKE); paint.setStrokeWidth(2);
Note: height and width
are in pixels, not dp
(continued on next slide)
©SoftMoore Consulting

9. Example: Defining a Shape Drawable Programmatically (continued)
ImageView circleView = (ImageView) findViewById(R.id.circleImage); circleView.setImageDrawable(circle); }
©SoftMoore Consulting

10. Example: Defining a Shape Drawable Programmatically (continued)
©SoftMoore Consulting

11. Gradients
A gradient is a color fill that gradually blends from one color to another.
All gradients need at least a start color and an end color, but they can contain an array of colors.
Android gradient classes
subclasses of android.graphics.Shader
differentiated by the direction in which the gradient “flows”
LinearGradient
RadialGradient
SweepGradient
Gradients are set using the setShader() method of class Paint.
©SoftMoore Consulting

12. Example: Gradients
public class GradientView extends View { public GradientView(Context context) super(context); protected void onDraw(Canvas canvas) Paint paint = new Paint(); paint.setAntiAlias(true) float centerX1 = getWidth()/4; float centerY1 = getHeight()/4;
©SoftMoore Consulting

13. Example: Gradients (continued)
float centerX2 = getWidth()/2; float centerY2 = getHeight()/2; float centerX3 = 3*centerX1; float centerY3 = 3*centerY1; float radius = (3*centerX1)/4; canvas.drawColor(Color.WHITE); // create/draw a circle with a linear gradient LinearGradient lg = new LinearGradient( centerX1 - radius, centerY1 - radius, centerX1 + radius, centerY1 + radius, Color.RED, Color.BLUE, Shader.TileMode.MIRROR); paint.setShader(lg); canvas.drawCircle(centerX1, centerY1, radius, paint);
©SoftMoore Consulting

14. Example: Gradients (continued)
// create/draw a circle with a radial gradient RadialGradient rg = new RadialGradient( centerX2, centerY2, radius, Color.RED, Color.BLUE, Shader.TileMode.MIRROR); paint.setShader(rg); canvas.drawCircle(centerX2, centerY2, radius, paint); // create/draw a circle with a sweep gradient int[] sgColors = { Color.RED, Color.YELLOW, Color.GREEN, Color.BLUE }; SweepGradient sg = new SweepGradient( centerX3, centerY3, sgColors, null); paint.setShader(sg); canvas.drawCircle(centerX3, centerY3, radius, paint); }
©SoftMoore Consulting

15. Example: Gradients (continued)
©SoftMoore Consulting

16. Drawing Text Class canvas provides several methods for drawing text.
Examples
void drawText(String text, float x, float y, Paint paint)
void drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)
Note: Although some Canvas functionality is duplicated
in other places, text drawing capabilities are not.
©SoftMoore Consulting

17. Android Typefaces
Class Typeface (in package android.graphics) provides support for several typeface families and styles.
Typeface families
Typeface.SERIF
Typeface.SANS_SERIF
Typeface.MONOSPACE
Typeface.DEFAULT (equal to SANS_SERIF)
Typeface styles
Typeface.NORMAL
Typeface.BOLD
Typeface.ITALIC
Typeface.BOLD_ITALIC
©SoftMoore Consulting

18. Using Typefaces Create a typeface
Typeface typeface =
Typeface.create(Typeface.SERIF, Typeface.BOLD);
Set the text size and typeface for a paint object
paint.setTextSize(15);
paint.setTypeface(typeface);
Draw the text on the canvas
canvas.drawText("Serif Typeface (Bold)", 30, 140, paint);
©SoftMoore Consulting

19. Example: Android Typefaces
@Override protected void onDraw(Canvas canvas) { paint.setAntiAlias(true); paint.setColor(Color.BLUE); paint.setTextSize(35); canvas.drawColor(Color.WHITE); Typeface tfDN = Typeface.create( Typeface.DEFAULT, Typeface.NORMAL); paint.setTypeface(tfDN); canvas.drawText("Default - Normal", 20, 50, paint); Typeface tfDB = Typeface.create( Typeface.DEFAULT, Typeface.BOLD); paint.setTypeface(tfDB); canvas.drawText("Default - Bold", 20, 100, paint);
©SoftMoore Consulting

20. Example: Android Typefaces (continued)
... // other typefaces Typeface tfMBI = Typeface.create( Typeface.MONOSPACE, Typeface.BOLD_ITALIC); paint.setTypeface(tfMBI); canvas.drawText("Monospace - Bold Italic", 20, 830, paint); paint.setTypeface(tfDN); paint.setUnderlineText(true); canvas.drawText("Default - Normal (Underlined)", 20, 890, paint); }
©SoftMoore Consulting

21. Example: Android Typefaces (continued)
Notes:
Default typeface is Sans Serif.
Monospace typeface does not implement bold or italic styles.
©SoftMoore Consulting

22. Matrix Transformations
Class Matrix provides the capability to perform transformations on a View.
It is possible to create a Matrix corresponding to the desired transformation and then apply it via the following Canvas method:
void set(Matrix src)
Class Canvas provides convenience methods for common transformations.
void rotate(float degrees)
void scale(float sx, float sy)
void skew(float sx, float sy)
void translate(float dx, float dy)
©SoftMoore Consulting

23. Relevant Links Canvas and Drawables Drawable Resources
Drawable Resources
©SoftMoore Consulting