Introduction to Mobile Application Development Using Android Week Three Video Lectures

Transcription

1 Introduction to Mobile Application Development Using Android Week Three Video Lectures Week Three: Lecture 1: Unit 1: 2D Graphics Colors, Styles, Themes and Graphics Colors, Styles, Themes and Graphics So far, in all the apps that we have seen, the user interface has been very plain, dull, and drab to look at. Now, in this section, we will see how we can add some vibrancy to the user interface by adding colors, maybe styles and themes, and also, examine the use of graphics, specifically, 2D graphics for designing the user interfaces. Using the techniques that we are going to look at next, we can take an application like this and turn it into something like this. Now, the interesting features include the use of different colors. So, the user interface looks a lot brighter at this point, and also, the use of image buttons on the screen. Now, you can see that we have colors that we have used for the toolbars here. We have colors that we have used to highlight the various messages. And we have used an image instead of text for the buttons, and all these become feasible with the use of colors, styles, themes, and also, graphics. So how do we apply colors? We can use colors that are already provided by the android framework, or we can define our own colors as resources, in terms of the RGB values. And this can then be applied to any component on the user interface. The styles are a collection of properties that could be applied to any view that we use on the UI. Themes are styles that are applied to an entire activity or to an entire application. So, using this, we can then design the user interface with a lot more colorful appearance, and also, a consistent presentation of information on the screen. In addition, the Android platform provides you with animation and graphics features that can be used to design interesting applications. In this course, we will primarily examine 2D graphics, including drawables and the use of canvas. The remaining ones are also interesting for you to explore on your own. Getting back to our chat client application, you see the use of background colors for these messages. This is enabled by the use of drawables support in Android. The color schemes that you see here being used and some of the other features. The fact that all this is supported by a widget called as the RecyclerView, this brings into focus some of the material themed aspects that we are using in this application. We will then subsequently see the design of this 2-D game, which uses the support of 2D graphics that is available in Android using a canvas. So, in addition, we will review a little bit of material design. Now, what is material design? If you look at the Android website, material design is defined as a comprehensive guide for visual motion, interaction design across platforms and devices. Week 3: Introduction to Mobile Application Development Using Android 1

2 This is a whole lot of words to explain to you that you can design your user interface, which is a lot more colorful, adding a lot of animations, meaningful animations, meaningful features that make the user experience with your application a lot more valuable. In this course, we will briefly touch upon material design, in particular, the use of material themes and widgets, which include recycler view and toolbar. So, we'll move off to our next exercise, where we will extend the chart client by adding colors, themes, and drawables. And also, you will see the use of basic elements of material design, including the recycler view and the toolbar. Week 3: Introduction to Mobile Application Development Using Android 2

3 Week Three: Lecture 1: Unit 3: 2D Graphics Colors, Styles, Themes and Graphics Exercise Chat Client Colors (Part 1) As we embark on this exercise let's see what we're going to expect at the completion of this exercise. So, you will see the chat client application starting with a list of contacts. So, this is the first activity that you will encounter when you start the application. So, you have a list of contacts. And when you click on any one of those contacts then you will be taken to a second activity where you will have the chat window open for you and enable you to type in your messages. So, if you type and say, hi and click on [KEYBOARD CLICKING] and you can see the continuation of a typical chat conversation between two users. Now to get to the stage we have to modify the chat client application that we developed in the previous exercise with a lot more details. Now this involves adding colors so you can see that the user interface now reflects a little bit more vibrant color scheme. You can see the use of image buttons on the screen. You can also see that we have two different activities and transitioning from one activity to another activity and so on. And you will see some elements of material design being used in this application. So, let's go ahead and see how we get to this point starting with the project setup code that we provide for you first. To get you started on this exercise first download the pre-configured ChatClientColors.zip file that we have provided to you on the course website and then import the project into Android Studio. So, once you have that in Android Studio youwill see that we have already configured many parts of the project. Now making you go through the entire project development will be very time consuming. So, we will concentrate on certain aspects of the project that you will do hands on. And then I will illustrate certain other aspects of the project by pointing out those parts within the project hierarchy that you need to visit to understand better. So, let's see where we will begin this journey. First and foremost, I want you to understand how we can make an application compatible for different platforms. So far, we have been developing applications primarily targeting platform 21 and 22, which is Lollipop platform. How do we make these applications compatible with earlier versions of Android? Now this ChatClientColors application is configured such that it is compatible all the way down to Jelly Bean. Now we can easily take this approach to make it compatible all the way down to say, Gingerbread or lower. The code itself doesn't change. But for the sake of carrying out automated tests, I had to restrict myself to the minimum SDK being Jellybean. Week 3: Introduction to Mobile Application Development Using Android 3

