Working with Shapes Android

You can define and draw primitive shapes such as rectangles and ovals using the ShapeDrawable class in conjunction with a variety of specialized Shape classes. You can define Paintable drawables as XML resource files, but more often, especially with more complex shapes, this is done programmatically.

Defining Shape Drawables as XML Resources

In Chapter“Managing Application Resources,” we show you how to define primitive shapes such as rectangles using specially formatted XML files within the /res /drawable/ resource directory. The following resource file called /res/drawable/green_rect.xml describes a simple, green rectangle shape drawable:

You can then load the shape resource and set it as the Drawable as follows:

You should note that many Paint properties can be set via XML as part of the Shape definition. For example, the following Oval shape is defined with a linear gradient (red to white) and stroke style information:

Defining Shape Drawables Programmatically

You can also define these ShapeDrawable instances programmatically. The different shapes are available as classes within the android.graphics.drawable.shapes package. For example, you can programmatically define the aforementioned green rectangle as follows:

You can then set the Drawable for the ImageView directly:

The resulting green rectangle is shown in Figure.

Drawing Different Shapes

Some of the different shapes available within the android.graphics.drawable.shapes package include

  • Rectangles (and squares)
  • Rectangles with rounded corners
  • Ovals (and circles)
  • Arcs and lines
  • Other shapes defined as paths

A green rectangle.

A green rectangle.
You can create and use these shapes as Drawable resources directly within ImageView views, or you can find corresponding methods for creating these primitive shapes within a Canvas.

Drawing Rectangles and Squares

Drawing rectangles and squares (rectangles with equal height/width values) is simply a matter of creating a ShapeDrawable from a RectShape object.The RectShape object has no dimensions but is bound by the container object—in this case, the ShapeDrawable. You can set some basic properties of the ShapeDrawable, such as the Paint color and the default size.

For example, here we create a magenta-colored rectangle that is 100-pixels long and 2- pixels wide, which looks like a straight, horizontal line. We then set the shape as the drawable for an ImageView so the shape can be displayed:

Drawing Rectangles with Rounded Corners

You can create rectangles with rounded corners, which can be nice for making custom buttons. Simply create a ShapeDrawable from a RoundRectShape object. The Round Rect Shape requires an array of eight float values, which signify the radii of the rounded corners. For example, the following creates a simple cyan-colored, rounded- corner rectangle:

The resulting round-corner rectangle is shown in Figure.

You can also specify an inner-rounded rectangle within the outer rectangle, if you so choose. The following creates an inner rectangle with rounded edges within the outer white rectangle with rounded edges:

A cyan rectangle with rounded corners.

A cyan rectangle with rounded corners.

The resulting round rectangle with an inset rectangle is shown in Figure.
A white rectangle with rounded corners, with an inset rounded rectangle.

A white rectangle with rounded corners, with an inset rounded rectangle

Drawing Ovals and Circles

You can create ovals and circles (which are ovals with equal height/width values) by creating a ShapeDrawable using an OvalShape object. The OvalShape object has no dimensions but is bound by the container object—in this case, the ShapeDrawable. You can set some basic properties of the ShapeDrawable, such as the Paint color and the default size. For example, here we create a red oval that is 40-pixels high and 100-pixels wide, which looks like a Frisbee:

The resulting red oval is shown in Figure.
A red oval.

A red oval

Drawing ArcsM

You can draw arcs, which look like pie charts or Pac-Man, depending on the sweep angle you specify. You can create arcs by creating a ShapeDrawable by using an ArcShape object. The ArcShape object requires two parameters: a startAngle and a sweepAngle.The startAngle begins at 3 o’clock. Positive sweepAngle values sweep clockwise; negative values sweep counterclockwise. You can create a circle by using the values 0 and 360.

The following code creates an arc that looks like a magenta Pac-Man:

The resulting arc is shown in Figure.
A magenta arc of 345 degrees (resembling Pac-Man).

A magenta arc of 345 degrees (resembling Pac-Man).

Drawing Paths

You can specify any shape you want by breaking it down into a series of points along a path. The android.graphics.Path class encapsulates a series of lines and curves that make up some larger shape. For example, the following Path defines a rough five-point star shape:

You can then encapsulate this star Path in a PathShape, create a ShapeDrawable, and paint it yellow.

By default, this generates a star shape filled with the Paint color yellow Ayellow star)Or, you can set the Paint style to Stroke for a line drawing of a star.

The resulting star would look something like Figure A yellow star using the stroke styleof Paint.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Android Topics