[BLANK_AUDIO]

Hi, I'm Adam Porter, and this is

Programming Mobile Applications for
Android Handheld Systems.
Today's handheld devices come with
powerful CPUs and bright, high
density displays, and applications can use
these capabilities to present
rich graphical elements to the user, and
to animate those elements
to give the user a fluid and dynamic
visual experience.
In this lesson, we'll talk about how
applications do this
through the careful use of two dimensional
graphics and animation.
I'll start this lesson by discussing
Android
support for two dimensional, or 2D,
graphics.
I'll talk about how applications
can draw both static and dynamically
changing elements to their displays
using the ImageView class and using the
Canvas class.
Next, I'll talk about the various ways
with which you an easily animate
views to provide simple effects like
changing a
view size and position, and fading a view
in and out.
And lastly, I'll finish up with a more
general discussion of property animation,
which gives applications
a general framework for animating not only
simple
view properties, but essentially any other
properties as well.
When your application wants to put 2D
graphics on
the display, it can do that in different
ways.
In particular, it can draw the graphic to
a view, or it can draw to a canvas.
Drawing to a view is simpler, but less
flexible.
You'll use this option when the graphics
you want to draw
are simple, and when you don't plan to
update them too often,
if at all.
Drawing to a canvas is more complicated,
but also more powerful and more flexible.
And you'll go this route when the graphics
you want to draw
are more complex and when you expect to
update those graphics fairly frequently.
There are many ways to draw with views.
But in this lesson I'll focus on drawing
using the drawable class.
A drawable represents something that can
be drawn.
Things like bitmaps, colors, shapes, and
much more.
Some simple drawables include the
ShapeDrawable class, which represents
a shape such as a rectangle or an oval.
The BitmapDrawable class, which represents
a matrix of pixels.
And the ColorDrawable class,
which represents a solid color.
In our example applications for this
lesson, we'll
often create a drawable object and attach
it to
an image view, and then we'll let the
image view handle all the actual drawing
for us.
As with Android user interface features
we've already seen, you can do this via
XML files, or you can do it via explicit
program instructions.
Our first example applications are called
GraphicsBubble XML
and GraphicsBubble Program.
These simple applications both display a
single image view, and that image view
holds a bitmap image of a soap bubble.
Let's take a look.
[BLANK_AUDIO]
So here's my device.
Now, I'll start one of the applications,
GraphicsBubbleXML.
[BLANK_AUDIO]
And there you can see the simple bubble
image.
[BLANK_AUDIO]
Okay, so let's look at the source code for
both of these applications starting
with the code for GraphicsBubbleXML.
So here's the application open in the IDE.
I'll now open the main activity for this
application.
As you can see, it's very simple.
All it does is call setContentView
using the main.xml layout file.
Let's open that file.
Here's the XML file.
And it specifies that the entire layout is
a relative layout.
And nested inside the relative layout is
an image view.
This image view has a layout width and a
layout height of 250 density independent
pixels, or DP.
The image view is also centered inside its
parent, the relative layout.
And finally, the actual bitmap for the
bubble is
in one of the drawable directories and
it's called B128
[BLANK_AUDIO]
Let's also look at an application that
does the
same thing but that builds its user
interface programmatically.
So here's the GraphicsBubbleProgram
application open in the IDE.
I'll now open the main activity for this
application.
And this application also calls
setContentView using the main.XML layout
file.
But in this case, that layout includes
only the outermost relative layout
with nothing inside it.
Let's open that file.
So here's the XML file, and like I said it
just specifies that the entire
layout is a relative layout, but it
doesn't have any child views inside of it.
So going back to the main activity, this
code continues by creating an image view.
Next, it sets the b128 bitmap as the image
drawable for the image view.
After that, the code continues by setting
all the
layout properties that we saw before in
the XML version.
First, it sets the height and width of the
image view.
These values are stored in another file
called dimens.xml
that's stored in the res\values directory.
Next,
the code creates a
relativelayout.layoutparams
object with the correct height and width.
After
that the code adds a rule to the
layoutparams
object which tells Android to center this
image view inside the relative layout
parent.
Then the code sets these layout parameters
or layout properties on the image view.
And finally, it adds the image view as a
child of the relative layout.
So let's talk about some other kinds of
drawables.
One kind of drawable is the shape
drawable.
Shape drawables are used for drawing
simple shapes.
Different shapes are represented by
different subclasses of the shape
class, including PathShape for line
segments and curves,
RectShape for rectangles, and OvalShape
for ovals and rings.
Our next example applications
are called GraphicsShapeDrawXML, and
GraphicsShapeDrawProgram.
These applications display two ovals
within a relative layout.
The two shapes have different colors,
partially overlap each other, and are
semitransparent.
Let's run those applications.
[BLANK_AUDIO]
So here's my device, and now I'll start
one of the
applications, GraphicsShapeDrawXML.
And there
you can see the two ovals.
The one on the left is cyan colored.
And the one on the right is magenta
colored.
As you can also see, the ovals overlap
each other.
And where they overlap,
their colors have mixed to form a kind of
violet color.
Let's look at the source code for these
applications.
So here's the GraphicsShapeDrawXML
application open in the IDE.
I'll now open the main activity for this
application.
Again the application only calls
setContentView using the main.XML layout
file.
Let's open that file.
Here's the XML file, and it specifies that
the entire layout is a relative layout.
And nested inside that relative layout are
two image views.
Both image views have layout widths and
layout heights of 250 DP.
Both add some space, or padding, around
their contents.
And both
are centered vertically inside the parent
relative layout.
The first image view, however, is aligned
to the left side of the
parent while the second image view is
aligned to the right.
And finally, the actual image view
content is defined using the
Android:source attribute.
For the first image view, that source
refers to a drawable called
cyan_shape.
Let's open that file.
It's in the res\drawable directory.
This
file specifies that this drawable is a
shape, that
its specific shape is an oval, and that
its color
is given by this hexadecimal value.
Of course, there's a similar file for the
magenta shape.
[BLANK_AUDIO]
And as before, we can do the exact same
things programmatically.
Let's take a look at the
GraphicsShapeDrawProgram application,
which I've also got open in the IDE.
I'll now open the main activity for this
application.
Again, the application only calls
setContentView using the main.XML
layout file.
That file just specifies that the entire
layout is a relative layout.
Now, the code finds the layout widths,
layout heights, and padding.
Next, the code gets a reference to the
parent relative layout,
and after that, it creates a new shape
drawable that has an oval shape.
It continues by setting the shape's color,
its height and width, and its
transparency.
Next, the code creates an image view and
puts the new shape into it.
It also sets the padding on the image
view.
In continuing on, the code sets some
layout parameters for the image view.
Specifically, it centers the image view
vertically in the relative layout, and
it aligns this image view to the left side
of the parent.
The code then finishes up by doing similar
things for the magenta view.
Now, if you want to do more complex
drawing, you can also draw with a canvas.
And to do
this, you need four things: a bitmap,
which is essentially the matrix
of pixels that you want to draw on; a
canvas, which
hosts the drawing calls that will update
the underlying bitmap;
a drawing primitive, which represents the
specific
drawing operation that you want to issue;
and a paint object, which allows
you to set various colors and styles for
the draw operation you want to do.
We'll go into more details about the
Canvas class in
just a bit, but canvases provide a variety
of drawing methods.
For example, you can draw text,
points, colors, ovals, and bitmaps using
these methods.
When you draw, you can use the Paint class
to set style parameters.
For instance, you can specify things like
the thickness of lines, the size of
text, the color of what you're drawing,
and whether or not to apply various
optimizations
such as antialiasing.
Which is used to smooth out an image's
jagged edges.
Let's look at a simple application that
draws
several boxes, each of which hold some
text.
But it does so using different paint
settings for each of the boxes.
So here's my device.
Now I'll start the GraphicsPaint
application.
The application starts up and displays
four rectangles
laid out one on top of the next.
Each of these rectangles has some text,
each
of which is of a different size and style.
Each rectangle also has a different border
width,
and border style, and has a different
background color.
Let's
look at the source code for these
applications.
We'll pick out a few of these style
parameters and see how they're specified.
So here's the GraphicsPaint application
open in the IDE.
Like some of those we saw before, this
application's oncreate method only calls
setContentView, passing in a reference to
a main.XML layout file.
Let's open up that file.
Here's the XML file.
And it specifies that the entire layout is
a linear layout, and that
linear layout has four children, each of
which is a text view.
If we look at the first of these text
views, we can see that it sets several
text style attributes.
For instance, this one sets its text color
to this hexadecimal value.
The text size to 32 scale independent
pixels, or SP.
It's styled to bold and italic, and its
typeface to normal.
If you look at these other, the other text
views, you'll see that they make different
stylistic choices.
This text view also specifies a
background, which is in a file called
SQ1.xml, which is the res\drawable
directory.
Let's open that file.
So here's the SQ1.xml file, and as you can
see, this file defines a shape.
That shape is a rectangle, and it has a
solid color.
In this case, a white color, which happens
to be defined by Android.
And finally, the shape has a border with a
three pixel width, and it has a background
color.
Which in this case is a fully opaque
black.
[BLANK_AUDIO]