4 So, what are some of the things that we need to do in order to enable backward compatibility? Now fortunately Android platform developers frequently release what they call is compatibility libraries, which backport some of the features from the new Android platforms to be made available in the older platform. So, for example, the support for material design has already been backported or rather some aspects of material design have been backported. And supported on earlier versions of Android. So, you can go ahead and deploy some of these features. So, we will make use of some of the material design aspects when we develop this application. First let's see how we do the backporting. Now when you start a new project if you set your minimum SDK to a lower value, Android Studio will automatically configure some of these things for you. But just to give you an idea if you don't follow this completely, it's OK. We can still go on doing the project and understand the remaining parts. First and foremost, Android Studio uses something called Gradle for building your projects. Now one of the files that you might encounter if you open is called Build.gradle file. In the Build.gradle file there are certain configurations that we can put in order for our application to work correctly. Now let me focus you down to a couple of things within this Gradle file. So, don't confuse yourself with the entire Gradle file it is right now, quite complex for me to explain every aspect of it. But let me focus you down to a couple of statements down below here in this section called dependencies. So, you will see that I have included something called compile com. android. support. appcompat v The reason for this is the appcompat libraries enable backporting of some of those features to the earlier Android platforms. You can already see that I have used the recycler view liability importer. So, this is how you would import support libraries into Android application configurations so that you can make use of those features. Now, as far as possible, let Android Studio configure this for you. If you need to learn there is sufficient documentation on the developer's website on how to make use of the support libraries and so on. From our perspective, this is sufficient enough for you to understand. The second point that you would notice is that our activities are going to be now using something called AppCompatActivity. The AppCompatActivity is a derived activity from the Activity class and configured in such a way that you can use the features from the support library for the earlier versions of Android. So that's why we will be extending the AppCompatActivity here rather than a plain Activity. So far, we have always been extending the Activity class. So that's one other feature that you should notice about the use of compatibility libraries. Our next examination is the use of colors and tiles vibrancy to the user interface. So, for this we will look at how we can provide resources for adding color and tiles to our application. Week 3: Introduction to Mobile Application Development Using Android 4

5 To do that let's visit a couple of XML files under the values folder. The first and foremost is colors.xml. Here I have defined five different color values that I'm going to make use of within the application. So, you can see the colors being defined here. So, this are all from Android's perspective. These are all resources. And these colors are defined in terms of the RGB values here. We are going to make use of these colors when we construct the user interface. So, spend a little time looking at these colors. And also on the left side, you can see small patches to indicate to you what the colors will actually look like on the devices' screen. The second part is how we make use of those colors to create tiles. So, this is where one part of material design comes into the picture. As tiles in material design can be enclosed inside another file called styles.xml and here we define radiuses, tiles, and then make use of the color schemes that we have defined earlier. We can also define fawns and other aspects for a stack. So, in here we are making use of this tile, which I call is AppTheme. And this theme is the theme that I'm going to apply to all the UIs that I'm using within this application. Now here I will make use of three different colors here. So, this is the material designs' way of specifying colors for various aspects. Now later on I will explain to you how these are actually used in stylizing the toolbar and the status bar and other aspects of the user interface. Spend a little time having a look at how we make use of the colors within this style. The third aspect that you're going to examine here is the use of something called drawables. Drawables are again resources that you're going to provide for your application to make use of in the design of the user interface. And some drawables that you will actually make use of are images that can be used in the construction of user interface. So far, our chat client application we make use of the send button, which is using an image there. So, these images are imported into our project. Now when you define images for Android, you have to remember that Android devices have a variety of screen densities. And so, when you supply images for use within your Android application, you need to ensure that you supply images that can be used for several different screen densities. Now in Android's terms these are classified under several categories starting all the data from xxxdpi, xxdpi, xdpi, hdpi, mdpi, and also ldpi. So, these starting from xxxdpi down to ldpi refer to the screen densities. Obviously, the higher end being the screens that have very high pixel density. So that's the reason from the use of the acronym dpi. You need to supply your image at different resolutions targeting each of these different dpi value. So, you will be supplying exactly the same image but at five different pixel density values. So, this is what you will see included in the drawables folder. So, you can see that I have included five different.png files all with exactly the same name, with the different pixel densities here. Now I didn't target ldpi because we don't see that often being used in devices anymore. So now by specifying your image at different pixel densities Android will automatically configure the user interface to use the right image for the devices' pixel density. Week 3: Introduction to Mobile Application Development Using Android 5

