2D Graphics: Part 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

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

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> circle = oval with equal dimensions File res\drawable\circle.xml ©SoftMoore Consulting

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); } ©SoftMoore Consulting

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

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

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

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

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

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

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; ©SoftMoore Consulting

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

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

Example: Gradients (continued) ©SoftMoore Consulting

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

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

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

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

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

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

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

Relevant Links Canvas and Drawables Drawable Resources http://developer.android.com/guide/topics/graphics/2d-graphics.html Drawable Resources http://developer.android.com/guide/topics/resources/drawable-resource.html ©SoftMoore Consulting