Drawing graphics in Android

In this section we are going to be looking at Android's graphical capabilities as well as examples of how to make simple 2D shapes. We will be making use of

the android.graphics package (see http://code.google.com/android/reference/ android/graphics/package-summary.html), which provides all the low-level classes and tooling needed to create graphics. The graphics package supports such things as bitmaps (which hold pixels), canvas (what your draw calls draw on), primitives (such as rectangles or text), and paint (which you use to add color and styling).

To demonstrate the basics of drawing a shape, let's look at a simple example in listing 9.1, where we will draw a rectangle.

Listing 9.1 Shape example package com.msi.manning.chapter9.SimpleShape; public class SimpleShape extends Activity {

@Override protected void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(new SimpleView(this)) ;

} B Create View

private static class SimpleView extends View { <1-'

private ShapeDrawable mDrawable =

new ShapeDrawable () ; < | Create ShapeDrawable public SimpleView (Context context) { C to hold Drawable super(context); setFocusable(true);

this .mDrawable = O Create Rectangle and new ShapeDrawable (new RectShape () ) ; <-1 assign to mDrawable this.mDrawable.getPaint().setColor(0xFFFF0000);

@Override O The onDraw method protected void onDraw (Canvas canvas) { <-1 draws the graphics int x = 10; int y = 10; int width = 3 00; int height = 5 0;

this.mDrawable.setBounds(x, y, x + width, y + height) this.mDrawable.draw(canvas);

Set boundaries and F draw on canvas

Drawing a new shape is simple. First we need to import the necessary packages B including graphics, then ShapeDrawable, which will support adding shapes to our drawing, and then shapes, which supports several generic shapes including RectShape, which we will use. Next we need to create a view Q, then a new ShapeDrawable to add our Drawable to ©. Once we have a ShapeDrawable we can assign shapes to it. In our code we use the RectShape O, but we could have used OvalShape, Path-Shape, RectShape, RoundRectShape, or Shape. We then use the onDraw() method to draw the Drawable on the Canvas Q. Finally we use the Drawable's setBounds() method to set the boundary (a rectangle) in which we will draw our rectangle using the draw() method. When you run listing 9.1, you should see a simple red rectangle like the one shown in figure 9.1.

Another way to do the same thing is through the use of XML. Android allows you to define shapes to draw in an XML resource file.

9.1.1 Drawing with XML

With Android you can create simple drawings using an XML file approach. To do this, all you need to do is create a Drawable object or objects, which are defined as an XML file in your draw-able directory, such as res/drawable. The XML to create a simple rectangle would look like listing 9.2.

Listing 9.2 simplerectangle.xml

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

<solid android:color="#FF0000FF"/> </shape>

With Android XML drawable shapes, the default is a rectangle, but you can change the shape by using the type tag and selecting a value of oval, rectangle, line, or arc. To use this XML shape you need to reference it in a layout, as in listing 9.3, where the layout would reside in res/layout.

Listing 9.3 xmllayout.xml

<?xml version="1.0" encoding="utf- 8 " ?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content">

<ImageView android:layout_width="fill_parent" android:layout_height="5 0dip" android:src="@drawable/simplerectangle" />

Then all you need to do is create a simple Activity, where you place your UI in a contentView, as in listing 9.4.

Listing 9.4 XMLDraw.java public class XMLDraw extends Activity { @Override public void onCreate(Bundle icicle) { super.onCreate(icicle) ; setContentView(R.layout.xmldrawable);

If you run this code, it will draw a simple rectangle. You can make more complex drawings or shapes by stacking or ordering your XML drawables, and you can include as many shapes as you want or need depending on space. You could change your xml-drawable.xml file to look like listing 9.5, which adds a number of shapes and stacks them vertically.

Listing 9.5 xmldrawable.xml

<?xml version="1.0" encoding="utf-8 " ?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content">

<LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:layout_width="fill_parent" android:layout_height="5 0dip" android:src="@drawable/shape_1" /> <ImageView android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/line" /> <ImageView android:layout_width="fill_parent" android:layout_height="5 0dip" android:src="@drawable/shape_2" /> <ImageView android:layout_width="fill_parent" android:layout_height="5 0dip" android:src="@drawable/shape_5" /> </LinearLayout> </ScrollView>

Finally you need to add the shapes in listings 9.6, 9.7, 9.8, and 9.9 into the res/draw-able folder.

Listing 9.6 shapel.xml

<?xml version="1.0" encoding="utf- 8 " ?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" type="oval" >

<solid android:color="#00000000"/> <padding android:left="10sp" android:top="4sp" android:right="10sp" android:bottom="4sp" /> <stroke android:width="1dp" android:color="#FFFFFFFF"/> </shape>

In listing 9.6 we are using an oval. We have added a tag called padding, which allows us to define padding or space between the object and other objects in the UI. We are also using the tag called stroke, which allows us to define the style of the line that makes up the border of the oval (see listing 9.7).

Listing 9.7 shape2.xml

<?xml version="1.0" encoding="utf- 8 " ?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#FF0000FF"/>

<stroke android:width="4dp" android:color="#FFFFFFFF"

android:dashWidth="1dp" android:dashGap="2dp" /> <padding android:left="7dp" android:top="7dp"

android:right="7dp" android:bottom="7dp" /> <corners android:radius="4dp" /> </shape>

With this shape we are generating another rectangle, but this time (see listing 9.8) we introduce the tag corners, which allows us to make rounded corners with the attribute android:radius.

Listing 9.8 shape3.xml

<?xml version="1.0" encoding="utf- 8 " ?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" type="oval">

<gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"

android:angle="270"/> <padding android:left="7dp" android:top="7dp"

android:right="7dp" android:bottom="7dp" /> <corners android:radius="8dp" /> </shape>

In listing 9.9 we create a shape of the type line with a size tag using the android:height attribute, which allows us to describe the number of pixels used on the vertical to size the line.

Listing 9.9 line.xml

<?xml version="1.0" encoding="utf- 8 " ?>

<shape xmlns:android=http://schemas.android.com/apk/res/android type="line" >

<solid android:color="#FFFFFFFF"/>

<stroke android:width="1dp" android:color="#FFFFFFFF" android:dashWidth="1dp" android:dashGap="2dp" />

<padding android:left="1dp" android:top="25dp" android:right="1dp" android:bottom="25dp" />

<size android:height="2 3dp" /> </shape>

If you run this, you should see something like figure 9.2.

As you can see, drawing with Android is straightforward, and Android provides the ability for developers to programmatically draw anything they might need. In the next section we are going to look at what we can draw with Android's animations capabilities.

0 0

Post a comment