 Hello mobile app development students, Dr. Lehman here. So we're going to get started today on the meat of the course and actually building some apps and just getting some of the real fundamental concepts down. By now, you should have completed everything from the first days module on Canvas, which is focused around installing Android Studio, knowing what to expect, knowing how to use your book, and just making sure everything's configured for coding to get started with, which we will do today. So my goal in this video is to introduce you some of the really big fundamental concepts of Android application development. And that is views, layouts, and how these two things interact through one another with events. So there are two labs that go along with chapter two of your book that are posted for this week on Canvas for your head's first Android development book. And what I would say is, watch this video first. You may get kind of rung up in the jargon, do the labs, and then come back at the end and watch this video again, particularly the second half of the video. Hopefully it'll kind of make the fire hose you just drank from in the labs make a little bit more sense. So let's get into it. Before I do that, before I start getting into some slides, I'm going to turn this webcam off for a couple of slides. OK. So the major components of Android applications. Android applications are oriented around this concept of activities. That is a key word that you need to use. It will come up over and over again. Activities define what an app is, what it does. When you interact with an app on your device, each screen is usually a different activity. Now when we get into the code, activities have are comprised of two things. The first is a Java class. And the second is a layout file that is written in XML, Extensible Markup Language. Now these two things serve different purposes. First of all, remember, everything under the hood in Android boils down to a Java class. So whenever you see Android running, it's Java code. It's Java. The stuff on the screen is Java. The logic is Java. Everything is Java. The Java class for an activity is responsible for doing the logic, doing the processing. When a user taps a button and says search for X, that X gets sent to some Java code and the processing happens there. And then when the processing is done on the Java side, the Java code updates the content that you actually see on the screen. So if you press the Play button, it's going to toggle that Play button from showing the Play icon to a pause, or maybe it's going to highlight or change the color of something. The second component of activities are the layout XML files. The purpose of these layout XML files is to specify the basic boilerplate of what you see on the screen. What are the buttons? Where do they go? What color are they? How big are they? Text boxes, what's in them? Text content itself, what does it say? And where are they arranged on the screen? That's what the layout XML file does. Now, everything in Android is Java. You could specify your layout using just Java code. But if you have worked with Java GUI code at all, you know that it is not pleasant. And you have to write a whole bunch of Java GUI code to get anything at all on the screen. So the good folks at Android, what happens is this XML file, you specify what buttons and things that you want to see on the screen in XML. And then behind the scenes, what happens when your app starts up or when an activity comes on the screen, their Java engine runs over, grabs the XML file, and turns it into all the Java GUI code so that you don't have to. So the XML file sets the stage for how a screen looks or an activity looks. Views, what are views? Views are a keyword in Android. The view is a Java class that is the basic building block for user interface components. They occupy a rectangular area on the screen. So you can see here in this clip from Spotify. Views are rectangles. They're not circles. They're not triangles. They're not weird shapes. They're rectangles on the screen. And a view draws what you see inside its boundaries. And it's responsible for handling events. So there are several views on this screen. There's one, there's a rectangle for the word search. There's a rectangle for the text box. There's a rectangle for this microphone icon, et cetera, et cetera, et cetera. Each one of those things are views. Any screen that you see in an Android app is a hierarchy of views. Okay, so these things are arranged in a particular way. This text box actually has things within it. There's some organization down here at the bottom as well. So there's a hierarchy of views. That is what you are looking at. But it's a hierarchy of Java classes as well that kind of contain one another. In general, there are two types of views. One is a widget and one is a layout. So not to be confused with the layout.xml. Okay, and we'll talk about what these two types do. But why are they called views? Let's just throw a quick little bit of history in here. Way back in the 70s, the very first GUI operating system was in the Xerox Alto, right? And if you've seen pictures of old Mac and even old Windows, they kind of look pretty similar, right? This was the very first GUI system. And it was written in the Smalltalk language as well. Well, Smalltalk evolved out of it. And what people found out, the developers of these systems found out when they were building them was, man, there's a natural logic and a natural benefit when you're coding these systems to think about pieces separately. And those different pieces led to the model view controller pattern, okay? This was really the first GUI operating system. And what they discovered was, it's useful to separate these concepts of model, which is the data. The view, which is the stuff you see on the screen, and the controller, which is the logic that processes the data and then sends it up to be displayed. It's just a very useful way of organizing the code instead of trying to have this code all mashed together, right? We actually will physically separate these things into classes, right? But anyway, that's the origin of the term view. It goes way, way, way back. All right. So what are widgets? Widgets inherit from the view class. Widgets are the things that create, they are concrete, interactive UI components, things like buttons and text boxes, right? Things you can touch and interact with. In Android development, you are typically not responsible for coding up your own widgets for like what is writing the really complicated intricate code that draws a thing on a screen and does it consistently for different screen sizes and orientations. You don't have to worry about that. Android comes prepackaged with a whole bunch of these basic widgets, like buttons, like sliders, et cetera, and you just need to use them. You need to call them and invoke them in the appropriate way. So as I mentioned, there's lots of different widgets. Here's the base home screen for Spotify from that I showed earlier. These words at the top, if you just wanna show words or text, that's a text view. A box where you can type in text, that's an edit text. These four little squares here, these are what's called a card view. We'll get into that much later. This little heart here is a toggle button. It's got a state associated with it. Either it's on or it's off and the picture's different. And then the play button here, that's just a generic button. All of these things are classes in Java that you will instantiate and manipulate to get the things to look the way you want on the screen. And as I mentioned, there are lots of different prepackaged widgets for you. These things are spinners, like you wanna flick up and down. There's a switch over here that's got a state that toggles back and forth on and off. You may have seen pop-ups like this that kinda show up on the screen, temporarily and then go away. These are called toasts in Android. And then also, if you have an Android phone, you've probably seen this button that just kind of appears down at the bottom of a screen that's hooked into some critical function. That's called the floating action button. All these things are widgets that you can kind of pull in and use in your system. And we will start out in your first chapters of your book using the most basic ones, which are text views, buttons, and edit texts. Start small and then grow. So just a reminder, taking a step back, a screen in an app corresponds to an activity. Activities are created by defining a Java class and an accompanying XML file. Activities contain views or widgets. These views or widgets are defined and arranged in the XML file. The Java class holds the logic to deal with button presses and selections and things like that. So the XML file sets the stage, but then the Java is gonna be responsible for reacting to user interactions. And then after the Java file deals with the user interaction, it's gonna update those views programmatically from within the code. All right, this again, a little bit to digest. I'm gonna recommend maybe at this point, you probably, you know, if this isn't making sense, go out to your labs, do the labs, and then come back and let this sink in. All right, there's another type of view or that we care about, another category, aside from widgets, which are view groups or layouts. So a view group is the way that you're going to arrange and order the widgets on the screen. By default, if you just put stuff on there, Android will probably just put them from top to bottom against the left-hand side of the screen, and they won't look pretty like this. If you wanna get things arranged and prettified relative to one another, you need to use a thing called layouts or view groups. Okay, so a view is something the user can see, a widget. A view group is an invisible container that defines the layout structure, okay? So for example, right, in chapter two, you're gonna start working on an app that they call the beer advisor, right? And you can see here, we got a couple of different widgets on the screen. This is a picker or a spinner. These are two buttons. This is text view. This is a text view. But they're arranged a little bit. They're not terribly pretty yet, and that's okay. We're mostly working on just the basics. But they do have an arrangement. And you will be introduced to the designer in Android Studio, which is a graphical way of placing things. And this is the blueprint view from the designer. And these rectangles that are kind of around the different widgets, those are the view groups or the layouts. And they're being used to arrange things, right? So these things are actually arranged vertically. We've got the spinner here. And then we have another group. We have a group here of these two buttons that are arranged horizontally. But this group is embedded in the bigger thing, okay? So button, a group containing two buttons, a text view, and then a text view, okay? So you'll get into it, don't worry. The layout I'm gonna bring myself back now, since I know you miss me so badly. The layout that your book goes through from the start is called the linear layout. Now way back when your book was first published, the linear layout was the default layout that Android Studio set all layouts to. Now Android Studio will set the default layout to be something called a constraint layout. We are not there yet to constraint layout. So the first thing you're gonna do during your labs is you're gonna change the layout from any of any new activity you create from being a linear layout, excuse me, from being a constraint layout to being a linear layout. Linear layouts are a bit easier to think about, okay? The linear layouts orient their views that are inside of them, either horizontally or vertically. Easy peasy, right? They're either in a row or they're in a column. But you can nest them. This one, for example, has a vertical column, but inside of it is embedded a horizontal linear layout, okay? Super simple, follow the instructions in the lab. Change things to linear layout, follow the instructions in the lab to kind of get a feel for what's going on. In chapter six, we're gonna move to the more modern constraint layout, where instead of just having things in a row or a stack, the position of everything on the screen is made relative to one another. That's handy for a variety of reasons. We will get into it later for now. Stick to the simpler linear layout. Okay, so some terminology. Let's go over some jargon. These are things that you will see and hear when discussing layouts and when discussing styling of these layouts in your layout XML file. Those concepts are borders, margins, and padding, okay? If you've come from HTML and CSS, web development land, you are familiar with these terms. They are the same thing, okay? So first of all, the content of a widget, right? We're speaking predominantly about widgets here. The content of the widget is the thing that is shown. Text, the button kind of shape and color and picture. That's the content, okay? The content of the thing. The border is the edge of your view element, okay? So if you were to look at this in the blueprint view, this is the border. It does not exactly correspond with the content, okay? For example, buttons have a little bit of space around whatever the word is and the actual visible border. You may see the border on the screen. You may not see the border on the screen. In any case, all views occupy a rectangular space on the screen. The edge of that rectangular space is the border, okay? The margin. The margin is the space between borders of widgets. These two widgets have no margin between them. This widget has a pretty large margin between its right edge and the right edge of the screen. And this guy has a top margin from between itself and this view group up here, okay? So margin, spaces around the borders, spaces between the borders of elements. Padding is the space. These are all just terminology, things you're gonna become familiar with and you need to know the difference between, okay? Padding is the space between a border of an element and its content, okay? So you wanna have the borders really far away on your button from the content. You trigger the padding. You want the buttons far away from one another. You mess with the margins, all right? That's how, that's what you're going to do. So come back to the slide if you find yourself getting confused about borders and margins and padding, et cetera, et cetera, et cetera. So let me talk for a minute about the layout file in Android Studio. You're gonna get familiar with these and comfortable with these because this controls the basic styling of the elements on your screen, okay? So remember, every activity has an associated layout XML file. Now the layout is specified in XML. So I wanna make sure that you're clear on your XML jargon. When you see XML, the things are gonna be inside of these angle brackets, right? So look for the angle brackets, an open bracket and a closing bracket. Sometimes it's gonna have this forward slash at the end of it, okay? Just depends on a variety of things. This thing is called your element or your tag. This is a whole unit, right? It's a whole unit, an angle bracket with a closing angle bracket. These, this is the element, text view. Sometimes it's called a tag, but this is an element. This is going to map to a Java class, right? There's a Java text view widget, okay? These things in here are attributes. Think of them, if we're thinking of text view as a Java class, think of these things as the properties or fields or class variables, right? So the text view layout width variable, the layout height variable, the text variable. The values on the right hand side of these assignments are the variable values that you would put in the Java class, okay? And that is in fact exactly what is happening. Android is going into this XML file and converting this XML into a concrete Java class. And I mentioned earlier why Android does this because GUI code stinks in Java, it stinks in general. And so Android is going to read this XML file for you and create a bunch of Java objects that you want to see on your screen. That's what's happening. It's just easier to specify them in XML than to specify them in Java, okay? All right, so another thing to keep in mind, XML tags in your layout files are nested to create a hierarchy of views. Hierarchy of views, remember, that screen that you see is a hierarchy of Java views, of elements, of widgets and view groups and all sorts of good things. So the root tag, the root of every single layout in the XML file is going to be some sort of layout. It will be linear layout in the beginning here when you're working through the first few chapters. So the screen around its border is defined by a linear layout and then you've got things inside of it. Note that this linear layout, it's got an open tag and then a closing bracket, but there's no little slash here. That's because down here at the end, we've got our closing tag. And what this is saying is that there's a linear layout, but inside of it are these text views, this text view and this button view, okay? So you can nest things. Now you can only nest inside of layouts, inside of view groups. You cannot nest inside of widgets. That doesn't work, these two guys are widgets, right? Also, the order of these elements matters. Right here, we've got the text view appearing before the button. If you swap these around and move the button up here, the button is going to appear before the text view, okay? So order of elements matters, nesting of elements matters. You will get exposure to this and you will get practice with this as you get into your lab, okay? So final thing that I wanna cover today is like, all right, you've got your very basic activity composed. You've got some buttons on the screen, you've got some text on the screen. What is happening when a user clicks on stuff, okay? When they click on stuff, you have to find this layout file that puts stuff on the screen and it draws it for you and great. When the user clicks on something, say this button called find beer, this example is taken directly from your book. What happens is an event fires off and in the XML file, you will define something called on button clicked. This button gets clicked and it triggers this method inside your Java class. The Java, so this Java class gets fired when the user taps the button, or excuse me, this Java method gets fired when you press the Java button. You're gonna find that names matter, right? So this name on click find beer will also appear in your layout XML file, okay? Names matter, capitalization is extremely important. Okay, so this on click find beer method fires and then it does some stuff. It pulls out, you will find this used over and over. I'm not gonna go into what these things do right now. You'll get explained in the module. Find view, this code fires. It does some processing, does a variety of stuff, does whatever you need it to do. And then importantly, at the end, this Java code winds up updating the view, okay? So you will call a Java method in here and it will dynamically, magically update what the user sees on the screen, okay? So this is the event comes in, you process it in the code and then you respond by updating the view, okay? This is the pattern of event-driven programming. This is the way you need to think. When you get into your Java code and you're writing Java code, it's not executing top to bottom. The different methods that you will specify in your Java code get triggered or fired off by events in the user interface, okay? That's what's gonna happen. So think of each method that you're writing inside your Java code as something that is gonna be triggered independently. All right, the magic of find view by ID. You are gonna see this method many, many, many times. What does it do? Well, in your XML view definition, in your XML layout file, your views will most often have an ID, right? They're gonna have an ID attribute with a value, okay? This find view by ID method or function call, this r.id.brands is gonna correspond, whatever value you put here is gonna correspond to this element here in the XML file. What this function call does is it returns the widget, the Java class, a text view that is associated with this ID, okay? So this method, if all this is confusing, go through your lab first and then come back and grok this again. This magic function, find view by ID, is the glue. It's the map, it's the dictionary, it's the phone book for getting the Java object, the Java widget you wanna change and manipulate and do stuff with that you have defined in the XML file, okay? And the index, the name, the lookup value, the key is this ID right here, okay? So this function call, find view by ID gets the Java object that you want to manipulate, the Java version of the widget that you specified in the XML file, okay? So you'll see this thing over and over and over again. So last slide, right? When users are using your app and clicking on activities, when they click on something, they are interacting with the view that you specify in the XML file, in the layout file, you will then handle that interaction in the Java class through special methods and in some cases, some handlers, which you will see what those are. And then you are gonna update the view from your Java code to reflect the result of the computation, the result of the interaction, whatever happened, okay? So read up, I've got a link here to the official Android documentation, read up, really try and understand this event process response pattern. You need to understand the relationship between the layout file and the activity Java file. And you need to understand how the views are kind of shared between these two things, all right? That's it for me. Take a look at your labs for the day. Hit me up if you have any questions. It's a lot of work, slog through it and good luck with everything.