[MUSIC] 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's 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 can 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 a 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 attached 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 ImageView and that ImageView holds a bitmap image of a soap bubble. Let's take a look. Now, I'll start one of the applications, GraphicsBubble XML. And there you can see the simple bubble image. Okay. So let's look at the source code for both of these applications starting with the code for GraphicsBubble XML. 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 ImageView. This ImageView has a layout width, and a layout height, of 250 density independent pixels, or dp. The ImageView is also centered inside its parent. The relative layout. And finally, the actually bitmap for the bubble is one of the drawable directories and it's called B128. Let's also look 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 outer most 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 ImageView. 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 ImageView. 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 ImageView. And finally, it adds the ImageView as a child of the relativeLayout. So let's talk about some other kinds of drawables. One kind of drawable is the ShapeDrawable. ShapeDrawables 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 & rings. Our next example applications are called GraphicsShapeDraw XML and GraphicsShapeDraw program. These applications display two ovals within a RelativeLayout. The two shapes have different colors, partially overlap each other, and are semi-transparent. Let's run those applications. And now I'll start one of the applications. Graphics shape draw XML. 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 the 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 graphics shape draw XML 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:src attribute. For the first image view that source refers to a drawable called cyan_shade. 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 hexidecimal value. Of course, there's a similar file for the magenta shape. And as before, we can do the exact same things programmatically. Let's take a look at the graphics shape.draw program 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 ShapeDrawable that has an OvalShape. It continues by setting the shape's color, its height, and width, and its transparency. Next the code creates an ImageView and puts the new shape into it. It also sets the padding on the ImageView. And continuing on, the code sets some layout parameters for the ImageView. Specifically it centers the ImageView vertically in the relative layout. And it aligns this imageView to the left side of the parent. The code then finishes up by doing similar things for the MagentaView. 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, canvasses 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 what you're drawing, and whether or not to apply various optimizations, such as anti-aliasing. 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 holds some text. But it does so using different paint settings for each of the boxes. Now I'll start the graphics paint 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 has 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 TextView. If we look at the first of these TextViews, we can see that it sets several text style attributes. For instance. This one sets it's text color to this hexidecimal value. The text size to 32 scale independent pixels or sp. It's style to bold and italic and it's typeface to normal. If you looks at these other TextViews, you'll see that they make different stylistic choices. ThisTextView also specifies a background, which is in a file called SQ1.xml, which is in 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.
