[BLANK_AUDIO]Hi, I'm Adam Porter, and this isProgramming Mobile Applications forAndroid Handheld Systems.Today's handheld devices come withpowerful CPUs and bright, highdensity displays, and applications can usethese capabilities to presentrich graphical elements to the user, andto animate those elementsto give the user a fluid and dynamicvisual experience.In this lesson, we'll talk about howapplications do thisthrough the careful use of two dimensionalgraphics and animation.I'll start this lesson by discussingAndroidsupport for two dimensional, or 2D,graphics.I'll talk about how applicationscan draw both static and dynamicallychanging elements to their displaysusing the ImageView class and using theCanvas class.Next, I'll talk about the various wayswith which you an easily animateviews to provide simple effects likechanging aview size and position, and fading a viewin and out.And lastly, I'll finish up with a moregeneral discussion of property animation,which gives applicationsa general framework for animating not onlysimpleview properties, but essentially any otherproperties as well.When your application wants to put 2Dgraphics onthe display, it can do that in differentways.In particular, it can draw the graphic toa view, or it can draw to a canvas.Drawing to a view is simpler, but lessflexible.You'll use this option when the graphicsyou want to draware simple, and when you don't plan toupdate 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 graphicsyou want to draware more complex and when you expect toupdate those graphics fairly frequently.There are many ways to draw with views.But in this lesson I'll focus on drawingusing the drawable class.

A drawable represents something that canbe drawn.Things like bitmaps, colors, shapes, andmuch more.Some simple drawables include theShapeDrawable class, which representsa shape such as a rectangle or an oval.The BitmapDrawable class, which representsa matrix of pixels.And the ColorDrawable class,which represents a solid color.In our example applications for thislesson, we'lloften create a drawable object and attachit toan image view, and then we'll let theimage view handle all the actual drawingfor us.As with Android user interface featureswe've already seen, you can do this viaXML files, or you can do it via explicitprogram instructions.Our first example applications are calledGraphicsBubble XMLand GraphicsBubble Program.These simple applications both display asingle image view, and that image viewholds 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 bubbleimage.[BLANK_AUDIO]Okay, so let's look at the source code forboth of these applications startingwith the code for GraphicsBubbleXML.So here's the application open in the IDE.I'll now open the main activity for thisapplication.As you can see, it's very simple.All it does is call setContentViewusing the main.xml layout file.Let's open that file.Here's the XML file.And it specifies that the entire layout isa relative layout.And nested inside the relative layout isan image view.This image view has a layout width and alayout height of 250 density independentpixels, or DP.The image view is also centered inside itsparent, the relative layout.And finally, the actual bitmap for thebubble isin one of the drawable directories and

it's called B128[BLANK_AUDIO]Let's also look at an application thatdoes thesame thing but that builds its userinterface programmatically.So here's the GraphicsBubbleProgramapplication open in the IDE.I'll now open the main activity for thisapplication.And this application also callssetContentView using the main.XML layoutfile.But in this case, that layout includesonly the outermost relative layoutwith nothing inside it.Let's open that file.So here's the XML file, and like I said itjust specifies that the entirelayout is a relative layout, but itdoesn't have any child views inside of it.So going back to the main activity, thiscode continues by creating an image view.Next, it sets the b128 bitmap as the imagedrawable for the image view.After that, the code continues by settingall thelayout properties that we saw before inthe XML version.First, it sets the height and width of theimage view.These values are stored in another filecalled dimens.xmlthat's stored in the res\values directory.Next,the code creates arelativelayout.layoutparamsobject with the correct height and width.Afterthat the code adds a rule to thelayoutparamsobject which tells Android to center thisimage view inside the relative layoutparent.Then the code sets these layout parametersor layout properties on the image view.And finally, it adds the image view as achild of the relative layout.So let's talk about some other kinds ofdrawables.One kind of drawable is the shapedrawable.Shape drawables are used for drawingsimple shapes.Different shapes are represented bydifferent subclasses of the shapeclass, including PathShape for linesegments and curves,RectShape for rectangles, and OvalShapefor ovals and rings.