6 So, for example, if you have a very high density screen for your device, then it will automatically default to using images with high pixel density. And for lower end devices it'll default to an appropriate lower pixel density. So, this way your screen will not look distorted when you target devices with different pixel densities. So that's one other feature-- again this is explained in detail on the Android developer s website. I just wanted to draw your attention to that fact here. In addition, we make use of drawables that we can actually define in XML code within our application. Now in this example, we will make use of two different drawables here. Let me open one of them and then show you. This is called is a shape drawable. And in the shape drawable I have configured the shape to be a rectangle, and of one single solid color, and the rectangular with rounded corners. Now the reason why I do this is that when you display your messages I want the messages to be highlighted with some background color. So that is where the shape drawable that I just defined is used in practice. In a short while I will show you how we can make use of this shape drawables to define our messages. We will examine this in a little more detail when we come to the theoretical foundations for this exercise. Now let me show you how I can make use of these drawables within my user interface definition. So, we saw from the earlier chat client that we have the message.xml and mymessage.xml files. So, you see the message.xml file, which is the two text views inside an inside a linear layout. So, let me go ahead and select that linear layout. And then for this linear layout I will set a background color to be drawable/bg_message_left. When I do that you can immediately notice that this particular message linear layout is now enclosed inside a colored, rounded rectangle. So, this is how we make use of a shape drawable to define certain properties for our UI widgets that we are using or layouts that we are using within our user interface. Let's go ahead and do the same thing to mymessage.xml. OK selecting the linear layout I'm going to apply to other color for this background. So, I would say drawable/bg_message_right. We have already defined this XML file in the drawable folder. So now you can see how I manage to add background color to the two different messages so that they are a lot more clearly visible on the screen. So, this is the use of drawables on your user interface. Week 3: Introduction to Mobile Application Development Using Android 6

7 Week Three: Lecture 2: Unit 1: 2D Graphics Drawables Drawables In the chat client with colors exercise that we just completed, we saw the use of a shape drawable in order to add some background color to the messages. Now let's examine drawables in a little more detail. In Android, we can make use of drawables for drawing shapes and images to the view. All the drawables come under the general class called of the drawables class. The drawables class has several subclasses, which include bitmap, shape, picture, drawable, and so on. In particular, we saw the use of shape drawable in the previous example. Drawables in Android can be defined in three different ways. You can use an image that you store in the drawable folder as part of the view that you create on your user interface. You can also define drawables using XML code, as we saw with the example of the shape drawable. The third possible approach for creating drawables is to use Java code within part of your Java class to create the drawables. Now, if you create drawables in the form of XML files or you're using images, they are normally stored in the drawables folder of your resources folder of your product. Now, Android provides several different kinds of drawables. Bitmap drawables are the simplest, which uses either a PNG or a JPEG image for that purpose. We have nine patch, which allows you to define a PNG format and allows Android to automatically stretch parts of the image in order to fit for different screen sizes and shapes. Shape drawables allows you to use simple drawing commands like drawing triangles, circles, and so on in the background on a raw bitmap and allows you to define certain properties for these shape drawables. We saw the use of shape drawable where we used a rounded rectangle to define the background shape for our messages. You have other kinds of drawables called as layer drawables, stateless drawables, and so on, which we don't examine in this course, but can be very useful when you're designing user interfaces. In particular, let's look at the shape drawable. This is especially useful if you need to provide some kind of a background for a view that you already include in your user interface. As we saw with the messages, we wanted to highlight the messages by surrounding them with a background color. And this is where the shape drawable came to our rescue. In this slide, I have provided you with a snapshot of the shape drawable code, XML code, that we used in the chat client colors example. In particular, notice how we define the shape of the shape drawable to be a rectangle. And we specify that it is a solid color of one single color, and also specify the rectangle has rounded corners by specifying the cardinal radius. Now these allow us to customize the way the rounded shape is drawn in practice. In addition, we could even define the background color to be a gradient. You could have the starting and ending color in a particular direction with 2 or 3 different colors so that you have a gradient shading of your background. Week 3: Introduction to Mobile Application Development Using Android 7

8 So that is also feasible. Now, once you define a shape drawable, then you can make use of the shape drawable to set the background of an existing view, as we saw us using it for setting the background of the linear layout in our message XML file. So, with that, we complete a quick discussion on drawables. I would suggest you examine other kinds of drawables that are available in Android by looking them up on the Android developer s website. You might find some of them useful for other purposes. But the general principles are similar to what we have done with the shape drawable. Now we will move on to the next exercise, where we will continue to extend the chat client example by adding toolbars and RecyclerView. So, this is where we add a little bit of material design features into our application. Week 3: Introduction to Mobile Application Development Using Android 8

