Lessons

Lesson Info

A Better List View

so in our quest to provide a better list view to our users in this application, what we want to do is to add a custom list item like you see here. So we'll allow, um as you add a task, it'll have, ah, the title displayed here. But also next to that, on the right hand side will be a check box, which we'll let you keep track of which ones which tasks you've already completed. Um, we're not actually going to see that list item during this step, but another feature of this list is that we'll be able to say whether or not we'll be able to show Ah, view. Um, that will come up when there's no items in the list, which is a little more interesting, just a blank screen. So what we're gonna do is get to the point where we have this list of you on the screen. Um, and since there will be no lists or ah, no tasks, um, already in the list actually think they're mayor to be, too. But we can We could clear those out in some point, I think, and then show this no date of you the no date of you is Ah, jus...

t a distant view that you can you can have android use whenever there is nothing in the adapter as you'll see. So the steps that will be going true for this first, um first, ah, piece of this, this glasses just to replace the text view that we already have in the in this Ah, this ah initial view of the app with a list view and will also add this No date a few. So I'm gonna switch over to eclipse, and we'll get started. So in eclipse Ah, I already have the ah, the exact same project that we worked on last week. And ah, what will just do is start with that, um, and just build on from there, and the code will be The code is distributed as you've already seen in. So you can you can start from any week and you can see the progress from the last week, Um, sort of building on it on each other. Um, and if you want to fall along, you may. Yeah, you may do so by starting with the code that you had from last week. Um, and you can refer to the code that you that we just put up. I think last night, um, if you want to see where where we're going. So to get this started as a quick reminder, Um, what I have displayed here in this ah initial view of the APP is all laid out and defined by the layout. In the resource is rez layouts, man dot xml file. So I'm gonna open that up and look at what we already have in there. It is a relatively out which, if you remember from last week, is, ah, layout that allows us to lay out the Children of the layout relative to each other and to the to this parent container, the relative layout instead of just in a line. Um, like the look at this, there's a kind of an artifact of one that was a linear layout. So that's a good point. I don't have I don't have to worry about this orientation tag. And as I do in a linear layout, which just allows me to lay things out neither vertically or horizontally in a relative layout, I have much more control over where things are laid out relative to show. And, um, you can see at the top there is this text view, which is the title. Ah, tasks. And then there is a text for you underneath that, which is the sort of bulleted list of all the the the tasks that we have so far. And then underneath that is a button that we used to go to the ad tasks train right here. So the first step is to replace this text of you with, uh, um or interesting component a new component called list of you. And we want the I d to be a special I d. That the the android list activity that we're gonna be introducing in the next step is to display that and that I d is like this android apps back up here. Okay, so what? I mean by sort of a magic I d this instead of, um, what you what you're used to seeing for I ds. Like here. This is Thea initial declaration of the I d. For this text view, um, you'll notice that it's kind of, um, like in the sort of if you think of it is like a full folder metaphor like this is all the I ds Underneath that, we want the task title I d. In this case, we have this android colon in front of the list, and that means that it is a It's an I d. That's defined at the top level of the sdk in a list of things that Android usually looks for. And what we can say is, um since we since I'm telling you now, now you know that the list activity looks for any list views that are created by um are created with this I d. That way we don't have to worry about wiring up which list view we're gonna be using, um, to control via them activity. So this is sort of automatically looked for by convention by the the list activity. And ah, that is ah, sort of a trick that you can use to not have to wear things up so much. Um, we're gonna keep the with that Phil parent going to keep the height at rap content, the list fee will be laid out, um, below the test. Ah, the text view. That's right here for the title and above the add button. Um, but what we're going to do for that? Remember, I talked about the no date of you. Um, So what? Ah, the ah list activity will allow us to do is when there is no data to be displayed in the list. We can specify another, Um, some other component. Whatever type of component that we want, um, to be used when there's no data in that list. And ah, all we have to do is here. I'm gonna paste in some code. All we have to do to make that happen almost magically is to use another sort of magic I d which is this android Empty text for you. I'm sorry, android, that are angry Colon empty I. D. And this is looked for automatically by the ah, the list activity. Just as the list view has looked for automatically by the android list. Identify air and this will automatically be managed to be invisible or visible, based on whether there's any data inside the list adapter. So that's pretty useful. Um, see some other things. So the ah, the text Let's have, um, the string. No tasks be displayed in the center of the screen. when we go back and look here at the slides, that's exactly what we want to see right in the center of the screen. You want to see no tasks, Um, when there are no tasks to be seen. So I'm gonna show you now this realtor factoring technique that you can do instead of going into the strings file and adding this no tasks key, you can just type in here no tasks, which is what we want to see and and then select that and then go appear to, um Where is the re factor? There's three factor menu go to re factor and then you can see that this is a much abbreviated list. Since where? This XML document. You have a lot more options if you're in Java. But the only one that they have right now available for ah editing, editing android layouts is to extract an android string so I can select that no task string and say extracted at. And I'll get this menu here. I want the string to be no tasks and I want the are that string to be no tasks. I'll just delete this underscore at the end and then the resource file. In case you've broken your strings out into different files, we only have one file here, but you can still choose which one you'd want. And, ah, once I click OK, then that string will be replaced here in my xml file with this with this no tasks text, um that identifies that string in the strings file. And, Justo see that? That's nothing too crazy is going on there. I'm gonna open the resource strings at XML, and you can see that that was added to the list of resource is in the strings XML right here at the top. So that will save you a little bit of typing. Ah, and that was just added, I believe in 1.5 I. Maybe around the time 1.5 was released that at the I D was updated toe Teoh to do that. And that's a big time saver, especially when you've got a lot of strings in your application. Okay, so once again, we wanted that to be laid out right in the center of the screen, and the way you do that is with another attribute that were just running into for the first time. And that is the gravity attributes of the component. And that takes a pipe delimited list of different keys. And, ah, the keys that we want in this case are center vertical in center horizontal, um, split by a pipe character or the of the straight up and down line on your keyboard. And you'll notice also, um, something that's a little bit, um maybe interesting. Um, and this is a feature of the relative layout, Um, that we're using here. The text view that we're using for the no date of you has the exact same layout, um, set up as the list of you. So the layout, with his feel parent layout, hide his rap content, and it's laid out below the tasks title and above the add button. Um, so if you think through that, you would probably expect that that the text of you is gonna be laid out directly over the list view. Um, but that's actually not the case, because the list activity is going to manage that for us. So again, that makes sure that whichever one is is ah fits this situation. Whether or not there's items in the list or not is the one that's gonna be displayed. So, Tony, while we're on the list are on this view, had a couple of questions about the magic I ds, um one was why they do not need the plus sign because they are already defined. So in this case, up here, there's no such thing as a tasks title that Andrea knows about where you have to sort of initialize it right up the bat with the plus identifier. And this android I d is already already defined this android list. I d this there's a whole set of I d s that are sort of in this kind of a name space for ideas with the android being the name space Identify air. Ah, and that's already to find my android. So any time you see an application using a list that one of the application that ships with Android, they're probably identifying it with the same identify air. Um, And there was actually a question about I think something along these lines in the forums to So, um, someone asked, I think, um, can I reuse the identify where, um, from one view to another and the answer is yes, you can, um, the problem. The only thing that you need to make sure of is that you don't use it twice in a view that that's going to be loaded by one activity because the activity is looking for that identify air in the views that it loads. So that's how these ideas can be reused. Okay. And then, ah, question about the empty is, um, what are the rules around? The empty is. Does it only work with list? Does it work with other things? I don't know if it works with other things. I do know that it works with lists, and that's the only time that I've run into needing it. Um, I can't think, really think of another component that has sort of a two state situation like that. Like, um, I mean, there's a lot of very simple components like buttons and check boxes and things like that. And then you have, like, the map components switcher. Pretty complex. Um, and the list component is really the only one that I can think of that where it has a situation or it may have no data. Um, maybe I'm just blanket on that, but I don't know. That's that's That's an interesting question. Maybe there's other places that this empty idea could be used. I don't know of any, though. Okay, let's give this a run and see what happens. Like I, uh no. Look, my project contains errors. OK, good. Let's go look down into the errors, Consul. So I'm moving down here to the the way I've got my I d set up. Um, I have this minimized out at the bottom, but there is, ah, problems. Um, view. But it z called in in that clips, and it shows me that I have are that I did a test Lisk under sort Teske a task list. Underscore text cannot be resolved inside the view task activity dot java, and that's because we just got rid of it. So that, um, answers the question of whether or not we can run the app at this point. So the problem is that in the view task activity, which is the activity that controls this view, we no longer have this text area here right here. So we have to go tell it the view task activity that that will no longer be something to look for. Um, I'm just gonna get rid of this. I don't think we really need that anymore. Show tasks is not gonna have to work a little bit differently, so I'll just clean up. I'll just clean this activity up enough so that we can get it running. So on create will be the first method called said content views. Still gonna work the same way than we will call set up views. And instead of views, I will get a reference to the add button. I no longer need to get a reference that task text. So, uh, when show tasks happen, Spawn, resume. Um, that's not going toe be something me there anymore as, ah component that we can share a variable that we can reference because we just got rid of it. Let's just cut all of this out because we're gonna load tasks in a different way. And now this at least should compile. And the tasks that we get out of the task manager application are we're gonna deal with those in just a little bit. So now since everything compiles, let's give it a look and see what we can see so far. Okay, there we go. And the no data view displays because, um well, here's why the no dated view displays even though we haven't done anything within activity with the list activity yet, because the way we have things set up here in the relative layout and the way views work is when you define them in XML further down the file than other ones, they sit on top of the ones that are previous to them in type in a relatively out type of ah situation. So this button is sort of in a Z position above every component that's that is defined before it. And this text view, which we use for the no data view, is sitting above the list of you in a Z index, and it takes up the same size. So that's why it shows up in the middle of the screen right now. And, um, that is at least enough to show us how the no date of you will look without having to worry about any data coming out of ah list activity through an adapter. But it shows us at least that we've got the layout matching what we wanted to build for this step. So I think that's a good step. Is there any questions on what we've done so far? We do have a few questions. Um, a couple people asked What happens if you have two lists? You don't have to use this magic. I d. Thing that just makes it easy so you don't have to wire things up. Um, I don't know if that's actually a good idea, though. Ah, I guess it may be possible. Um, yeah, I guess. I mean, I guess I can't think of any reason why it would be a bad idea. But you may. You may run into some interesting things that you have to do, um, to get those things working. For instance, I don't think you could. Well, I know you couldn't use this sort of magic. I d approached the wiring up a list activity to control that one list on the screen. You'd have to control them each, um, some other way, Like, um, well, you did at least have to get access to, like whenever certain events happened. Like tapping on an item in the list. You'd have to have a list. Here you have to have a listener that knew which one got tapped and see new, which which collection of data to look up, the the data that she was interesting about that tap in it. But I guess there's no reason that you wouldn't that you wouldn't be able to do that. But you wouldn't be able to use this this magic I d type thing, okay, and are the listed list of you and text you connected to one another? Does the system know that there could somehow connected? Or is it just that the list sits over top of the text view? Yeah, they're not especially connected. It's just that the list the ah, the list activity knows to look for a view called Android Colon empty with an idea of android colon. Empty and display that one and hide the list whenever you run into this situation where there's no data in the list. So there I guess they're connected at the controller by their I DS because we've used these these conventional ideas that the list controller but the list activity knows to look for Ah, somebody wanted to see that trick again with automatically adding a string to the resource Ah, to the resource file for adding strings. Let's say we have this string I d tasks. I'm open up the strings resource file. If I get rid of tasks now, there's no tasks in there. Um should be an error on this on this screen back in the main XML. And if I type in tasks, there's a string that I want selected. Go to re factor android extract Android string. And then I get a little dialogue here which let's me choose the identifier in the resource file and the text that I want in there. And then I could choose which research file in case of split things out into different files and then hit. Okay. And now this will be replaced with the identify air, and the strings file will be edited. And now strings is at the top. I'm tasks. Sorry. Tasks that to stop a top of the strings file and everything is now green. Okay, any other questions about thes set of steps? So, um, there just a few more. One is a comment Someone is asking layout below and above refers to the Z order in Android? Um, no, I'm assuming that Oh, I didn't know what you said. I think v order You said Z or, uh, no, not quite. Um, it, um it refers to Thea horizontal order. Sorry. Blanked a little bit there. Yeah, your first of the horizontal order. The Z order is controlled by, um, the positioning in the file. Erin, that like the definition in the file. So this this one is going to be below this text view is going to be below the list of you in Z space. Does everybody understand what I mean by Z Space Z X Y Most coordinates on the screen. It's the vertical stacking. What? What? What appears closest to the viewer? Yeah, I wouldn't use I wouldn't use vertical, though. Yeah, it's which, like, which is from the viewer's perspective, is in front or behind, um, other components. And then, um so I mean, as evidenced by the fact that there's nothing special happening here to make this this no tasks of you show up in front of a list view. It just it is because Thea I mean, there's nothing special in the activity making that happen. It's just showing up because the Z order is higher because it was defined lower in this file. So it's going to show up in front of the list. The list for you. Okay, so two quick 22 more quick questions regarding the special I d. With the android prefix. Can I use it for positioning? Also, uh, could you position against it like, layout below android list? Yes, she could. Okay, specifically, what Doesnt not have to be wired up? If you use magic, I d the by the way, magic ideas. Not a technical term. Hopefully just, I mean that it's it's sort of acts magical because it's a conventional I d. What doesn't have to be wired up is I think I think that will be a better explained, um, during the next step. But But in a nutshell, it's that this list activity Ah, which we're gonna turn this view task activity into. Ah, I don't need to tell it where to find what component to uses its list. It's gonna look for this. I d. Okay. And then finally, if you want to add what happens if you want to have two different scrolling lists on the same screen. So I think somebody is worried about, uh, using the magic I d and then having to different scrolling lists. And that's the final question that I have. You wouldn't be able to use those I. D. S the same way or you could use one, and then the next list that would be You have to control at it a different way than what we're gonna see in the next few steps. Thank you so much. Oh, yeah, sure. That's what I'm here for.