 Hey everybody, welcome to the sixth Android tutorial. Today we're going to be covering the list view. If you've never seen a list view, here's a picture of what one looks like. Chances are a lot of the applications you have on your phone are pretty much just a list view. So you can see how we have lions, tigers, monkeys, elephants, etc. etc. What it does is it actually takes a data source and displays it on the screen and lets the user interact with it. Now, list views can become very, very complex. You can put pictures, controls, all sorts of stuff in there. We're going to cover the bare basics because this is a big topic. We can't possibly cover this all in one video. So today is just the bare basics on how to work with a list view. Now, before we dive in, one thing you need to understand is the concept of an adapter. You'll have a data source, and this is your data, whether it's a cursor to a database item or, I shouldn't say item, but table, or an array list. So in this case, we're going to use an array of strings basically. So you'll have your data, and the adapter is the glue that updates the data onto the adapter view. That sounds complex. The adapter view is just the list view, the grid view, the spinner, etc. etc. So think of this as the control, this is your data, and the adapter is kind of the glue that tells everything what needs to happen and makes it flow smoothly. The reason for that, and let's go back to this, you know, football legends. There's tons and tons and tons of football legends, right? And you can see how it just kind of scrolls right off the screen here. Well, if you had all of those in memory, let's say you have a thousand football legends, that's going to take a lot of memory, which is going to chew up a lot of battery. So Android has a concept of object recycling. So even though you'll have a thousand football legends, only whatever is on the screen is actually in memory. The rest of it stays in the data source. So the adapter is smart enough to know, hey, you moved down or you moved up, grab this item or that item, depending on where you are. All right, so let's just dive right on in here. And we're going to start a new project. App 6. If you're clunking in the background, I'm doing my laundry. I got the door closed. I'm just hoping it's quiet enough. Ooh, that went full screen. Let's just bring you back down to normal size. There we go. Move this around just a hair. There we go. I hate it when it moves around on me because it's never like perfect. All right, so we're going to go to our layout here. And we're going to get rid of that obnoxious little hello world because I don't like it. Now if we switch to our text view, you see we're in a relative layout. We want to change that. And you see we have different types of layouts. Well, I want this linear layout vertical. So we're going to just drag and drop this here. You see how it just kind of positions it? We're going to go into the text here and kind of examine this thing. You see how it's just a linear layout, but it has orientation vertical. And then the rest of these properties are pretty much the same as what you got up here. So what we're going to do is we're going to copy this. And then we're going to grab this top one, this orientation, cut that out of there and go bam. That way we only have one layout. So we basically converted that relative to a linear and then took the orientation and made it vertical. So when you look, you don't have that annoying outline anymore. Now we're going to grab a couple of buttons and we're going to just drag and drop these. You notice how it's automatically put them vertically. And we're going to say call this button add, call that button remove. And then we're going to scroll down and we're going to look for an actual list view. We're going to drag and drop that. So now we've got add, remove and our list view. And let's call this LST items. And you notice how as soon as you give it an ID, boom, it starts populating with some just generic items. Those actually won't, well, I shouldn't say they won't, they shouldn't show up when we run this thing. But let's give this a good run and find out. Second to spin up here. And it's thinking. One of these days I'm going to get smart and I'm going to start the emulator before I start the tutorial. And it's still parsing it. It's usually slow the first time out. There we go. So we have our add, we never renamed that. And we have our add, remove and then our list is blank. But when you look in the actual editor, you see those little items. It's just for display, show you what it's going to look like. So let's go back in here and let's change this. There. Now we've got our add, remove buttons. Then we are just going to start typing some code here, man. All right. We're just going to declare our buttons. Whoopsie. My brain is just fried. I've been making a lot of stupid mistakes. The part was just not sleeping because I'm in this apartment, which I'm really not used to apartment living. And another part of it is I've been working a lot. Let's just make that like that. So we've got our two buttons, our list view. And now we want to make a array list. And this is templated. So we have to give it a string and we're going to call that list. That's actually our data source. And then we want to make our adapter and that's templated as well. All right. Now we want to make a few extra little functions here. Going to watch walking dead tonight. I'm so excited. All right. Let's see if anybody can spot the stupid mistake I just made. There we go. Like I said, I'm tired. It's been one of those weeks. All right. Now we can start flushing out the bulk of this thing. And through the magic of copy and paste here. Somebody messaged me and said, hey, Brian, I wanted you to know that people have been taking your videos and posting them up in their own channels as their own work, as if they were making these videos. It really doesn't bother me a whole lot because, well, all the videos really point back to my website and the Facebook community that we've built together. So as long as the information is getting out there, I really don't care that much. I'm sure they're probably making some money, but, you know, good for them. All right. So list items. So now we have our controls, our add, remove button, and our items, or should say our list view. What we want to do now is actually populate that array list. So we're going to say list equal new array list. And we got to give that a type here. And let's just say 20. Now if you're wondering why I'm using an array list instead of an array, it's just easier to work with. All right. So now we are populating our data source. Let's pop this back open so we can talk about this. So that's our data source right here, our array list. Now we're going to set the data source for this adapter and then set the adapter for the view. All right. So we're going to say. And it's smart enough to know exactly what we're trying to do here. So it populated some of that for me. We want to give it a reference to this. Now this is where it gets a little bit confusing. We have to tell it what type of list we want to display and how we want to display it. And this is where it gets admittedly very confusing, very fast. So we're going to say, oops, Android. Help if I could spell Android. So we're going to do Android, R for resource, layout. And then we're going to say simple. And you know how there is a ton of these. There's a ton of different ways to display. So we're going to do simple list item one. And what that does is just very simply one item. And we are going to say we want to display this as Android ID text one. So we're basically giving it a text view. We're saying display this item as a text view. It's not exactly how that works, but it's pretty close. Then we want to give it the actual data source, which is of course the list that we created. Now, if you start getting a bunch of errors, like if this array adapter has got a bunch of red squigglies under it, you just select it and then what is it? Press alt enter and it will automatically add it up into your import statements up here. And you may see me do that a couple of times. And I'll try to call that out when I actually do it. All right. So now we need to say LST items.setAdapter. And we want to give it the adapter that we just created. All right. Now things are about to get really interesting here. What we want to do is we want to actually know when the user clicks on this thing. But let's run this first just to make sure it's actually working. If you're wondering what that Samsung device is, I have my tablet plugged in. I'm charging it up. All right. So now we have our data being displayed. And you can see we have items 0 through 19. So we actually have the 20 items. Because remember, we created four int i equals 0 to 20. So, you know, there's 20 items right there. Buttons do absolutely nothing yet. We're going to fix that. So what we want to do is we want to make the buttons work, but we also want to be able to click on one of these and show it's called a toast, which is a little message that's going to pop up down here, which is going to just basically say what we just clicked on. So let's get that working. I hit my funny bone again, and that is just not cool. It was like totally not funny. Man, now my arms like tingling and stuff. All right. So we want the set on item click listener. Notice how there's a set on click listener, just like there is with the button. But we want on the set on item click listener. So we get when the individual items clicked, it'll flash that out for us. Notice how there's a lot of different properties there. It gets a little confusing, but really what you need to understand is you have your adapter view, which is the actual list view itself. And then you have the view, which is, you know, anything displayed on the screen is considered a view. And then you have the index in integer and I believe in long form as well. I can never remember if that's the same thing as this, but we don't really need it. So it doesn't really matter too much. So let's say string, let's call it item value, get item at position. There we go. And we want just i because that's the position that was clicked. Oh, what is this thing griping about now? Hmm. Cannot convert. Cannot cast long. What do you mean you can't convert? Oh, I have get item id. There we go. That was so confusing. All right. So now we just, we've got the item and we've converted it to, you know, an actual string. We want to just display that on this screen here. So we're going to use what's called a toast. And if you're wondering how I got all that, it just popped up and I can try to do that a little slower. I tend to type a little fast when I have autocomplete. So when you start typing toast, if you go down, you see how it says create a new toast. And if you just hit enter, boom, types all that out for you. So you don't have to mess with it. So toast wants to make text. So it's just going to display text on the screen. And main activity, which is what we're currently in main activity, it's getting a reference to the this object in main activity. So basically what we're currently in the text. And then we have a length, you know, the length short, and then show show actually displays it on the screen length. You have link short, length long. They're pretty self explanatory. We're going to change this to item value. And we're going to stop that emulator and run that again. Walking dead. Yeah, if anybody watches walking dead, they need to kill Carl. I cannot stand that kid. All right, let me move this up and make sure it gets captured in the video. So when I click on something, you'll see a toast pop up. See item two, I'll click on item three, click on item 10, item 10. So that's a toast. It just gives you a simple little notification you can display on the screen to the user. So now we can actually tell, you know, what items we're clicking on. So we're going to make those buttons work now. And we've worked with buttons many times. So, you know, I wasn't hungry until I started this video. And now my stomach is about to demonstrate the whale mating call. It makes that weird crazy noise. Now, this is pretty easy. And if you're kind of wondering why I put the array list and the array adapter up there, and this is why we want to be able to access them outside of this scope. So we're just going to make them part of the class itself. All right, so we want to say list add new item. Now, because we've changed the data source, we need to let the adapter know that the data source has changed. So we're going to say adapter, notify data set changed. And what that does is it kind of sets off a bit of a chain reaction here. So if we pull this up again, we're saying notify data set change. So it's going to go back to this data source, it's going to pull the data, quote unquote pull the data just bear with me here, it's going to say, Hey, what's changed. And then it's going to say to the adapter view, in this case, the list view, Hey, something changed, please do a complete update. And it's going to repaint that entire control to let it know that, Hey, items have changed. Now, that might not be entirely accurate, depending on which version of Android you have, it may not update the entire control, it may just update individual items within the control. But you'll see what's going on here in just a second. So we're going to go back to our code. And we want to basically say if, see, I'm used to working with C sharp. So length and size, the difference between the two always really jacks me up here. I'm used to doing length, but so if there's nothing in the list, we're just going to, you know, return right out of there. Then we're going to say, we're going to remove, and we say list, oops, that size minus one. So we're just going to remove the last item out of that list. And then we're going to adapter dot notify data set changed. That's really all we're going to do here. So the ad pretty much just adds a new one, notifies data set change, the remove says, Hey, is there anything to remove? If, if so, then we're going to remove the last item. And then we're going to notify the data set change. So let's actually just play around with this. Emulator up while it's loading here. There we go. All right, so we have 19 items. So we're just going to remove, we're going to click a bunch of times to remove. And you can see how boom, now we're just going to add pretty neat. So that in the nutcase is how to work with the list view and how to work with adapters. This gets much more complex. And in future tutorials, it may be the next tutorial. I'm not quite sure. I kind of want to keep them simple at first. We will actually make this more complex. The source code for this and all other tutorials is out on my website void realms.com. You just go here, and then you go to Android, and it'll be right down here. In case you're curious, this site's 100% funded by your donations. If you're a starving college, do not donate. Save your money. But if you're a programmer or a corporation or something, get your corporation to donate 10 bucks or something. It just helps keep the website up and running. Also, if you're still watching, be sure to join the void realms Facebook group. There's over 1000 programmers in there that are fluent in all walks of programming languages, hardware, you name it, they know it. I'm constantly asking questions in there. That's it.