9 Week Three: Lecture 2: Unit 4: 2D Graphics Drawables Exercise Chat Client Colors (Part 2) Let's now quickly revisit some of the layouts for the two activities that we are using in this application. First, the contacts activity uses a simple ListView to display the list of contacts. And this is enclosed inside a relative layout. And I'm also using a tool bar here, which I'm going to come to in a short while. The other layout that we're using is for the chat client activity. In here, you see the use of the edit text, just as we did before. And you see the use of an image button here rather than the text button or the standard button we saw earlier. So, I have replaced the send button with an image button here. So, to do that, we can use an image button from the palette, drag it in, and then for the image button, you're going to supply the image resource that we included in the drawable folder as one of the parameters. So, if you select the image button, you would see that for this button, the source, src here, is set to be the drawable, which is the back button that we have included in the drawables folder. For the image button, I'm making use of an Android standard background drawable that is available. With Android Lollipop and further, at the top of the screen, you can include a toolbar where you typically put additional menu buttons and menu overflow and also the title of the activity or the application and perhaps even a back-navigation button. Now, in order to maintain backward compatibility for the earlier versions of Android, if you had any previous experience with Android, you would have seen something called the action bar being used earlier. Now, with Lollipop onwards, the compatibility library supports toolbar. A toolbar is a generalization of the action bar that has been used earlier. So how do we make use of a toolbar within an Android application and then how do you include that within your application? One way of doing so is to define another resource in the layout folder called the tool_bar.xml. Now, this is the design view of the toolbar. Let me take you to the text view of the toolbar and show you what it actually contains. This text view shows that this includes the toolbar being defined as support v7 widget toolbar and then I provide certain properties for this toolbar. Now, once I create this toolbar layout file, I can then include this toolbar into any other layout file by using include. So, if you go to the chat line or XML file, at the top, you see the toolbar appearing there. Now, if you switch to the text view, you will see at the top that I have included the toolbar into my layout by using the include feature available for designing layouts. So here I am making use of the tool_bar.xml and using that XML file, I'm including that in place inside my activity_chat_client.xml So that is how I can create a toolbar and include it into my other UI layouts so the various activities. Week 3: Introduction to Mobile Application Development Using Android 9

10 Stylizing the toolbar can be done using the style.xml file that we have defined earlier. When we review material design later, we will understand how this is done in practice. One other feature of the Lollipop platform and the material design approach that I am using in this application is the RecyclerView. So earlier, we were using the ListView for displaying the list of messages. I have now replaced that list view with a RecyclerView. The RecyclerView is a slightly modified or enhanced version of ListView, which provides additional features. Now, in this application, I'm only using the RecyclerView for it's listing of items purpose. But the RecyclerView brings a lot more other flexibility. Now let me show you how I include the RecyclerView within my user interface. Now, earlier, if I switch to the text view of the UI, you will see that earlier I had the ListView included here. I have replaced that with Android support v7 widget RecyclerView here and configured certain parameters for it. Now, this is how you would include a RecyclerView within your application. Now, the RecyclerView still doesn't appear in the pallete on the left side yet. So once we have done that, now we need to go into the code and activate all these different features. First, the toolbar and then the RecyclerView. So, in the next part of this exercise, we will revisit some of those code files that we have already included in the project and look up which parts we need to fill in in order to complete this application. Finally, visiting the Java code, we will see that we already have four different Java files that are included in this application. First and foremost, let's visit Contacts.java. This is the standard list view that I have used earlier for my greet friend application. I have basically copied and pasted much of the code and then just edited a little bit to make it feasible for me to use the contacts activity within this application. In addition, I have made the contacts activity as the starting activity for my application. Now, you're going to ask me, how did you manage to configure the contacts activity as the starting activity while earlier the client activity was the starting activity? To do that, when we create the Contacts activity, we can set that to be the launcher activity in Android. Now, what Android Studio will do is it will put this information into the manifest file. So, let's just quickly visit the manifest file to learn how you configure a launching activity for your application. So, if you switch to the manifest file here, you will notice that in the manifest file, the activity named contacts now has something called an intent filter specified here. This intent filter has two actions-- an action and a category--included inside this filter. Now, the intent filter is essentially informing the Android framework saying that if this application is to be launched by the user, then use this activity-- in this case, the contacts activity-- as the starting activity when you start the application. Now, this is what we are specifying using the action and the category parts of my intent filter. So, you see that in the action part I have specified it as action intent, action main. And the category as action intent category launcher. So, this is how the Android framework understands that if a user clicks on the icon of this particular application, then you are supposed to start this as a starting activity when you start Week 3: Introduction to Mobile Application Development Using Android 10

