2d graphics: part 2. class drawable a drawable is an object that knows how to render itself on a...

2D Graphics: Part 2

©SoftMoore Consulting

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.

Slide 2


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.

Slide 3


Example: Defining a Shape Drawable in XML

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">

<solid android:color="@color/bgColor" />

<stroke android:width="2px" android:color="@color/circleColor" />

<size android:height="200dp" android:width="200dp" />

</shape>Slide 4

File res\drawable\circle.xml

circle = oval withequal dimensions


Example: Defining a Shape Drawable in XML(continued)

public class DrawableDemo extends ActionBarActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView circleView = (ImageView) findViewById(R.id.circleImage); circleView.setImageResource(R.drawable.circle); } }

Slide 5


Example: Defining a Shape Drawable in XML(continued)

Slide 6


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.

Slide 7


Example: Defining a Shape DrawableProgrammatically

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

Slide 8

(continued on next slide)

Note: height and widthare in pixels, not dp


Example: Defining a Shape DrawableProgrammatically (continued)

ImageView circleView = (ImageView) findViewById(R.id.circleImage); circleView.setImageDrawable(circle); }

Slide 9


Example: Defining a Shape DrawableProgrammatically (continued)

Slide 10


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.

Slide 11


Example: Gradients

public class GradientView extends View { public GradientView(Context context) { super(context); }

@Override protected void onDraw(Canvas canvas) { Paint paint = new Paint(); paint.setAntiAlias(true) float centerX1 = getWidth()/4; float centerY1 = getHeight()/4;

Slide 12


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

Slide 13



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

Slide 14



Slide 15


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)

Slide 16

Note: Although some Canvas functionality is duplicatedin other places, text drawing capabilities are not.


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

Slide 17


Using Typefaces

• Create a typefaceTypeface typeface = Typeface.create(Typeface.SERIF, Typeface.BOLD);

• Set the text size and typeface for a paint objectpaint.setTextSize(15);paint.setTypeface(typeface);

• Draw the text on the canvascanvas.drawText("Serif Typeface (Bold)", 30, 140, paint);

Slide 18


Example: Android Typefaces

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

Slide 19


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

Slide 20


Example: Android Typefaces(continued)

Slide 21

Notes:

1. Default typeface is Sans Serif.

2. Monospace typeface does notimplement bold or italic styles.


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)

Slide 22


Relevant Links

• Canvas and Drawableshttp://developer.android.com/guide/topics/graphics/2d-graphics.html

• Drawable Resourceshttp://developer.android.com/guide/topics/resources/drawable-resource.html

Slide 23

http://developer.android.com/guide/topics/graphics/2d-graphics.html

http://developer.android.com/guide/topics/resources/drawable-resource.html

2d graphics: part 2. class drawable a drawable is an object that knows how to render itself on a...

Documents