 Hey everyone. So in the last video we pulled data out of the firestore. We're not doing much useful with it though. We're just logging it. So now let's actually display it to the user. Now in the earlier labs and things we did this with a recycler view. Admittedly a recycler view is really challenging to use. The neat thing about it is that it can listen to the firestore for changes. The downside is it's pretty complex. Okay it's also more efficient under the hood. But let's say you don't need any of that. You want your data, your display of all the data in the firestore to be event driven. Like when the user clicks on a button or say you just want to show it to show everybody everything whenever they load the activity. Right that's fine or start the activity or create the activity. We can do that too and we don't need a recycler view. We can use a list view. So let's do that. Let's have a list view. Let's go make one. So the first thing is I'm going to go into my firestore activity firestore list layout and I'm going to add the list view to it. Okay so I make this big again and don't need the logcat at the moment so I'll get rid of that. Alright so here I am. I'm in our activity layout. Let's go to the bottom here and we'll add a list view down here below the refresh button. Okay so list view if you remember it just as you said as you may guess it displays things in a list with a scroll bar on the right hand side. So you can kind of go up down a big pile of things. Okay so let me give it an ID first of all and I'll call it patient list view. Okay and I forgot to put the at plus ID. Okay so we'll call it the patient list view. The width let's make it as wide as the screen in the height. I'm going to tell it to fill the remaining space over here. Okay so the way that you do that in a constraint layout is you set the height to zero. Okay I set my height to zero but then I'm going to set the vertical constraints in a way that makes sense that'll make it stretch. So let's attach the top of this thing the top of this to the bottom of the refresh button. Okay I want it down here down in this area. Okay and then to get it to stretch we constrain the bottom of the list view to the bottom of the parent. Okay and that'll tell it to fill all the remaining space. Okay I also have to give it even though we're like filling the space we also have to give it a one horizontal constraint so I'll just make the start to the start of the parent. Okay that'll that'll make it happy. There we go. Let's give it just a little margin on top say 12. Okay I'll pause here for just a quick second if you want to pause the video and catch up on this list view stuff. So I used a lot of autocomplete went pretty fast. Okay so I've got the view in place that I need. Let's go back to the activity and put the data in the view. Alright so I'm back to my on refresh click here and what I need to do is tell it to put the data in the list view. Okay so the way I'm going to handle this is if you remember list views take an adapter and it's the adapter that tells them I list views are like what chapter three or four it was a long time ago. List views take an adapter that tells them both what the data is in that they should show in their scrollable list but also how to render it what the layout should be. Okay so we're gonna start working on that way back up here and on create. Okay so first of all let's get the list view and I called it import that let's call it patient list view and then how do we get the widget out of our layout file we call find view by ID. I think I called it patient list view there it is. Okay everything looks good there. Okay so now I've got the object what I need to do is I need to set the adapter for it. Okay you may also remember that Android has a couple of built-in adapters one of which is an array adapter and you know we have an array list. We have a list of patients here an array list is a generic collection in Java that is backed by an array you know one of one of these things the square brackets. So let's use that let's just get the data showing. So I need to make the adapter my adapter is going to be an array adapter this is a class it's baked in to Android but what it shows you know in the examples from like chapter four it showed strings right a list of strings here we're going to show patients right we defined this patient class and this is why we did it to make this part here easier. We want to show an array of patients right so we're going to array adapter. All right now I need to initialize it so I'm going to initialize it a new by calling its constructor a new array adapter and the constructor takes three parameters and the first parameter is going to be oh I gotta tell what type of array adapter so it's an array adapter for patients and now there's three parameters it takes the first parameter is the context in which this thing is going to be shown the context is almost always the activity if you're dealing with fragments it's a fragment but we're dealing with the activity the activity in this case is this it's the firestore list activity you can also do firestore list dot activity not this if you want to be explicit that's totally fine okay I'm just going to use this all right the second thing is a resource ID that you want to use to show it we don't what we're going to use is one that's built into Android and you did this very same thing back in chapter four with a beer advisor app right there's a couple of baked in layouts and that's what we're giving it here we're giving it a layout resource that will tell the list view how to display the items inside what layout to use to display the item inside Android provides a couple to you uh go away there we are android dot are were you going to use a built-in one um simple list item one there we go okay what does simple list item one do it creates a text view and it takes the object that you're supposed to display and calls its two string method that's it it's a text view patient dot two string that's what it's going to do okay all right the final thing is the data the list of patients you can see here it's look it's asking me either for a list of patients or an array of patients well I'm in on create on create is called when you first the activity first appears on the screen I don't have any data yet I have not clicked the refresh button right I haven't pulled that data down you could you could pull the data down right here and initialize it that's fine I'm not going to do that here okay you could though all right I'm just going to initialize it within an empty list okay and we are done okay so that's my adapter um I've created the adapter now patient list I'm to attach the adapter now I need to attach the adapter to the list and that callable is set adapter with the object to just me okay now if we you know run this we're actually probably not going to see anything different because I haven't put any data into the adapter yet so there's nothing down here um but let's it's only when I call refresh that I actually get this data down so how are we going to add the data in to the adapter well the first thing we need to do is we need to make this adapter a class variable so that we can access it down here in this on refresh click method so I'm going to make the adapter a class variable so let me copy the the variable declaration I'm going to put it up here where the class fields go and assign it in my on create okay so again what did I do here I declared my array adapter up in the the class variable location and assigned it here that's all now down here in my on success listener if you remember from the last video we are getting the data out now what we need to do is put the data into the adapter and tell the adapter hey your data I've got data for you now update what's on the screen the way we do that is pretty easy I get my adapter and there's a method baked onto it called add all this add all can either take an array of patient objects or it can take a collection a raid list patient is a collection so we're going to call add all patients this thing and that'll do it okay let's run it see what happens go into our firestore list view all right so again nothing's showing up here yet because we're not going to pull the data until we click the refresh button so let's do it huh I've got information here um kind of weird looking information edu to uncu patient at blah blah blah blah all right so part of the way but what's happened this is clearly not what I want this is showing me again um when I set up my adapter here in on create one of the parameters I gave it was the layout that says how to represent the content of the adapter this simple list item one layout it is a text view you know just like name and age and it calls get string or excuse me two string on the object that it's rendering okay well patient if we go into our patient class patient does not have a two string method defined on it anywhere um and in java if two string is not defined what it presents is the class name the full name at and then this is the hexadecimal address where the object resides in memory not very user-friendly let's define two string and actually it's one of those things you can override so I hit ctrl o to bring up the override screen command o two string right and here now I can return whatever I want so let me return uh this dot name plus this dot age and let us run it now again all I'm doing is I'm adding the two string method to the patient model object back in my firestore list view click the refresh button there we go okay so now I'm I've got it in a list view let me add something now let's add some new data let's add uh Peter and he's 99 years old maybe I should type 99 uh and submit it okay now you can see here the list view did not update let me add him again change his name the list view did not update he was successfully added that's because unlike the recycler view this list view is not listening to changes for the firestore but if I click refresh there it is and actually now I have enough data that you can see the scroll bar here it's also something else interesting that's happened do you see what it is I've got duplicate data right uh let me refresh again see the bar jump all the data is here again huh what's going on well I've got a little glitch in my logic here um this call to adapter add all it takes the data that's in the adapter and literally appends everything on to the end of that list right so it didn't clear out the list that's probably what we want to have happen right we want to clear out the list and replace it with the new data not just keep adding on data so I need one more call in here which is adapter.clear and that will yes clear out the data then re-add um so let's run this again okay so here we are if I click refresh there's everybody who's in it and if I click refresh again yeah um I'm not getting extra let me add somebody it's add chain submit so she was added let me refresh here she pops up down here and I can scroll but you can see I'm not getting duplicates of what everything that was in there before okay so as far as the display though the display of this information I'm limited I can only show here using this simple list item the result of two string so I can't format this very well so in the next video we'll talk about again uh something that harkens way back to the first couple weeks of the semester how to style these to make them look a little bit better