11 the application. Now, again, there's more to intent filter than what I've just explained to you, but that is something that you can review on the developer's website in more detail. So, I wanted to introduce you to certain nuances that you see in the manifest file. Now, normally you would want Android Studio to automatically configure this for you so you don't need to go in and edit these parts by hand as far as possible. Now, the Contacts.java. You can quickly wizard the code and then notice that this is very much similar to what we have seen earlier, except that the contacts activity will now start the chat client activity using the intent and the start activity. So, we have already seen how to start activities earlier. The next aspect or the next file that we will visit is the MyAdapter.java file. This MyAdapter.java file contains my own custom adapter that I've implemented for use with the RecyclerView. In the early exercise, we have seen the use of custom adapter for the ListView. So, this custom adaptor that I created here is of the RecyclerView type. So that's why I'm extending the RecyclerView adapter here to create MyAdapter. Now, when you create a RecyclerView adapter, there are certain methods that we have to implement. Also note that in this case, I have two different layouts that I need to use depending on which kind of message I am displaying on the screen, whether the message is an incoming message or the message is an outgoing message from me. So, for that we have two types of view holders being created--view holder type one and type two. Type one refers to the use of the view holder to display an outgoing message. Type two is used for creating a view holder that displays an incoming message in this example. So, the incoming message uses message.xml as the layout. The outgoing message uses mymessage.xml as the layout. So, in here, if you visit the code, you will notice that I'm creating the two different views by making use of the layout files and also appropriately setting the text views inside the linear layout in each of these. Now, for the RecyclerView, this OnCreate View Holder is going to be invoked by something called the RecyclerView's layout manager. We'll see how we make use of the layout manager in code in a short while. So, whenever the RecyclerView needs to display a new item or add a new item into the list of items, it's going to result in a call to the On Create View Holder. This is the one that creates the view for that item to be included in the list. Now, for the ListView, we saw the use of getview for this same purpose. In addition, that we have some other methods that I've implemented here to enable us to create the RecyclerViews. Finally, we drop into ChatClient.java. In ChatClient.java, much of the code is the same as what we have seen earlier for the previous exercise. But let me draw attention to the two parts that we are going to fill in as part of this exercise. First and foremost, we included the toolbar in our UI's view. We want to activate the toolbar and make the toolbar act like an action bar for our activity. So, to do that, we need to include a certain amount of code here. And we've got to replace this comment by the appropriate code just to enable that purpose. Week 3: Introduction to Mobile Application Development Using Android 11

12 What I've just done is to substitute that to do comment with the appropriate code to activate the toolbar. Let me quickly run you through this code step by step to understand what I'm doing at this moment. So here, I am getting a reference to the toolbar. Then I am setting this toolbar to be an action bar, which means that this toolbar is displayed at the top of the screen and it can also host menu items and so on for this particular application. So, this is the second part that we need to do. Now, I am going to set my friend's name as the title for this toolbar. So, to do that, from the intent, I'm getting hold of my friend's name. So, in the contacts.java file, when the intent is created, I'm adding in the friend's name as an extra field for that intent. And then I'm saying it over here. So, I'm retrieving the friend's name here, and then I'm going to then make use of that friend's name and then set it as the title for my toolbar. So, this is the set of steps that you need to do to activate the toolbar. If you go to the Contacts.java file, you will see me again doing similar kinds of things there also to activate the toolbar on the contacts view. The final step in this exercise is to include the code for using the recycler view or to activate the recycler view in our code. So here, you see that I have substituted the comment with the appropriate code to use the recycler. So, I'm getting a reference to the RecyclerView here and then I'm specifying that this RecyclerView has a fixed size. So, there's only a finite number of messages that need to be displayed. The RecyclerView will automatically take care of scrolling when required and then only display those parts of the message there. Now, a RecyclerView makes use of something called the layout manager. In this case, since I'm using a list of items displayed vertically, so that's why I'm making use of the linear layout manager here for this purpose. So, I get a reference to the linear layout manager and then set the orientation of this linear layout manager to be vertical. So, as you see, the RecyclerView allows you to include things like linear layouts, grid layouts, and card layouts and so on. So, the RecyclerView is a more general type than the standard list view we have seen earlier. And then after this, you're going to set the linear layoutmanager to be the layout manager for the message list RecyclerView.And then also we're supplying the adapter for this message list recycler view here. So, once we have completed this part of the code, let's save that and then start and execute this application to see the result after we have completed these modifications. Once your application is deployed to the emulator or to the device in case you're using a real device, then you will see that the contacts show up on the screen as seen to the right side here. Now, if you click on any one of those contacts-- before we proceed, let's see how I use the two colors here for my toolbar and also the status bar up here. And also, this is a standard list view that we have seen earlier. So, let's go ahead and click on one of those items. So now we've switched to the chat client activity, and in the chat client activity, notice that the title is set to the name of my friend. Week 3: Introduction to Mobile Application Development Using Android 12

13 I have already shown you in code how we can achieve that. So now if you go ahead and type in your messages and then click on the Send button, you can see the chat client working in practice. And so that completes the chat client with Week 3: Introduction to Mobile Application Development Using Android 13

