 Okay, we're ready to get started and you can still barely hear the mic, but as those of you who already know, we know I'm a really loud person, so that's not going to be a very big issue at all. So, I'm assuming you all are here for the introductory Android course, if not, sorry, not much I can think of about that there. I'm going to be running the course on that in Santos, that my dashing partner over here is Josh Bueno. And we're going to show you, and today's course is going to focus, today's workshop is going to focus mostly on designing UI layouts for Android devices. Now, if you guys all installed Anchored Studio, Josh, the majority of you have, right away hasn't, raise your hand down and go over that stuff. Good, you have it. And what kind of computer are you running on? I actually hear it now, but I don't know. Oh, okay, that's close enough. Okay, so I don't think we're actually going to be making this anymore. Okay. Unless you want to continue, unless you want to keep staying with us. I'm good with that. All right, so if we're going to make it, I'd say that for today, let's design this layout. Unfortunately, you don't have the picture, so it's not, so I'm going to end up taking out the picture. It's just a little bit, oh, that's not fine, then just put it up there. And pictures are a little bit awkward, so we've probably been about half hour actually debugging it, debugging the picture a little. So we're going to skip that for now. I'll explain what exactly that is and how it works. But you're going to have pretty much everything from, which I'm going to add everything from the little copy cup to the lower. So when you write an Android layout, you're going to be writing in something called XML. XML is called the extensible market language. Now, has any of you ever made a website or anything like that before? Have any of you ever used any kind of market language at all? Similar concept. You declare tags, declare parameters within those tags, and that defines how the object that you create with those tags is going to appear on your screen. Now, the extensible market language looks very similarly, except in that all the objects in there are different for you. You just shape and mold the object at the same. This is what a simple block of XML text looks like. Notice how we have up here the top, this is the text view example. The most important things that you need to know right now out of this slide is that we have an opening, an opening tag up here which declares what kind of object and view it's going to look like, it's going to be, and the closing tag down here. Anything within those is going to define the parameters of that text view object. And when you put a text view, sorry question? Hold it. So whenever you put any kind of item on the screen, it's just going to appear in the upper left hand corner. That's because that's how when you define any kind of object in a layout for Android, that's where it's initially set to. In order to decide how the object wants to, how you want the object to look on screen, you have to define it in a couple of, in layouts. Go ahead. So there are two main layouts that we'll be focusing on during this, because those are the most commonly used layouts throughout the entire Android ecosystem. That's a relative layout and a linear layout. A linear layout sets up all the objects in a linear fashion based upon the orientation that you want. I.e. a horizontal one, in which case any objects you have on screen will fill up the screen from left to right, and a vertical one, which they'll fill up from top to bottom. The order is determined by the order of which you declare the views inside your X and L docking. So if I have a button that is declared in the order of my X and L docking button, one, two, three in that order, in a horizontal text view we'll display as one, two, and three. In a vertical one it'll display as one, two, and three. The three being on the bottom, the three being on the bottom. Now notice in this tag here I have two layout parameters defined here. And within the quotations I have rat content. What those layouts define for the layout is how large the layout will look both height and width-wise. Rat content means that these will dynamically size based upon what views you have inside of that. So when I have it set for rat content I can add as many views to that as I want within the screen size parameters. And it'll resize those so that they fit in the screen parameter. And so that way, depending on how I declare them, you can set them up so they can even be in space as well. Now the orientation here, as I mentioned earlier, is determined when you want to do things vertically. You want all of your views to be vertical or horizontal inside of a linear layout. In this case I have to declare vertically. So anything I declare within this layout is going to be stacked up vertically. Go ahead. Now a relative layout is a little bit different because it gives you a lot more flexibility about where you're going to put things. So in this example here I have a relative layout and I have a couple of objects to declare underneath it. In a relative layout everything is spaced out based upon the relative locations of the edges of the screen and the relative location of every view in relation to each other view on the device. So in this case I have a text view and a button both declared in a relative layout. Also, they're wrapping the content. So this layout will also dynamically decide the resize based upon which view I have installed. So this text view here, I've declared a layout center independent. Now I'm assuming you've all looked at some kind of hierarchy which gives you a parent child structure before. Same idea in an XML. In this case, relative layout is the parent of the text view and the button. So with that parameter being declared there, it's going to put the button in the center of the display. I've also declared a label for an identification for this text view. I'll go further into how identification works and what it's used for later on. But for now we just need to know that it's going to be a reference later on when I declare my button. In this case I want my text view to be in the center of the screen and my button to be directed below. So in this case my button is going to go below my text view which I have declared as label. So I'm referencing that label here. Now if you notice these are two different lines when I declare the labels. This symbol here at plus ID means that this is being declared as a new reference. This at ID means that I'm referencing that already declared reference. It's the same structure as with a lot of languages where if you don't declare something before you can't really access it later. It's kind of difficult to access something that doesn't exist yet. I did miss one thing though in this demonstration. If I were to build this added set right now, for example, I wish I had some markers. But anyway, I would have a button. We'll just use this right now. Not cool. You can hit the light here or set that. Now in order to declare this as it currently sits, we're looking for a situation where we have our whole screen like this and we want our button in the middle, sorry, text view in the middle. We want our button below. This isn't how it works though because I left the parameter out. In this case the button in relation to where, in relation to the parent, this is centered in the entire parent. But this button is intended to be centered horizontally. I did not declare that here. I did not declare that it's going to be below the label. So the actual location of the button in relation to the label will be over here. Can you tell me anything about that? Is the first available position above the text? What's that? Is the first available position above the text? Exactly. And again, as the layout fills up, it will all fill from left to right. So in this situation since I didn't declare the center horizontal, which I'll show later on, this button will only appear directly below text on the far left extreme of the display. In order to get it centered, I'll have to make that declaration later. So we're only going to go over a few types of views that you can put in there. The major four that we'll need for our app. And we're not going to be using one, so it'll be possible to plan something like that. But anyway, text view. Text view is what can be used to display and format any kind of text on your display in a location that you define. There's a bunch of things that can be defined for. Same thing, same as before, the layout height, the width and layout height, these are extremely important. Without the ease, your app has no idea how to make these layouts actually work. They have such high importance inside of the layout that it won't even let you render the layout unless these are declared and have some form of argument to them. Most of the time, Andrew's dude is pretty friendly about that and will declare the layout width and layout height for you, but you need to define what kind of argument you want. There can be a couple of arguments in here. Wrap content is the most common one because you only want it to fit the objects that aren't there. You can also have fill parent, which in that case is going to take whatever layout is above it and it's going to fill it up entirely. Say you want a really big button on your screen. You can declare the button to have a layout width and height of fill parent and the button will fill up the entire display regarding padding on the layout that we're not going to be able to do. Android text, fairly self-explanatory. So this text right here is going to simply say a quantity. That is going to be what is displayed. For the example, I declared it as such. This is actually bad practice though in Android apps when you want to demobilize your app. So if you want to go internationally with it, this should actually be a declaration with a reference to the strings.xml file because when you use the strings.xml file and you want to take your app international, in order to change the language, the user can simply choose in the setting to use a different strings.xml for a say, Spanish, French, Zimbabwean. Any language that you define in the strings.xml that you want to use. Text style and size. Text style may accept two arguments. That decides whether you can make the text bold or italic and text size is kind of a little bit different. This variable sp here is technically defined as size pixels, but it's only used specifically for text. So in order to keep this quick, I'm just going to simply say whenever you declare a text size, always make sure you have a integer value on that with sp afterwards. The one we need to focus on later on will be dp, which are density-dependent pixels that I can explore later on. Actually, no, right now. So the only other thing here is padding bottom. Now, you don't want things inside your layout simply stacking directly on top of each other, or else it's going to be extremely difficult to choose the right layout that you want to select as the user. So if you have four buttons that are directly next to each other, it's going to be kind of difficult to hit a button without hitting two or three other buttons. So in order to do that, we declare paddings around buttons or text configuration like that. And this is the minimum number of density-dependent pixels that will be displayed between any other view nearby this object. Now, for density-dependent displays, density-independent pixels bring points back down. It's an awkward concept. It starts back from way when devices had low resolution displays and higher resolution displays started to come about. And it's left in for the sake of compatibility with the Android apps. So I have three different displays here. I have a 240x320 display. I have a 1920x1080 display. And what is the percentage difference? 24x2x144? Whatever, we're older than anyone. So as display resolution is increased, the pixel density on the screen is also increased. So if I were to declare something with just instead of density-independent pixels, just pixels, it would show up, say instead I've got 9. If I declare 9 pixels, this button would take up this whole large section of the screen. But on a device that's heat that has a higher resolution like this, it would only take up a section this big. And at an even higher resolution, it would only take up a section that's this big. It'd be really difficult to hit that button on the screen. So we choose a density-independent pixel. Actually, this is kind of a poor representation of the size here. But it'll default to what it'll look like on the lowest density display, and instead maps that over to the large density display so that we can get a more consistent view across all the different devices. Image view. The coffee cup we had at the beginning of the act was an example of an image view. Using it, you can add different images into your Android app via the drawable folder, which is automatically created when you make a new project in Android Studio. So the image view is pretty straightforward. Generally, with images, since you don't, unless you design the image yourself and you go exactly to the size that it's going to be, you want to declare it as a wrap content, just so that way in the event you're in a string that's larger or smaller, you can change that later on once you find that out. The important part, though, is this source parameter here, which is going to define what the image is going to be, where and what the image is going to be. In this case, it's going to be actDrawable slash image. ActDrawable is the folder that the image is stored inside. And in order to store that, you need a bunch of different resolutions based on pixels. When I built the app, I simply just put the same ones in there because I only built it for one Android device, mine, and I didn't really care about the rest. But as an act developer, you need to pay attention to what kind, to what resolution of the different devices that you're fine telling to use it, and you'll have to pay attention to that. Buttons. Buttons are very straightforward. What's a button do? You click on it, right? That's it. That's all you need for it. So there's one extra parameter that I'll get to later because it's actually not just a button-independent parameter. It's a parameter that can be applied to any layout. But for now, I simply have the button set to Wrap Content. Now, if I were to set this button up right now, it wouldn't show anything. Generally, if I have a Wrap Content display on that, I would declare a text for the button and have it wrap around the text for the button, which will show you when we build our very basic layout here today. Now, this is about where we're going to get to today, where we're going to start declaring ways you can add functionality. In this case, we're going to be using what's known as the on-click parameter. So when you declare your view, it won't do anything when it's touched by a user, and it'll just kind of sit there, a button turns suddenly more gray, and then it'll kind of, when you'll test it, they'll be annoyed by why something doesn't work. So when you declare the on-click parameter, you're now setting the view, the layout XML, to look inside the Java file that's attached to that in order to find a method that is named the same as the on-click parameter in order to actually keep whenever that button is clicked. That's yourself. So we're done with this one. So with these basic views, we're going to actually start making our own Android app. So we're going to get right into it, and we're going to make a new project. We'll make our new project here. Okay, so I'm going to leave the main project that we have going on open so I can take you through all the stuff that you're going to need in order to go through that. I'm going to walk you through, does anybody here, has anybody here ever made a new project in Android Studio? Okay, so then we're going to walk through the basics of making a new project. Once you're going to file a new Android project, you're going to present it with this menu, which will ask you what you want to make your app. In this case, we're going to call the app JustJob because it's also going to do an order copy. And that was the point for that. Do you understand? For those of you... This already came up once. For running any Android device that has any... that has a version of Android, jelly beam or the load, those are currently being phased out, and they only take out 15% of the market. So most of them, almost 90% of the time, you're now going to see an example where they want you to run the app. So the minimum SDK will be looked upon as 4.4, because that's currently to date the most stable version of Android. But we also find out what not what will be stable. Personally, I hope it doesn't do stable. But any app that has a version of Android that's below that will not run this app. And now we're presented with the activity wizard. This will set up... When you choose one of these activities, it will set up the very basic job that you can and the very basic layout that you need to get most of the activity working. You just need to design any extra material that you want yourself in there. So for our case and our activity, we're going to choose an empty activity. So we're going to build the entire layout from scratch on this. And now you can name the activity at whatever you want. This is just a general part of the activity of the activity wizard. Since this is the first activity, you can name it main activity if you want. You can name it creative and call it main activity. So that's how I believe in mind. You can name it whatever you want. But notice how afterwards you can choose whether or not you want to generate a layout file. If you're making an activity that doesn't really need a layout file, an activity that's much bigger for something, for some sort of function within the app, then you won't need to generate a layout file. We won't have to worry about that. So we are going to generate a layout file. And this is going to be the name of activity on the score main. This is where we're going to be working throughout this workshop. This is where we're going to generate all of our accidental code. So if you click finish down here, then in the month that you can't see, we'll have our new project being made. Then depending on the computer, it will take a while. Mine will probably take a minute or so because I'm running on dinosaur technology. What's different between a blank activity and an empty activity? The difference between a blank activity and an empty activity is that blank activity, when it initially comes about, it'll have a menu. It'll have an action bar. And now we decided to add in a floating button, which I don't really like the idea of having a floating button. It's not all actually the floating button. But that's to get you started in the event that you want to start input layouts. I say the layout is more geared towards IAM applications, email applications, text messaging applications, things like that. As you saw, there were a bunch of different activities that we could put in. So notice how all these different activities are already predefined for us. It really depends on what you want to get out of your app. In our case, since our app isn't going to have any kind of chatting capabilities, we don't need the large circular button here for the plus, unless we want to add some functionality to it and unfortunately, functionality for the floating button is a little bit obfuscated right now. And we could add a menu in later, but I can also show you how to add a very simple toolbar into the empty activity. So in my opinion for this, the empty activity is a lot better to start with because it shows you what goes on behind the scenes when you start building the activity, start building the layout instead of over one. But the other one that I would probably say that you might have questions about is the full-screen activity, where basically instead of having an action bar and a back button like it's shown there, it's going to hide all of that and it's also going to hide the status bar and the nav bar. These activities, the rest of these activities here do not hide the nav bar or the status bar. So this is great for after you want to show a video where you want to play a game or something like that or in the case of an app that I have already, you want to track your users so they can't break anything inside the tablet. So that's basically a full-screen activity. Again, we're going to stick to an empty activity for ease of use sake. Full question, though. Okay, so if you open up your activity main.xml, you'll be greeted with a very fancy version of Hello World that is written for you, thus cheating every single tradition of this up to this date by writing the Hello World formula instead of having you write it yourself. So as you can see in this XML file, we have a relative layout here which is what we're going to base all of our extra XML off. It's a very simple text view which simply says, Hello World with a Radic Contact. So what we're going to do here is we're going to start with is we're going to change that relative layout into a linear layout because everything inside of our JustJava app, if you look at the preview of the app over here, you'll notice everything in this app is aligned in a nice straight row in the center of the screen. That's really nice. I like that a lot. So in order to build this layout, I have a linear layout which is going to define how a bunch of different layouts I have in here are going to require a setup. Underneath that, within this first setup here, you can see I have a relative layout declared. That lets me set up the image of the text view. I'm just going to glance over this initial setup. We're all going to be building this setup. It shouldn't take much compared to all at all. But I'm going to go over a quick explanation that we're actually going to build. So I have a relative layout declared here where I have the reference to the image text and the, actually both text options. One text option. Now if you notice here, I have the layout with a set match pair. This works out to my advantage in the linear layout because now I can declare all of these items to be centered horizontally and they'll be centered inside the entire app because the parent is just as wide as the app display itself. So when I declare that the relative layout is supposed to be as wide as that display, I can send it out to be any object that will be centered horizontally and as a result it will be centered in the entire display. Notice how these are nested as well. So anything inside of your layout can be nested within a different layout. So at this point here, this is the fun one. So I have a relative layout here, which holds my text view. With a linear layout inside of it that holds all my buttons and my increment text view. With another linear layout below that with all my checkboxes, don't worry about the fact that we didn't go over checkboxes. It's pretty much the exact same idea as a button. It's just they're slightly changing the job or the main course in order to turn it off. And underneath that I declare both of my text views for the price, total, and then I have a relative layout down here for both of the buttons. It's a lot of stops, everybody agree with me? It's quite a lot of work in order to make something like this. Thankfully, XML makes it pretty simple. Okay, my partner in crime has suggested that we go over a little bit on how to navigate the environment. I'm assuming pretty much all of you are familiar with XML, correct? It's got a slightly similar layout to that except for this huge thing over here which I'm assuming you won't figure out at this point is where you can see that, where you can see what your app looks like in purple. That's called the preview pane. Everything that you need to access within Android Studio can be accessed from these sidebars here. You can click on the project header there. This will show you all the files So, inside the app here, I have a couple of things that I've declared. I have my implementation, my interface, my main activity, my order activity, those are all different activities that are going to be triggered based on what I'm doing within the code. I don't know why I have to do that, but that's okay. And from what I said earlier, with the copy picture here, this is the drawable folder where the source of my Java picture has actually shown quite nicely here in this source declaration here. That's where it pulls my Java picture from so you can see that on all the apps. Notice how in here, they're all declared as Java.pane and this is at drawable slash Java. This doesn't actually need the extension in order to define what you're spending. Yeah, so like, your name or device like what is DPI on it? Does it have to select intelligently one of those systems? Yes, because each DPI here has a reference to a certain device set up that is predefined. Okay. So a good question. I do not have an answer to what those exactly are. I do know for a fact, though, that 1920 by 1080 is under the access to HDPI. So I would assume that 1250 by 720 is actually HDPI. HDPI might be... It's a good sense. I think that was a good answer. Sorry, it's a good idea for resolution. That might be an answer. 980p is HDPI. LDPI, if I'm not mistaken, is 320 by 480 and LDPI is 240 by 320. So when I built this app, I used a Nexus 5. So I have a 1920 by 1080 display, so I use an access HDPI image. It's easier to scale the image down from a higher resolution to a lower resolution than it is to take the higher resolution image and try and scale it up. Sorry, let's take the lower resolution image and try and scale it up to the higher resolution. So that's definitely the better option when you're designing any kind of image for an app to go as high as you can to find the resolution and then scale it down. Okay, so now we're actually going to get started... Oh, no, we're still going through this thing, aren't we? We're still going through the layout. Okay, a couple of important things that I probably should go over on here. So first I'll explain to you the story about the majority of this stuff here. This is your little tab section here, so you can open up multiple files and you can swap between them. It's your preview pane. This is your bottom line. So down here is where we get some very interesting things. These are where your consoles live. Very important. So we're going to do, at different points during this workshop, we're going to be doing logging inside the app. This Android monitor right here, if you have... whether you have an Android device or you have an actual device connected to it, this is where you're going to see all of your logged information. So if you just click on the button and all you want to do is say, I've been clicked. This is where you're going to see if that actually happens on the Android device. Nothing's going to pop up on the Android device to say that I've been clicked. Over here, this blank console is my Gradle console. If you shift that... So if you see here, this is where you check on the build status of your app. I'm not saying there's no red stuff anywhere, so it should build. There you go. This is where you'll find any errors that are required within the building of the app. Tell you how long it takes to build the app and what kind of libraries are required to build the app. If there's any actual issues with building the app itself, this is where it will tell you what the problem could be underneath the messages header. Messages. At the office. So this will tell you this is very similar to the Gradle console, but let's see. Okay, so it's going to build. It's going to tell me that it's broken. The Gradle console only tells me it's broken. It doesn't tell me what's broken. Now the messages, it tells me exactly what could be wrong with it in the file. The line, though... I don't think they put that in just yet. So if your main activity is 600 lines along the grid, how about that? Also, similar to how you put the setup, the app check and your studio checks your syntax as it goes. So if you get something here or there, it'll leave a message and write a line on the side here. The yellow lines represent the references that you haven't used yet. And the green lines are recently resolved issues. Okay, I think we're going to start actually building this. So we're going to get started. But we're going to actually start building this. Okay, so back inside of our app here, the first thing we had was we had a linear layout on our display. So we're going to take this relative layout up at the top here, and we're going to turn it into a linear layout. Notice how both the opening and the closing tag have changed as you turn that linear layout. It saves you a lot of time when you started nesting different layouts and you decided you want to change it and want to use something else. So instead of having to hunt for both the opening and the closing tag, now you just have to find the opening or the closing tag that's working both forward and reverse. And we're going to take this text view. So we're just going to get rid of this text view because we don't need it. Also for a linear layout, we don't have an orientation defined. Generally by default a linear layout puts things in but because we're going to be nesting a bunch of things, it'd be better if we declare which direction of the linear layout that I know. So can anybody tell me what we're going to declare on that? The orientation of the public linear layout. So one thing I didn't forget to mention. Notice how before I did the orientation I had to call the Android. That is a variable that defines which SDK we're going to be using to actually define the parameter. Different SDKs have different parameters for the views of them. Generally, this is the SDK that will be used. skimasandroid.com There's no real reason to change that unless you use a view that requires hand compatibility. But that'll come up later on when we need to do more complicated things. So for the next part of our layout, now we're going to build in this case we actually don't need this relative layout because we're just going to have a text. So now we need our relative layout to hold our top part here. And by the way, that rendering problems window is going to be the most annoying thing you're going to see throughout your entire kind of building your eyes because in a lot of cases the Android experience is very complicated and we should actually find the SDKs to be. So sometimes in those environments it's not going to be good so you're going to need to do a lot of work. But anyway so we want this text to be centered in our display. So in order to do that we're going to make a relative layout nested inside our linear layout and we're going to throw it so that way it's centered horizontally. Again, it won't be down here where it's going to be more up here to do an application. So in order to do that what kind of view am I going to get to there? I can't hear you relative layout. Yes, we are going to have a relative layout so we're going to declare our own relative layout. I mentioned guys, if anybody goes out having some trouble if you're trying to get my relative layout and linear layout to play nicely that's because when I declared my relative layout of nested in here I forgot this little carrot symbol here. This little carrot symbol means that I have finished defining the parameters for my relative layout itself. Without that carrot symbol there I won't be able to declare any other views within this relative layout and this tag, closing tag here will actually reference itself to the main closing tag of the carrot. What's the difference between the linear layout and the relative layout? A linear layout will stack things up based upon their declaration inside it. A relative layout lets me declare where I want things based upon the relative location of the edge of this link and any other views that are on this link. Any other questions? From here we want to put in a text object that just says job. In this case, does anybody remember how I declared an object that has a view that has text in it? Create a text object? Yes. A text object inside of an XML document is called a text view. Again we're going to declare our text view we're going to declare we're going to declare it with the height which in this case is going to wrap content because we don't actually know how big Java is. We know it's four letters long we don't know how big the piano display is. So from there we're going to set the text of the text using the text parameter. And as you can see as I update this text parameter here on the little previous screen it updates my text very tiny in the corner there. Does everybody have their preview with kind of simple in mind? If not, raise your hand and we'll help you out. I hear a lot of typing so I think I'll let you guys go over it. Unless somebody doesn't have anything like that I'm going to assume that you guys are all set since nobody really raised their hand. Okay, so now this thing is really small. It's going to be really annoying to read every time. And it's supposed to be the title of our app. It's pretty pathetic with the title. So we're going to take that and make it bigger. So in order to do that we're going to modify it besides the parameter. And so how big should that make this? Unfortunately the parameter is huge. What's that? Got it. No, it's too big. Yes, thank you. There we go. $2,000 more. No, it's still too big. So I'm going to make it more bodice size. Let's say 100 of it perfectly. But the other problem is like we said we wanted this centered in our display. So I need to declare a parameter that will let me do that. In which case that has to do with our relative layout. So in this case nested within a relative layout I can declare its layout like this. But I've got a problem. If anybody can tell me what the problem is I'm really thankful. It's centered inside the relative layout but it's still on the left side. Can anybody know what the question is? What is the SP&N with your text size? That is a text specific pixel size. Okay. Tell me what's wrong with it. Yeah. In the case of this we want to set the relative layout. The text alignment will only give it its alignment based upon a relative object. The relative view. Where? You said the right idea with the wrong location. Is it centered in the relative layout? It is centered in the relative layout. Is it that the relative layout is not put in the line? Yes. Yes. Both of those ideas are pretty much exactly what I'm going for. Now in my relative layout if you look closely I declare that the width is to be wrapped content. Which means the width is only going to be as big as this Java object. So yes, it is centered inside of the relative layout but it's not centered in the display. So in order to do in order to center inside of the display I have to set the width of the relative layout to fill the parent view which will fill the display. So instead if you replace the wrapped content with the fill parent can we just make everything bigger if I apologize? What's that? Can we just make everything bigger? That's pretty much kind of how it works. It's not being up the first time just to make it bigger. I mean we have to help people the blind people with their accessibility issues. What's the difference between much parent and big parent? What's that? What's parent on big parent? Fill parent is deprecated parent. Match parent is currently 7th standard. And they just pulled that out like a month ago so it's still running. Fill parent. So there we go. So yes. It's just that they're going through a transitional period. There's not really a point There's no real point where they stop training. OK, that's really pretty far over. OK, so next up, we're going to move on to our next objects inside the layout, which are going to be this setup, all down here, where we're going to show the quantity of the copies that we've ordered. We're going to put them on the bottom of the text view. Set of checkboxes, our price, and our last two boxes. Any problems? Does anybody not have anything that looks like my app out there? Is there anything homeless and lost? My street? No, no, no. I just found this on my chest here. And would you do it to the height of the post-bill? Go ahead. This is a little bigger than your set. OK, so what we're going to talk about is everybody's seeing this now. We're going to let you use your mobile problem. Capitalized extension. It's important to see it. It's kind of weird to accept that. I didn't think anything weird to do about it. But dad, it's good. There was an interesting point brought up. Now if you look closely when I click on this relative layout, I'm going to set it to match the pairing in both cases. If you notice the blue box on my screen does not fill up the entire display. That is my design to prevent things from going from becoming too close to when there's a change on the device. That is defined up here when we initially set up our relative layout. There's padding on all four sides of the device to prevent you from placing any object within that range. You can make it smaller if you need to, but the fault is 16 density and it takes us on all sides. So something will not fill up to the point where you can touch the napalm where it's on the sides unless you say so. Okay, I think everyone's just about on the same page, so I think we're going to move on to the next step. We're going to declare a second relative layout below that outside of the relative layout we just had, but as you can see on my screen here. So I'm being told that we're actually slowly running out of time for this, so we're going to skip the quantity and then really go straight to the incrementor setup. Now that we have this relative layout declared, we're going to declare another linear layout inside of this that is going to have the horizontal orientation. So when you're done declaring your linear layout it should look something like mine on the screen here. But you won't see anything in the preview because you're not getting anything. And then inside of that linear layout we're going to declare three things. In this order, a button, a text view, and a second button. So for the buttons they're only going to be small square buttons, so the width and the height in this case for the buttons are only going to be 48 density independent pixels. So they'll be declared just like this. How's it going everybody? May I have anything similar to what we've got going on here? There was one thing I forgot to mention. So when your buttons appear, and they all appear on the left side here, the linear layout itself, the entire layout will be centered horizontally inside of the relative layout that is nested with it. So we have a relative layout declaration here and our linear layout declaration here. Inside of the parameters you define the linear layout, the linear layout itself will be centered horizontally. So that means that no matter how many items I put in here, it'll shift them all dynamically, so this layout will be centered. In a linear layout itself, unless objects require objects to be spaced in a certain way, they'll keep them all next to each other and they'll try to keep them as centered as possible. I also think I'm going to declare a limit to match the parameters. Do I have any issues? Okay. Anybody else? Hey. Alright guys, we're going to wrap this up now. We're not going to go over anything new. Edwin and I will stay around for a couple of minutes just to help you guys out. Next up. So next week is going to be a little bit more interactive. Basically what's going to happen is if I find the time screen and I'm going to try to write a broken Android app. So what I'm going to do is I'm going to post that up on GitHub. The first like 20-25 minutes of the workshop will be me going over a few different key concepts in Android. Mostly switching between activities, switching views, saving data for system. And then so what you guys are going to do after I kind of introduce you guys to that, you're going to pull down this code from GitHub and then you're going to use your awesome Google food, Stack Overflow food skills to figure out not only what's wrong with this app but also fix it. So the first three teams that can fix it will receive Google's swag. So there's like some like little mechanical robot, socks probably. Yeah, so basically it's going to be a competition to see who can fix this Android app first and if you win, you will get cool Google stuff and there's like an 80% chance you're going to get pizza. So yeah, come by next time. Next week. Next week. Probably pizza. If not, there will be pizza. There will be pizza, yeah. Anyways, who needs help then? Who's still broken? Yeah, who's still broken? Thank you guys for talking about it. Thanks.