 Hello everyone. So for this week, we will talk about or I will introduce you to two chapters of your book that focus predominantly on the look and feel and style of your applications. So the topics are app bars, styles and themes. We'll talk about that first and then a quick thousand-mile view of or thousand foot view of the Design Support Library. All right, let's get into it. So the first thing is the app bar, also known as the action bar. So in an Android app and, you know, iPhone apps as well, when we talk about the app bar, the action bar, we are referring to that little guy right there up at the top, right? This thing is kind of at the top of every app and usually there's like some sort of back button in it and maybe a title and then a couple of buttons that do something. And in Android, you've got this little guy here that is a menu for things that don't quite fit up here, right? So the app bar, that is like the thing that is the bar at the top of your app. One of the nice things about it is pretty much every app has an app bar. So except maybe for some games in full screen mode or viewing movies in full screen mode, but you pretty much get used to expecting that there is an app bar up there and that it does certain things, at least it has a title and it has a back button usually. Okay, so this is nice because it kind of, you know, we have become trained through using apps for so long to just kind of expect this thing to be here. We don't have to look for it. And the other thing that we know is that if a thing is up here that I can do or see, it's usually pretty important, right? So users of smartphone apps have kind of become conditioned to look for this thing. Usually what happens up here is some navigation is available up at the top here and important actions is what you will find at the top. Okay, so the app bar is the term for the general concept of that line up there. Now it is realized in Android through a class called action bar. Okay, the action bar is the default widget, okay, that serves as the app bar. So it is just another widget, right, but it occupies the space at the top of the screen and people know to look for it up there. So the action bar kind of comes predefined in its general layout, but you can customize how it looks, the color of it and what's in it, right? So if you look at all these different action bars, they all kind of have this back button here. Most but not all have a title, some sort of informative piece of information, and then high priority actions, things you like to do a lot within the app, right? And so Android provides you this widget that kind of comes pre baked and ready to serve up these sorts of things to you, right? But it's just a widget, it provides the layout, and it's up to you to kind of hook together the different actions that you can do in the action bar. Okay, so these guys over here in the top right, these are actions that are tied to but Java code actions, it's like a button. All right, there is also a toolbar, which is another widget that has been introduced more recently in Android somewhat more recently, I guess this API 21 was a couple of years ago now. And what it lets you do is customize more deeply what the act at bar at the top shows you. Okay, so the toolbar, the action bar was kind of the old way of doing things, like these are relatively older apps. This is how all the apps used to look. Now they're a little more customizable. Okay, so we still have actions in our toolbar. And by the way, when you go to write your code and work on your labs, you're going to use a toolbar. We have actions that are tied to Java code just like we have before. And these actions, look, we've got a button here that's got text on it. But then we've got buttons over here that are actually like icon buttons and image buttons. We've got up navigation. Okay, so up navigation, it navigates you back to a parent activity. So in this class section, you will learn about parents, or the concept of parent activities, right? And this, you know, the back button is kind of, you know, it goes back, it's what you're used to, but they call it the up action in Android. And then the third thing that the toolbar provides to you is a menu. Okay, so a menu is going to be like a dropdown list that's baked into your app bar, that holds actions that either don't fit here, because you've run out of space, like in this guy, right, there's just not enough room for more actions here. Or you can tell Android, look, the only action I want to see is the favorite button here, because he doesn't want a favorite David Bowie, that's the goblin king, right? And all the other stuff you can do in this photo app, just hide it back here, they're not as useful, right decluttering your UI and your buttons and actions is usually a good thing. Alright, so that's the app bar, you're going to get introduced to that, how to use it, how to customize it. The next thing in that you will learn about in the lab are styles and themes. Okay, so styles and themes allow you to separate the details of your app's design, how it looks in particular, how the buttons look how the widgets look from the UI's structure and behavior. So if you're familiar with website design, styles and themes are like CSS files, right, they specify, they specify very specifically how things look, what color they are, the font size, the borders, that sort of thing, but the actual arrangement of elements on the screen, the structure and then the behavior, what happens when you like click a button, that's still kind of like in the layout file, but we can pull out the look and the feel of those different widgets and separate it into a different place. Okay, and why would you want to do that? Well, as you start getting into building like bigger and more complex apps, right, you may decide that I think that Android's default button stinks, it's ugly, jucky. And what I want to do is to have all the buttons in my app look the same. And maybe I want to have a concept of text headers that I show, and they're a little bit bigger, maybe they're bold faced, and maybe they're in a different color, right? So what styles let you do is you kind of like define the looks of the things, instead of like copying and pasting the same three lines of code into every layout file, you just say, hey, apply this style, go look up what the style is, then you can tweak the style and tweak all the buttons in your app. And so a style, there is a difference between a style and a theme. A style is a collection of attributes that specify the appearance for a single view, right? So when you create a button, you give it a border, you give it a padding, you can give it a color, you can give it a background color, you can specify the font size, all that stuff. If you put all those things together, that's a style, right? And you can extract those specific things and put them in another kind of like reusable location. A theme is a type of style that is applied to an entire app, okay, an entire app, an entire activity, or a hierarchy of views, okay? So you don't apply a, you apply a style to like one button. You apply a theme to all the buttons in your app. They look kind of similar, okay? All right, so styles. Styles and themes are declared in a style resource file, which is in your resource values directory, and it is usually named styles.xml. The idea is to specify a look in one place and then reuse it throughout your app, okay? So for example, right, here's a kind of simple data entry box, and I have specified a style, right? There's a tag called style, and I give it a name, okay? And the style needs to inherit from something, and the book will go in, the lab will go into, you know, what are the things it can inherit from, but all it does is it's saying, all right, this style, what it does is it specifies Android text color to be this hex code, ccccccccc, which is light gray, okay? So if I want like this text view over here, first name, this text view, last name, visit type, also a text view, if I want them to all have the same color, I can say, all right, Mr. TextView, your style is this style, light gray text that I specified here, right? So this is good because then if I decide later I don't like this light gray, maybe I want it to be dark blue, all I need to do is change the style name or the style value right here, and all of these guys, because they're referencing my style definition, all of these guys will now be light blue. So that's pretty cool. It's a nice reusable configurable way to change the elements that you want, okay? Now themes apply styles to an entire app or activity, okay? You still override attributes in your layout files, you can, like once you pick a theme, you don't have to specify how every possible widget is going to look, right? You only specify the looks and feels of the widgets you want, like maybe you want all the text in your app to be dark gray, fine, we will do that. It won't, but you don't have to specify how buttons look or how images look necessarily, it's up to you, okay? And it's nice and robust, right? So you can, and Android comes equipped with several kind of built-in themes that you can choose from, like material dark, right? You just apply this theme in the manifest file and the whole app, the whole look and feel of the app suddenly changes, or you change it in the manifest to material light and the whole look and feel of the app suddenly changes. So it's pretty cool, you will get some pointers in the lab to different built-in themes, but of course, you can write your own theme and the theme is just a collection of styles, okay? You can customize the default theme, so let me get rid of myself so you can see everything. When you create a project in Android Studio, it applies default built-in design theme defined in your styles.xml file. So if you go right now to any old project and you look in styles.xml, you will see this, okay? These are the colors that kind of default out of Android Studio and they're in reference to different parts of the UI. So, you know, the color primary is the background color of the app bar. Color primary dark is this little system bar at the top. Text color primary, it's white in this case. These are like default things and again, open up your styles.xml file right now and you will see this stuff specified. You can change these colors relatively easily and you will do that in lab number 12, okay? So you're going to get a lot of different control over very specifically the look and colors of the different widgets, right? And chapter, I believe this is chapter eight, just kind of tells you how to do that in a sensible way, you know, well-designed way. All right, so the other module or topic for this week is semi-optional. That is the design support library, okay? I say it is semi-optional because first of all, the design support library chapter is quite long, okay? It's chapter 12 in your book and it's got a long buffet of different widgets and things that Android provides to you through what is called the design support library and it's kind of like pre-baked pre-built stuff and chapter 12 is just a buffet that tells you how to sample each one of these widgets, okay? So if you're really interested in doing really cool stuff in Android, some of the stuff that you've seen in like your favorite apps, you know, like Tinder and those sorts of things, it's probably in the design support library. But again, it's big, it's optional and it's all mostly about how cool things look. I say that this chapter is semi-optional because there are two things that you will have to incorporate into your assignment number two and that is the floating action button and the snack bar, okay? So the design support library, the design support library adds support for various material design components and patterns for app developers to build upon such as navigation drawers, floating action buttons. So this guy down here is called a floating action button, snack bars, this thing is a snack bar, it's like a little pop-up that has an optional action in it and tabs, okay? So material design, what is material design mean? Material design is, it's a design paradigm that comes out of Android or out of Google, I should say, and pretty much all Google stuff has this material flavor to it, right? So Google's design style is called material, Apple's is called Cupertino, I believe, right? So everything coming out of Google looks a certain way, everything coming out of Apple looks a certain way, Google's is based on this thing called material design. What's the material here? Basically, Google's design metaphor is you've got a table in front of you and that table is either your computer screen or your phone or your tablet and then you've got paper that lives on top of it or post-it notes, right? And so, you know, the way that Google kind of imagines these things is like stacks of paper or stacks of post-it notes that kind of have a height and a weight to them, which is why you've got, you know, kind of these borders that sort of have this drop shadow, the drop shadow on the action button down here. But other than that, everything's kind of flat, right? So there's a background, a fairly flat background and then things are sort of stacked on top of it like cardstock. That's the material and material design. So this thing though, this design support library makes it easier to kind of incorporate different widgets into your app that do different things but also fall into this paradigm, right? So what we will get into, what's in the design support library? First is the recycler view. We will have a whole chapter about the recycler view, so we're going to get into that later. And also card viewing, right? So you've probably seen in apps these little cards that have contents that you can swipe through. That's also part of material design. But we're going to have a whole chapter on the recycler view and the card view because in Android, these two things together, recycler view and card view, are how lists of data are displayed. Whether those lists are lists of emails or whether those lists are lists of recipe cards or images. So we will get into that. There's a navigation drawer included. So this little hamburger guy up at the top who kind of pops out and can take you to different places. A tab layout where you can go between, you've got these things that kind of look like this and you tap on one and you kind of get a new page, sub page pop up. Chapter 12 talks about that. Layouts, the coordinator layout. So maybe you've seen apps that do this kind of funky thing here on the left where there's kind of two sections to your page. And as you scroll one section up the other collapses, that's accomplished with a coordinator layout. Also a grid layout, right? So what are layouts layouts arrange widgets. So the coordinator layout and then also a grid layout. So how do you make things in these nice little blocks, whether they're three by three grids or two by two or one by two, whatever they are, that's in there. And so that's it, right? It's a buffet of cool little different things. Now, again, the design support library is going to be optional for you in this class, but you do have to at least know how to do these two things down here. The floating action button and the snack bar. Okay. And I give you specific pointers to the pages where you can look up more about how to do these things, but the rest of the chapter is optional. Okay. So I'll bring myself back and I'll just leave off by saying, that's it. Have fun with these chapters, learn about them, they're going to get you a step closer to making apps look cooler, look the way you want them to look. And as always, if you have any questions or concerns, just reach out and I'll get back to you as soon as I can. Take care. Have fun.