14 Week Three: Lecture 3: Unit 1: 2D Graphics Elements of Material Design Elements of Material Design If you visit the Android developer s website, you will see a lot of references to material design. Now, what exactly is material design? This is a comprehensive set of rules and guidelines for designing user interfaces, including concentrating on the visual, the motion, and the interaction aspects of the user interface design. This set of rules are designed to be applicable across multiple devices and multiple platforms, including the web and mobile devices. Now, in this course, we can't get into the entirety of material design aspects, but we will look at a few elements of material design that I have incorporated into the ChatClientColors example that you just saw earlier. Comprehensive support for material design features are available on Android 5.0 and higher platforms. However, not all of them can be backported to the earlier versions of Android. Some features are supported on the previous platforms through the Version 7 support libraries. And indeed, in the ChatClient example that we saw, we are making use of the support libraries to backport some of those features to be available for earlier platforms. So, we have already seen that we are using the AppCompatActivity for designing the ChatClient application. Material designs styles are available for some of the widgets using the AppCompat theme that is available with the Version 7 support library. So, we will see the use of that for our UI design. In addition, we can use some of the new widgets, like the RecyclerView, and the CardView, and Toolbar in our application. So, getting back to our ChatClient example, you will see that on the user interface I have applied the AppCompat theme. So, if you visit the style.xml file, you will see me using the AppCompat theme there, and then we also incorporated two new UI widgets, the Toolbar and the Recycler View, in redesigning the user interface. In particular, let's quickly run through the use of the Color Pallette for supporting various colors on the user interface. So, these are declared in the colorstart.xml file, and the styles.xml file that we have visited in the exercise. You will see me declaring the colorprimary, colorprimarydark, textcolorprimary, and so on, to specify various colors that we use on the user interface. Jumping quickly to the colors.xml file, you will see me declaring various colors in the XML file here. Now, switching to styles.xml you see me using those colors that I declared to specify the various colors to be used on the user interface. So,, you can see me declaring the colorprimary, the colorprimarydark, and the coloraccent in the user interface. In addition, the app theme is declared to use the appcompat light, with no Action Bar here. The reason we are using no Action Bar as the theme is because we are going to use the Toolbox on the User Interface, acting as the action bar. The other aspect you saw me using in the ChatClient application is the RecyclerView widget. RecyclerView widget is a lot more comprehensive widget than the ListView that we have been using earlier. It provides a lot of interesting features for supporting large data sets, and the way the RecyclerView is constructed is that the RecyclerView is supported through the Layout Manager. Week 3: Introduction to Mobile Application Development Using Android 14

15 We saw the use of the Layout Manager in the code, and in particular, we used the LinearLayoutManager. We can also use the Recycler View for Grid Layout, and Staggered Grid Layout Manager, also. Now, the Layout Manager takes they help of the adapter. We implemented the adapter using the RecyclerView Adapter. So, we implemented a subclass of the RecyclerView Adapter in our code, and that's how we supported the Recycler View. The Adapter was taking the data from the Messages data set, and constructing the various elements of the Recycler View from this data set. Quickly visiting the code, you will see that we have done this in the MyAdapter.java file, where we subclassed the RecyclerView Adapter, and then constructed the various pieces of code here to support the display of the messages inside the Recycler View widget. Finally, we review the Toolbar, which we have used in the example. So, the Toolbar is a generalization of the Action Bar. And the Toolbar is designed to as a view, and can be included any way on your user interface. Earlier, the Action Bar had a fixed location at the top of the screen. Toolbar generalizes this, and also allows the use of animations that come with the material design approach. And the Toolbar can be set up to act like the Action Bar by using the setsupportactionbar method. And this is indeed what we used in our code for declaring the Toolbar to act as an Action Bar. So, with that, we complete the discussion on the ChatClient colors. We will move on to the next exercise, where we will understand the use of 2D with canvas, and how we can draw items onto the canvas and then display them on the user interface. Week 3: Introduction to Mobile Application Development Using Android 15

