Lessons

Lesson Info

Loading Avatars with Threads

So let's talk about loading avatars with threads at first. So you'll remember last week we talked about, um, leaving a little bit of space, actually created the hole. We put the component interview. So the component was in the view last week. Um, an image view that would allow us to show avatars, but we weren't loading the avatars yet. But this week we're going to actually go through and load the avatar each. Each time a tweet is put into a list item here on the list, we're going to show the we're gonna start loading avatar at that point. Um, but loading and images by is one of those network operations, especially from the network. It's one of those one of those operations that is long running. It's not trivial. It can't be completed on the u I threat or things will get really choppy. So, like we talked about last week, those kind of thing needs to be offloaded onto a a a background job. So what we're going to do just to kind of first show that we need Teoh at least to make the applica...

tion usable? We need to put these load these avatars in the background. We're gonna set the scene for the next step where we talk about the a sink task and we we'll load these with a handler and a threadlike. We loaded the the new tweets or old tweets last week, and then we'll see where that leaves us. So let's go into the code and get that going. Where we're going to look at is if you'll remember the way things are kind of set up each one of those items in the list inside the the list. Ah, that shows all the tweets. Each one of these items is a status list item which is selected here. Uh, the layout is and resource is layout status list item dot xml. We'll have a look at that code really quickly. Um, it's a custom view component. That means that besides the XML definition, which lays out the image view for the avatar, the text view for the user name the text be for the status or the content of the tweet. It is a status list item, so that means when this is constructed or or inflated from the XML, one of these classes will be created to control the view. So let me open up that guy and we'll look at what it is. First of all, remember, it's, ah relatively out. And we have references to the avatar view the screen name the status text and, um, were added Now online 20 a. A handler to deal with looting the avatar in the background. So let's go through how this is gonna work when the status is set, that means the tweet is loaded into the into the list item for viewing. The first thing we're gonna do is get the user off of the, um, off of the status that was set in there. And I didn't change this code from last week. Someone else pointed out that I shouldn't be finding views each each time the status has said, um so just ignore that for right now. I'll try to fix that for later and upload that code. But after the after we find the views and we set the new tweet, um, we're going to set the screen name texts. We're gonna set the status text, but then we're also going to start to load the avatar this time around. So the first thing we want to do is set the image trouble to know in this case, um, well, so the first, the the worst thing that could happen is when we set a new tweet as we're scrolling around in here. We don't want to show someone else's avatar on this on this tweet. So the first thing we need to do is get rid of the old avatar that was there. Because remember, each one of these views, as we scroll through the list, is actually getting recycled. There's only actually maybe 123456 or so, um, status items. And each time we scroll with ones that are going off the top are getting recycled and put on, um, to new views on the bottom. So every time each one of those gets recycled, set status is gonna get called and we need to clean out. The old avatars were not showing the wrong avatar on a tweet that just got loaded. That's the first step we show a blank avatar. And if you if we had, um or like in depth graphical, um, idea behind this application, we probably have, like a default avatar or something to show. Just so didn't look so weird. Um, as we scroll around showing nothing but but for these applicator for this application, it's, ah, good enough to just clean that out and show nothing. And then what we want to do is just like we did last week here. Um, we need to create a new thread to load the avatar in the background. And it turns out it's not that hard to load even a nut an image from the network and create what's called a draw global, which we're gonna be talking about a lot more next week. Basically, a drop ball is something that could be drawn, Um, and to create a draw global, which is, um, something that we can put into an image you would just like. We have here on line five of the status list died of maximal, which shows the Avatar. All we need to do is, um, do this Ah, convenience method Wrobel create from stream, and then get the URL from the profile image on the Twitter for J user and then say open stream. And then there's this thing kind of key that we can use Teoh in case you're loading a bunch of draw bulls, I think this is a key that you can use toe to remember. Um, which one that's getting loaded at the time. I'm not really sure what it's used for, but we don't need to use it. It just needs to be there when you say create from stream some creating that that draw ball from from a stream from a from a java I o class that knows how to load some information off the Internet. And when that's done, um, we'll have something called avatar Durable, which will be set. And we're holding a reference to that here online and then, um, catching any exceptions that happen, we can say, handler, that post finished loading drop ball. Um, so can anybody remember what? What type of a thing? This is how the handler works. With Post could see down here that this is a If I hit f three, this is a run a ball. Actually, it's up here. Sorry. Online 26. Um, rentable is just something that implements the run method. So this handler again from last week, remember that? Ah, handler is the guy that can communicate between the activity and the thread. So we have to post it rentable through there and then the rentable is the one that that can actually manipulate the activity. Could you can't do that from the thread. Like we can do simple things like this. Like set a set the value of this drop ball like online 24. We could set the the Avatar draw Bols value set a reference to something from a threat. But we can't do any manipulation of the activity or the view from the thread. So the handler is the one that does that. That's why we have to do this intermediate step of creating a drop ball. And then the handler, um, will tell the handler toe Teoh post, this is run noble. And then whenever it gets around to updating back to the the main thread, the irritable online 26 with one defined online, 26 will be run. And that just calls another method, um called finished loading user avatar, which is online 28. So if I hit F three on that, we'll go down and you'll see what actually happens once the rentable runs, which is just to set that draw bull into the avatar view. Um, so let me make that even more clear. In case it's not the avatar view. We couldn't have done this avatar view set imaged Wrobel from the threat because that is, would be manipulation of the something that's on the view hierarchy. We can simply set the draw bowl that is, a instance variable of the activity to to some new reference. We could do that, but it since it's not in the view hierarchy, um, we don't get any problems there. But if you were trying to try to do what we do online 59 instead of the thread, then you would get an error, Which is why this this handler has to act as the go between. So now that we have the reference, the draw bull set on the activity than the the activity, um, Handler will post this new rentable when the threat is done, and then this code will be called Ah, and then be the view hierarchy can be changed to show the new the new Avatar, and that's what's happening through this code, and you can already see it working here as we scroll. New avatars are loaded and it takes a little bit of time. Now. I don't know if this is really coming across to you over the over the wire, but this is really chunky. So when I you could see my mouse scrolling up here and then it takes, like, three seconds for it to actually react and load the new avatars. Um, it's really it's almost a bad as if we were loading these avatars on the U I thread. It's really not that much of a benefit hoops. I don't mean to do that. It's not really It's not really that much of a benefit to the user experience to be loading these things on the thread like it's it's just like one step forward. So we've done the right thing by taking to avatar load into the background and off the you I thread. But in summary, um, using that many threads because we're trying to load at least five and maybe more, depending how fast the user scrolling. But using that money threads because almost his trouble as using no no threads at all. So that's pretty much what we've got for this first step, and we're gonna see how to fix that next. But does anybody have any questions about what we've done so far? I actually have a question, and then I'm gonna hand it over to the audience. So you're even. If you're using the same icon for a bunch of tweets you're still loading, loading separately. Each time corrects your loading the creative life icon multiple times, even though it's the same one. Yep, and that's that's a good point. I didn't mention that, Um, this is really sort of dumb, simple code we would be using some or like in memory and maybe even on disk cashing or something like that in a riel production application, where we would see if we already had the damage loaded and then load that out of a cash were, you know, something smart there instead of trying to load him each off the Internet. You know, both time are all every time it's loaded, which is kind of dumb, Okay, but it's good enough for purposes of this class, and we have a question from Mitchell, who asks why the avatar draw ble variable is protected. A supposed to public or as opposed to private. Well, the other get the other ones are private, so Yeah. So I think, um Oh, I'm sorry. I should have been immediately obvious to me. The reason it's protected is because the thread is needs to access it. This threat is a different class. Makes sense. Brian has a question from the chat room. A T p. S s, uh Are you going to do some cashing? No, that's not really android specific. I mean, maybe dis cashing could be, but, um, there's there's a There's a whole lot of content in here, and no, I didn't deal with any cashing in this application. 20. I personally have a question kind of in coordination to this. How about cashing the images? I know tweet droid stores, all the icons that it currently has already loaded from the load stream into ah, protected folder on my machine. Yeah, like I was saying, the right way to do this would be instead of just, um, creating this from a stream would be to pass off would be to delegate to some sort of cash manager object or something like that, and the cash manager would check some sort of in memory cache? Um, probably first, because I'd be the fastest. And, um, if it wasn't in that cash than it could check a disk cache or something, like like you're talking about, which would persist through sessions. And if you start restarted the apple application or restarted your phone or something, um, and then if it wasn't there, then would load it from the Internet, and then the cash manager would would, ah, nowhere to put that, um, instead of eso it would be responsible for also populating the cash. But again, the I mean, the point of what we're talking about right now is just moving this this this long running task off to a thread.