Our next example applicationsare called GraphicsShapeDrawXML, andGraphicsShapeDrawProgram.These applications display two ovalswithin a relative layout.The two shapes have different colors,partially overlap each other, and aresemitransparent.Let's run those applications.[BLANK_AUDIO]So here's my device, and now I'll startone of theapplications, GraphicsShapeDrawXML.And thereyou can see the two ovals.The one on the left is cyan colored.And the one on the right is magentacolored.As you can also see, the ovals overlapeach other.And where they overlap,their colors have mixed to form a kind ofviolet color.Let's look at the source code for theseapplications.So here's the GraphicsShapeDrawXMLapplication open in the IDE.I'll now open the main activity for thisapplication.Again the application only callssetContentView using the main.XML layoutfile.Let's open that file.Here's the XML file, and it specifies thatthe entire layout is a relative layout.And nested inside that relative layout aretwo image views.Both image views have layout widths andlayout heights of 250 DP.Both add some space, or padding, aroundtheir contents.And bothare centered vertically inside the parentrelative layout.The first image view, however, is alignedto the left side of theparent while the second image view isaligned to the right.And finally, the actual image viewcontent is defined using theAndroid:source attribute.For the first image view, that sourcerefers to a drawable calledcyan_shape.Let's open that file.It's in the res\drawable directory.Thisfile specifies that this drawable is ashape, thatits specific shape is an oval, and that

its coloris given by this hexadecimal value.Of course, there's a similar file for themagenta shape.[BLANK_AUDIO]And as before, we can do the exact samethings programmatically.Let's take a look at theGraphicsShapeDrawProgram application,which I've also got open in the IDE.I'll now open the main activity for thisapplication.Again, the application only callssetContentView using the main.XMLlayout file.That file just specifies that the entirelayout is a relative layout.Now, the code finds the layout widths,layout heights, and padding.Next, the code gets a reference to theparent relative layout,and after that, it creates a new shapedrawable that has an oval shape.It continues by setting the shape's color,its height and width, and itstransparency.Next, the code creates an image view andputs the new shape into it.It also sets the padding on the imageview.In continuing on, the code sets somelayout parameters for the image view.Specifically, it centers the image viewvertically in the relative layout, andit aligns this image view to the left sideof the parent.The code then finishes up by doing similarthings for the magenta view.Now, if you want to do more complexdrawing, you can also draw with a canvas.And to dothis, you need four things: a bitmap,which is essentially the matrixof pixels that you want to draw on; acanvas, whichhosts the drawing calls that will updatethe underlying bitmap;a drawing primitive, which represents thespecificdrawing operation that you want to issue;and a paint object, which allowsyou to set various colors and styles forthe draw operation you want to do.We'll go into more details about theCanvas class injust a bit, but canvases provide a varietyof drawing methods.For example, you can draw text,points, colors, ovals, and bitmaps usingthese methods.

When you draw, you can use the Paint classto set style parameters.For instance, you can specify things likethe thickness of lines, the size oftext, the color of what you're drawing,and whether or not to apply variousoptimizationssuch as antialiasing.Which is used to smooth out an image'sjagged edges.Let's look at a simple application thatdrawsseveral boxes, each of which hold sometext.But it does so using different paintsettings for each of the boxes.So here's my device.Now I'll start the GraphicsPaintapplication.The application starts up and displaysfour rectangleslaid out one on top of the next.Each of these rectangles has some text,eachof which is of a different size and style.Each rectangle also has a different borderwidth,and border style, and has a differentbackground color.Let'slook at the source code for theseapplications.We'll pick out a few of these styleparameters and see how they're specified.So here's the GraphicsPaint applicationopen in the IDE.Like some of those we saw before, thisapplication's oncreate method only callssetContentView, passing in a reference toa main.XML layout file.Let's open up that file.Here's the XML file.And it specifies that the entire layout isa linear layout, and thatlinear layout has four children, each ofwhich is a text view.If we look at the first of these textviews, we can see that it sets severaltext style attributes.For instance, this one sets its text colorto this hexadecimal value.The text size to 32 scale independentpixels, or SP.It's styled to bold and italic, and itstypeface to normal.If you look at these other, the other textviews, you'll see that they make differentstylistic choices.This text view also specifies abackground, which is in a file called

SQ1.xml, which is the res\drawabledirectory.Let's open that file.So here's the SQ1.xml file, and as you cansee, this file defines a shape.That shape is a rectangle, and it has asolid color.In this case, a white color, which happensto be defined by Android.And finally, the shape has a border with athree pixel width, and it has a backgroundcolor.Which in this case is a fully opaqueblack.[BLANK_AUDIO]