16 Week Three: Lecture 3: Unit 4: 2D Graphics Elements of Material Design Exercise Basic Graphics In this exercise, you will be examining the basics of 2D graphics support in Android using a view. At the end of this exercise, you will be able to create a view as shown on the emulator screen here. As our first step, download BasicGraphics.zip file that we have provided to you on the course site. And then unzip it and import the project into Android Studio. Once you have imported the project into Android Studio, open some of the files that are already included. We have pre-configured parts of the project for you so that we can concentrate on those parts to explain in more detail to you. First and foremost, open MainActivity.java file. You will notice that this is a standard activity that we have seen earlier and there is not much variation in here. And you will also see the use of the toolbar in MainActivity.java file. Now, second, open activity_main.xml file. You will see that inside this finally-- when you switch to the Text view tab, you will notice that we have included in View widget here called as the DrawView. Now, this DrawView is a custom view that we are going to implement as part of this product. How do we construct this DrawView? Now, as I mentioned, in Android you can take the View class and then subclass it. Then it becomes your Custom View class. And then once you subclass the View class, then you could go in and then the View class provides you with methods that enable you to construct your own custom view or custom widget. Now, let's then switch to that DrawView.java file. This is where we are subclassing the View class. So the DrawView is a subclass of the View class. So from the code, you would notice that I am subclassing the View class and we have the constructor method here. In addition, then you subclass the View class. Android framework gives you a method called the ondraw() method. The ondraw() method enables you access to a canvas. A canvas is like what you see in a painting canvas. You get a blank area on which you can then put objects onto, just like a painter takes in blank canvas and then starts painting onto the canvas. The DrawView subclass contains the ondraw() method, which you can use to draw onto the canvas. So, let's see how we go about constructing this DrawView class. First, let's understand that in order for you to draw items onto the canvas, you need to create that you paint objects. Paint object are required whenever you need to draw any items onto the canvas. So, we will first create some paint objects. So, when you go into the DrawView class, you will see some TODO comments here. We're going to replace one-by-one each of these comments, and then understand how this works. First, let's complete the constructor method of the DrawView class. First, I am going to go in and then replace this TODO comment with a set of codes in order to create a few paint objects. So here, I am creating two different paint objects. RedPaint and bluepaint, which I'm going to make use of on my canvas. So, the redpaint, the way we create a paint object, is to declare the paint object variable, and then use the new constructor for creating a paint object. And then, we set the color of that Week 3: Introduction to Mobile Application Development Using Android 16

17 paint object appropriately. So similarly, for the bluepaint object. In Android, whenever you need to draw any images onto the canvas, the canvas accepts bitmaps that can be put onto the canvas. So, if you happen to include any images in the.png or in a.jpeg format in your application, then you should convert that into a bitmap. Now, Android framework provides some factory methods for you to converge images into bitmap files. So, to do that, let me show you the corresponding code by replacing this TODO comment with the appropriate code here. I am using this code in order to converge an existing image file from the resources folder into a bitmap. So, I'm making use of the BitmapFactory that is provided in Android, and creating a scaled bitmap with that image. Now, where is this image located? This image is located in the bitmap folder of your resources. This is basically the image of the launcher icon that you use for your application-- the standard launcher icon. So, I'm just leveraging an image that already exists there for creating a bitmap. You can always make use of a similar approach by including your own images into the drawable folder, and then taking those images and converting them into bitmaps using the same approach that I show here. So, I am using BitmapFactory.decodeResource, and the source that I am supplying here is the image file that I have included in the folders there. And then I am specifying that I want to create a scaled bitmap of size 50 pixels-- 50-by-50 pixels. So, this, I am putting it equal to the variable that I'm going to later on make use of when I draw these items onto the canvas. The next method that I will focus you on is the own draw method. In the ondraw() method, Android framework is going to supply you a canvas. And this canvas comes in as a parameter for the ondraw() method. Now once you get hold of the canvas, then you can draw objects onto the canvas. So to do that, let me replace this TODO comment with appropriate code, and then explain to you what this code actually does in practice. So, you can see that I am now making use of the canvas object, and then I am drawing either lines or rectangles or circles onto this canvas. So, let's examine the first one. It's a canvas draw line, and it specifies the two points of the-- two end points on the line. So here, this line is drawn from the bottom of the screen. It's a width of about 100 pixels, and I'm going to be using blue color for this. So that's why I'm specifying the blue paint object that I created earlier in the constructor. So now, you can see why we need those paint objects. If we need to include any object that we draw onto the canvas, we need to specify the color of the object that we're going to draw onto the canvas. So similarly, I'm drawing a rectangle where I'm specifying the upper left and the lower right corner of the rectangle. And I'm also drawing a circle of red color, and so on. And finally, I am drawing it-- I am putting the bitmap that I just created in the constructor onto the screen. Week 3: Introduction to Mobile Application Development Using Android 17

18 So, once we complete this code, then when you run the application, the result is what you saw at the beginning this exercise. So, let's now run this application, and then go and see the result on the emulator screen. So, when your application is deployed on the emulation. This is the result of the modification to the code that you have done. On the screen, you can see that the DrawView object occupies the entire white part of the screen. And on to this DrawView object, we have drawn various objects in the ondraw() method of the DrawView class. So, you can see that we have drawn the bitmap right at the top here. Then we have drawn two rectangles. One is a horizontal rectangle here and the other one is a vertical rectangular. Then we have a line going through right in the middle here. And then we see half the circle here. The other half of the circle is hidden beneath this blue rectangle. Now, the reason why I drew these things onto the canvas is that we're going to use this as a starting point for a simple shooting game that we are going to develop in the next exercise. So, before we move on to the next exercise, I wanted you to appreciate how we create various objects on the canvas. So, this completes the basic graphics exercise, and then we will move on to the next exercise where we will develop a simple shooting game. Week 3: Introduction to Mobile Application Development Using Android 18

