 Hey everybody this is Brian welcome to the seventh Android tutorial. Last time we did the basic ListView and you can see in one of the graphics here you've got the that's very small but you've got a picture, let's see if I can blow that up a little bit, you got a picture with some text. We're gonna actually do that today because like I said ListViews can be very very complex. I'm hoping this will be a bit of a quick tutorial because I do have plans later but we're gonna see what happens here. So let's start a new Android project. Let's call this app 7 and we're just gonna leave the defaults on everything here. We're gonna make an empty activity and Android will calculate the sun moon and stars. Sometimes I honestly wonder what it's doing under the hood. I really should read up on that but anyway it's gonna do a quick gradle build. It's a lot bigger than it should be. We're just gonna move this around a little bit. The snap windows as they're called is kind of messing me up a little bit here. There we go. All right so we've got just our bare bones basic activity here. We're gonna get rid of this Hello World because well we're beyond Hello World at this point and we are going to go find ListView. There you are. I had to lean forward for that. I have this unnatural habit. I had Lasik a while ago, well over a year ago and I'm still used to wearing glasses. I'm leaning forward. So there's the code right here and you can just see ListView is gonna take up the whole thing. We're gonna give this an ID of LST main. Whoops. There we go. As soon as we give it our ID and it creates it, it puts in a what's called a visual template here. That's actually not really what the items are gonna look like. We're gonna get to that. So let's crack open our layout folder here and you can see there is our main activity that we were just looking at. We want to make essentially what's called a list item. We're gonna go new and we are going to have to hunt and pick through here. Whoops. Layout resources file. Yeah, we really didn't have to hunt and pick too far. All right so this may take me a minute here. Not used to doing it this way. Forgive me. Let's call this list item. We're gonna give it linear layout and we're gonna put it in the layout directory. Honestly, these available qualifiers, I haven't read up on these too much so I'm not really sure what those mean. I'll have to read up on those but we're just gonna hit okay for now. Really not used to doing it that way. Forgive me. And as you can see it makes another layout. Now what we're gonna do, let's flip back to the main activity here, is you see these items, items 1, item 2, item 3, and 4. We're gonna make our own template that each item is going to follow and that's what this list item is. So let's flip into this guy and I want to just kind of look at the code here, make sure we're not missing anything. Yeah, we want to set this to horizontal. There we go. The reason why we do that is if it was vertical they would stack down. We want them to go left to right. So what we want to do here is we want to get, if I can find it through here, I see I miss where Cute Widget has this little search thing where you could search for them. We want to get an image view in here. Did I actually do it or didn't do it? Didn't do it. We're just gonna type it then. Forget it. Actually you know what? I like drag and drop. We're just gonna do IC launcher. Why not? See there it goes right there. I didn't want to do a lot of typing on XML because it's quite frankly bores me to death and then we're gonna get a text view and we're just gonna pop this text view over here and you can see how it's kind of got this 50-50 thing. So we're just gonna grab this guy and just kind of scale him over a little bit and then we'll grab this and we need to give these some identifiers here. So we're gonna give this AMG item. I don't know where I come up with the names for these things. I gotta do better at that I guess. And TXT item, short for text item. We're gonna modify this a little bit here. We're gonna go bold and let's get this a bigger size. Let's go 18. Let's go 30. Maybe not 30. Maybe 24. Why not? Alright. And we are going to look at this here. Where's the padding on this bad boy? This part I probably will write because I can't find it through here. Although I'm probably looking right at it. We'll just flip in here. And we're gonna go padding top. We want to pad this a little bit. Now if you don't understand what 5dp means, we'll explain that in a future video. Just right now, just understand that this is not a pixel measurement. You can see how it drops it down a little bit. We're gonna actually do 10dp. You can see how it drops down even further. So that is the rough template that each one of our items is going to follow here. Now it's very important that when you do this, you have an identifier for the picture and the text box. Sometimes people forget that. I forget that all the time. We're going to kill that. Whoops, we're gonna go ahead and kill that. Now what we're going to do is we're going to say, Alright, let's see here in that type hash map. There we go. Now you should remember what a hash map is from your intro to Java classes. And this is one of those cases where we're gonna actually use it. I like using maps instead of arrays because arrays are a little cumbersome. So you're going to have to have a key and a value pair here. So to do this, we're going to say items equals, whoops, it's hash map, not hash. And we're gonna say new hash map. And we want to give this an integer. And remember, these cannot take primitive types. So you can't do int. You have to do the actual integer. So that's gonna be our actual items here. Now we're going to list view and we'll call this LST main, because that's the name of our list view. And we're going to say LST main, list view, find view by ID, r.id. This is kind of the boring part of the code. LST main. So we're just, you know, getting our resource to the list view and actually casting it into an actual control or an actual view, if you will. Now we're going to populate our map. We're just going to very simply say four and i equal zero. i is less than five plus plus. And we're just going to say items.put. And here we're going to say i because that's our key. Remember, we have an integer and then we want to string for the value. So we want to say item number plus i. So really, that's all we're doing. Now comes the interesting bit. Let's save this. Let's actually give this a good build. Make sure we haven't screwed up on this so far. And it looks like it built just fine. I've got some icons somewhere. Here we go. And we're just going to take these, and we're going to copy these. Very important that you copy, not cut. And we're going to go to our drawable folder. If you don't have one, you can actually just right click on res. Go show in files. And that'll bring open your resources where they're physically located on disk. You can just add a drawable folder. But anyways, you're going to right click on drawable. And you're just going to go to paste. And it's going to say copy specified files. And it's going to give you the actual path. And you're just going to say, okay. And that copies the actual icons that we got in here. Put some into your Android project and registers them so that when, I shouldn't say registered, it just puts them in there so that when you build, the r variable actually has those. So now you can say r dot drawable. Whoops. Dot. And then there's your icons. That is how we're going to actually access the icons. Now before we do any of that, let's run this. And I'll show you that it does absolutely nothing. I just want to get the emulator up and booting. Make sure it actually runs. It was giving me fits last night when I was doing the pre version of this. Great. It went come on emulator. You can do it. I have this truck. It's not a truck. It's a Jeep. And I love this thing to death. And it's making some noise. I'm like really afraid to drive it. Who's texting me? I'm doing a video go away. Sorry, my daughter was texting me. Alright, so as you can see, it does absolutely nothing. So what we're going to do is we're going to populate this now to get those items in so it shows an image and a text. We have to use what is called a you guessed it anybody. You have to use what's called an array adapter. So let's kill that application. Let's close that. And let's go here to Java and we're going to go to new Java class. We're going to call this custom adapter. Now this is going to be a fair amount of typing. So the first thing we're going to do is we're going to extend the array adapter. And you notice how this is templated array adapter type. So what we need to do here, and this is going to look a little funky if you're not used to it, is we want to actually give this a type of hash map. And a lot of the tutorials out there you'll find won't do that they'll do like a string and then you'll hand it an array. And there's a reason for that we want to actually take this hash map that we just populated and give it to the array adapter and you'll see what I mean here in a second. So we're going to say hash map. And there's our key value pair. We're gonna say integer string. And you notice how it's already getting cranky with a snow default constructor. Okay, well, let's make a default constructor here. First thing we're going to do is we're going to say private hash map give it our key value pair here are types actually sorry, string. Yeah, I really love that cheap. I mean, it's anybody who's got a vehicle they've ever just really loved. I mean, you understand what I mean. It's like your baby almost. Alright, so we're gonna have our hash map and our context. We haven't really talked about context too much. context. It's like having a conversation with somebody in what context are you talking about? You know, I was walking around in my underwear. Well, in what context? We walking around in your underwear in your house or in the middle of a supermarket. That's a context. So in programming, you have to know the context of which is pretty much translates to what view are you talking about or what activity are you talking about? Because everything could have its own context, which I think internally really relies on scope. If you remember your your scope classes from Java. Alright, so we're going to do patrol. Oh, and we're not going to do that actually. Sorry about that. We're going to go hover over this. Try get that little. There it is that little icon to pop up. And we're going to create constructor. And we're just going to go with this first one. context and resource. And then we're going to add this in here, because I'm really sick of typing this out, we're just going to grab this. And we are going to say boom, we're gonna call that map. So there's our constructor. And now we are going to just say items equal to map. There's a whole lot of memory copying going on here. That's one thing I'm not really thrilled about with some of these languages. Now, some of them internally, like I think Java actually does internally, we'll actually use a pointer instead of copying. I may be wrong about that. But I think in the olden days it copied and now it actually uses pointers under the hood. So if you know anything about C plus plus, you'll know exactly what I'm talking about. Alright, so now we have our context, which we're going to need later on and we actually have a reference to the map reference or pointer that's up for debate. Anyways, sorry, I'm thinking I miss C plus plus really bad. Get count. So we're going to add get count. We need that because the array adapter will not show any items unless we actually return account. So if you're following along and you skip the step and none of your items show, this is why. Okay, so now we're going to return items dot size. That'll ensure that our array adapter actually does what it is supposed to do. All right, now. This is where the actual magic happens. We need to go control o a new keyboard. And we're going to say get view. Now notice how this says in position convert view, which is a view group, and it returns a view. So what are these things? Well, remember, a view is pretty much anything on the screen. So what we're really going to be returning is this list items dot XML, this guy, we're going to basically create an instance of this and shove it back, or I should say return it back. To do that, we have to do a little bit of magic under the hood here. Why is this thing suddenly missing return statement? We'll get to that in a minute. All right, so we have to use what's called a layout inflator, which is kind of a complex topic. But basically, a layout is an XML file, which we've seen an inflator is just a bit of code or class that actually takes that turns it into an object that we can work with. So we're going to say inflator equal layout C layout inflator. What? Why are you doing that? Damn you. Copy and paste. Forget it. There. Con dot get system service. And we're going to say context dot layout inflator service. Now if this looks like some weird voodoo black magic code, it's because it kind of is basically what we're saying here is get a layout inflator, which is a class that's going to turn this XML file into something we can work with. And then we're going to cast it here. And then we're saying con, which is the context that we're going to hand this custom adapter, which the context is actually going to be this guy, our main activity. Confusing. I know I'm very sorry. I didn't create this Google did they're much smarter than I am. Anyways, so then we're going to take that context of the main activity and we're going to get a system service called the layout inflator service. What does all that mean? Basically, it means that there is a bit of code running in the memory of the device that has a pointer in the context that is called the layout inflator service. So it's not us actually creating an instance constantly. It's us getting the devices instance of it and then using that instance. Not 100% accurate, but I think it makes the point. Remember, these things are designed to save memory to save power. So inflator dot, and then we're going to actually inflate. Now what are we inflating our dot? I have to look at my notes. Sorry, lay out the list items. This was actually a challenging tutorial for me to write. I did not like doing this one. So I'm trying to do good by you guys here. So we're just going to do a little bit of magic there. We're going to say we want to inflate that list item thing. So we're going to turn that to usable code. Alright, now we want to actually make a text view call this txt. And this is going to be you guessed it, text, text view. And we're going to say, whoops, we have to do the row dot fine view by ID r dot and I'll explain this here in a second. Just let me finish typing this out for I lose my place here in my notes. txt item. So what are we really doing here? We're taking the inflator. We're getting a we're getting a reference to our pointer to the layout flaters inflator service that's running on the device. We are then grabbing a view remember reviews pretty much anything shown on the screen. And we're calling that row and we're saying inflator inflate this XML file this guy. Once we've quote unquote inflated that or turn that into something we can work with this guy, we're then saying grab the text view out of that thing. So we're taking list view fine view by ID and we want to get the txt item, which is this right here. If that's not confusing, I don't know what is. Okay, so let's let's continue here. Sorry. I literally once I figured that out, I had to laugh and went wait, what that makes no sense. But then when you start thinking in what I call Google language, then it actually makes a lot of sense. Sometimes I wish Google would hire me just so I could get smarter. Bro. Alright, fine view by ID, we're gonna say our dot ID dot item main. So now we've got that image view on there also. So and if you had other controls in here or controls are other views in here, you'd want to grab those as well. So basically we got, you know, reference to that image in that text box, or sorry, text view. So used to other languages. We're going to close that close that because we don't need those anymore. Alright, we're almost there. We have a little bit of magic that we have to do here. Alright, so we're going to say, yes, that was actually me rubbing my hands together because I'm a little excited because I want to I want to get this done items dot get and we want to get the position. Sorry, my phone two string. So basically what we're doing is we're taking that map. And we're saying we want to set the text here. And just for the sake of argument, we're going to return the row. Whoopsie. And we're going to build run this just so we can see if this thing actually works. And there it goes. And alright, so it built but it's not displaying anything. Let's fix that super quick here. Let's flip back into our main. And we're going to say whoops, how many times can I say whoops in a video? Custom adapter, adapt, adapt her. A new custom adapter. This resource zero because we don't really care. And then we want to give it the items. So what we're really doing here is we're creating an instance of the custom adapter that we've been working on here. And we're giving it this as the context. So when we think of context, you have to think of, you know, what perspective are you talking from where we're talking from the main activity. So when we're in here using context and you'll see context a lot in Android tutorials. The context is our main activity, whereas the view context and get view is a different context. So we want to kind of flip those back and forth. And if that gets very confusing, there's like a whole three hour class on YouTube about it. And then LST main set adapter. And then adapter. So by doing this, what we're really doing here is we're saying all right, make a map or I'm sorry, hash map, fill it with values. We need some way of rendering those values, we're going to use a custom adapter. And then we're going to say the list view set the adapter, we're going to set the adapter here. So let's actually stop run this again. And when this thing pops up, we won't see any graphics. But yeah, we'll see the default that we put. Now what we need to do is actually find these icons here. See how we got icon 01234. We want to actually put those in there. So there'll be all different icons. This takes a little bit of magic here. The problem we're trying to solve is we're trying to take the r dot drawable. And then whatever the number is. You notice how that's code, that's actual, you know, objects, we want to be able to get that from a string. And that kind of just, I'm just going to level with it just completely pissed me off. It took me like, I want to say 20 minutes, actually a lot longer than that. I don't want to lie. It took me about half an afternoon to figure this out. Because most of the tutorials I found on the internet were just dead wrong, or they were ancient and they just didn't work. And that's been a big, big problem I've had with Android is a lot of the tutorials out there are just really old. So anyways, we're going to make a context and we're going to say the image, the image view, we're going to get the image views context. We're going to say int ID because we want the identifier because that's what everything in the resources is an identifier. And we'll say context dot get resources dot get identifier. And then we're going to say, ICO plus position, we want to get a drawable item. Make sure you spell that correctly. I did that wrong one time. And we want to get this in the context dot get package name, sorry. And then finally, we want to image dot set image resource ID. So what are we doing here? Essentially, we're saying get the context of the image view convert the actual string icon, whatever the position is, the position is getting from here. So whether it's item one, item two, item three, actually, it'll be zero base item zero item one and you get it. We want the drawable resource. And then we want the context to get the package name now the package is this entire application you can actually get resources in other packages if your security allows it there's all sorts of other hurdles you got to jump through but you can do it. And then finally, we're going to say image set image resource ID. This is the exact same thing as saying our dot drawable dot icon zero or icon one or whatever. We're basically just converting the string into the ID the Android understands. So we'll stop our application, make sure it stopped save our work. And let's run this bad boy. See what happens here. Boom, there you go. So now we have our individual icons with our text. And from that you can modify this template however you need it. You can put buttons you can put pretty much anything in there that you want. It's kind of crazy that what you can do with these that shows you basic item templating and how to handle with it. And there, you know, it acts just like a normal thing, you could actually put in code to handle the on click and all that stuff like we done in the previous tutorial. That was a mouthful. Well, for the source code for this and other programs, other tutorials, you go to my website void realms dot com under tutorials. And then I got to alphabetize that under Android, I'll pop it in right here. And if you're still watching, go to the contact button. There is the void realms Facebook group. There is I think today almost 1200 or just over 1200 programmers all walks of life all different languages. And we all just help each other out. It's getting to the time of the year where I need to renew my website subscription. So if this helped you, the site is 100% funded by your donations. Anything above and beyond just paying for the website I donate to charity. So that's it. Thank you for watching. I hope you found this educational entertaining.