19 Week Three: Lecture 4: Unit 1: 2D Graphics 2D Graphics on Canvas 2D Graphics on Canvas In the basic graphics exercise that you just completed, we saw the use of 2D graphics and the use of Canvas and drawing on the canvas in order to create a custom view. So, in this case, 2D Graphics with Canvas is very much suited for applications where you want full control over what is drawn into the view. So, for example, if you want to create a custom button or if you want to create a custom view or a custom image by drawing onto a graphical screen, then this is the approach that you would take. Now, when you use 2D Graphics with Canvas and then you subclass the View class, Android framework automatically provides you with a canvas. A canvas is like a bitmap onto which you can draw whatever you want using the methods that are supplied by the Android framework. So, once you get hold of a canvas, then you can use methods like the drawbitmap, the drawrect, the drawtext, the drawcircle, and so on to draw various kinds of objects onto the canvas. Now, how do you get hold of the canvas? When you subclass a View, in your class that you create, you will have access to a method called ondraw method. So, you will override the ondraw method. And when you override the ondraw method, the parameter coming into the ondraw method is a canvas. So, you will get access to the canvas. You can then make use of the canvas and then draw items onto the canvas there. So, by extending the View class and then getting the ondraw callback method, then whatever you need to draw on that view can be done inside the ondraw method as you saw in the example. Whenever the Android framework needs to redraw the screen, it is going to call your ondraw method in order to create that view and then draw it onto the screen. You can trigger the Android framework to call your ondraw method by using a call to the invalidate () method in the Android framework. So, if you call invalidate (), then that will force the Android framework to come back and call your ondraw method. So that is one way for you to trigger a redraw of the screen if you require. In the next example, we see the use of invalidate () in order to create motion on the screen. So, inside your ondraw method, then you can use various Draw methods to draw on to the canvas. Once your ondraw method is complete, then the Android framework will display that item on the screen. We'll now move off to the next exercise where we are going to develop a simple shooting game starting from the basic graphics example. And in this exercise, we will see the use of the ondraw () method and the use of the invalidate () method in order to create animation on the screen. Week 3: 2D Graphics 19

20 Week Three: Lecture 5: Unit 1: 2D Graphics The Shooting Game The Shooting Game In the next set of exercises, we are going to work on developing this shooting game step by step where along the way we will learn about 2-D graphics, we'll learn about multimedia, we'll see how we can have background music and sound, and various other features of the Android platform. So, finally when we have completed the set of exercises, this is the game that you're going to see develop. [MUSIC PLAYING] So, you can have some fun and end playing this game and enjoying the fruits of your labor through this course. So, as we play the game, we can keep shooting down the android guys, and if you happen to miss or if you happen to not shoot down then the android guys, then you will see different kinds of sounds being generated in the game. Week 3: Introduction to Mobile Application Development Using Android 20

21 Week Three: Lecture 5: Unit 3: 2D Graphics The Shooting Game Exercise Shooting Game In this exercise, we're going to implement the first version of the shooting game. So, in this game, we'll primarily concentrate on learning about designing the graphics and the movement on the screen. So, in this exercise, as you can see, you have these little Android guys falling down from the top. And we have a cannon at the bottom, which we're going to make use of to shoot down the Android guys as they fall down. So, this is a typical shooting game exercise that you might have seen in many different contexts. This is just an attempt at using that idea for our shooting game exercise. So, we can move the cannon left or right and then shoot bullets at the falling Android guys. So, the left and right arrows can be used for movement and then use the middle button to shoot the actual cannon at the shooting guy. You can use the thin blue line as a guide to position it. Obviously, if you're playing on a real device the speed of moving the cannon would be much more pleasant than in the emulator. But it's a good fun way of learning certain aspects about graphics in Android. To get you started on this exercise, as usual, go to the course site and then download ShootingGame.zip file that we have provided for you. And then import the project into Android Studio. And as usual, we have pre-configured some parts of the project to get your started very quickly. Now, parts of this implementation are based on the basic Graphics example that you have already seen earlier. So, we still see the use of the custom view, which is the DrawView. And we still are going to make use of the different drawings that we have done earlier. Except now that certain parts of what we are drawing on the user interface have moved them into separate classes so that it's easier to manage changes to certain properties of each of those objects in their own individual class. So first and foremost, when you visit the layout, you would notice that the layout is very much similar to what you have seen in the basic Graphics example. So, if you look at the text view, you would see in addition I have 3 buttons, image buttons, that I've included in the bottom. So, you see the three image buttons here, the left, right, and the shoot button here. I have included their corresponding graphics images into the drawables folder at different resolution levels. And I have put these three into a horizontal linear layout here. The white part of the screen is occupied by the DrawView custom class, and it is in there that we're going to draw all the action part of the game. In response to the clicking of the buttons we'll do certain changes to the user interface. Week 3: Introduction to Mobile Application Development Using Android 21