Lessons

Lesson Info

Loading Newer Tweets

so step, too, now that we've got page worth of the home timeline tweets shown up, Let's, um, showing up in a list. Let's work on loading newer tweets case. Anything new comes across. So what we want to do is add ahead of you to the list that will set up the top. And, ah, when the user clicks, it will load anything newer than what they're currently seeing so they can get updated to the latest. And the way that will do that is what the way Twitter works for paging through tweets, at least, is that each tweet has a unique identify air, which will make sense to anybody who's worked on the server side stuff for any kind of site like this. And and not only that, each each identify air is sequential. So it's if you have a greater number for an idea of one tweet than another tweet, you know that the greater numbered tweet the tweet with the idea that has the greater number came later than the one with the lesser number. So the way um, Twitter does its paging is that you can say I want to get a...

ny new tweets before this or after that came after this particular I D. And all we need to do for for our purposes is load through Ah, Twitter for J using a paging object and say we want new tweets later than this. This particular idea and that idea will be the one at the top of the list. And then once we get those new tweets that come back, we'll just load a default page worth, which I think is around 20. So we're gonna get 20 new tweets each time 20 tweets the first time. Or however many the pages, however big the pages and that every time we load your tweets, we could potentially get up to newer tweets. And we'll just put those at the beginning, um, of the array list that loads all of our tweets until the data Ah, or tell the adapter to tell the list that its data has changed. So let's go through. Look at the code that does that close all this down, so I'm going toothy. I'm gonna full of this Step one project and open up the step to project where we load newer tweets and let's start from the beginning, and that would be in the status list activity. So let's ah, look at first of all, how we get the load more header view into place. So let's look at this in just a second this. But what the head of you is is a load more list item. So that's all you need to know for now, which is just a view. But let's see how we get it in place and then we'll look at some more particular stuff about that. So the first thing that we do is you can see everything is the change. Everything is the same. On resume. Write a check of or authorized, if not load the home timeline. If we don't already have a list, adapter will load the home time lying down online. 48 and the loading. The home Timeline, um, is done almost the same way. So no, instead of ah, just setting the adapter, we also do a few other things. Um, I'm doing this method call this method called set load more views. After I set up the adapter and before I set the list adapter to that adapter, which will actually put the data into the list. So let's look at what's in set load more views, which I believe is right down here below, um, online 88. So I'm gonna keep a reference to it as a as an instance variable for this activity because I want to know when it's clicked, and I'll show you that in just a second. But, um, I'm gonna set that reference to be a ah, the view that is inflated, um, cast into a load more list item out of a are not layout that load more so you can see that I've used ah different way of inflating views here instead of you that inflate get layout inflater Um does those are two different options that you have? I don't know if there's any really difference between them, but those air two different ways that you can inflate views, which again, is turning the XML definition into a Java class that you can use. And then so what I've done here is since we're loading Maurin, loading, loading, loading, newer tweets and loading older tweets, I'm just gonna reused the same view and just tell it to display different text in different situations. So I've got a way to say Show the header text for the header view in this case instead of show footer text, which will we can look at here in just a second. Let's first look at the the layout here. Um, actually, first, let's look at Night Line 91 which is the rest of this method, and this is how you set the head review. This is how you say there's a particular view that I want to show up at the top of the list and it's different than a list item. You just say, um, on a list activity, which let me jump of the stop here. The file says list activity extends list activity, which is a list, which is an activity that knows how to control a list. So you get a reference to that list that you say just simply add header view and then put a view there. So that's how it gets to the top of the list. Let's look at what's inside of it. So I'm gonna come over here to Resource is layout. Load more. Let's look at the XML layout and it pops into this visual editor but I like the XML instead. So I'm gonna change over down here at the bottom. Um, so our view is a custom view of type load, more list item, and it has a text of you and it has a progress bar. The text view is gonna be the header. And you see that set the text here to load Mawr. But but I changed the text every time I set the, um set the header to either set the item to show either ahead of you or the or the foot of you, so that's not really important. But the text view shows up here. And then there's also a progress bar, which I've said a couple interesting things. Um, we're actually gonna get to see this for a couple steps because of reasons that'll make clear in a little bit. But this is basically a spinner kind of spins around and shows that there's something going on the way you set it up to be that way as you say that it's indeterminant and ah, that will make it different than then. A progress bar that shows from like a an increasing colored area that covers some sort of horizontal bar, which would be the determinant version, which means that we know, like how many, how many steps there are to complete in the progress. But since this is doing network operation, we can't tell how long it's gonna take. It needs to be an indeterminate progress bars. There's just going to spend until it's done, showing that at least something is going on. So that's how the view is set up. Let's go look at it. Ah, load more. Listen and see how the class for that view set up, that is inside com 0.0 Reilly. Not Andrey that tweet dot layouts load more list item. Um, it's a relatively out so that we can do some relative positioning if you want, but we're not actually doing that. Um, because there's only two components on their the header texts inside the text of you in the Progress Bar and the Progress bar is invisible. I guess it is laid out to left so it doesn't it doesn't sit over the top. So we are doing a little bit of relatively out there. Um, then back in the view class, we just have a reference to the load, more text and the progress indicator and and here, how did the right thing? I guess I just must have gotten lazy when I wrote that other code unfinished inflate. I'm I'm finding views. Um, finding views is down here on line 44 to 48. We just get a reference through find via but I d for each one of those components. And then there's a couple utility methods. First of all, show header Texas When we've already called, um, we just get string resource here for the string for load More header and then set the load. More text text of that header and then footer. We just get the string for load more footer. So if I open up the strings file first up to you can see if I switch over the XML view that I've got load more footer and load more header to find his strings Here in the strings. Xml um which shows slowed your tweets or loader older tweets which you've already seen on the view. So that's pretty straightforward. And then I also have ah method called show progress and one called Hide Progress, which basically hides or shows the progress indicator. So that way I can tell it to start showing progress when the user taps it. That's it for the view. Um And then I've added that is a foot a za header view here. Now let's talk about what happens when it actually gets clicked. So you'll remember from last time, Um, that we have a method on list activity called on lis Item clicked, which will be clothed, called when any, when any of the views for each item in a list of use clicked. And in this case, um, and by the way, that will be called for the headers or footers as well. So all we need to do is just check to see if whichever one got clicked was the head of you because all we're doing is loading newer tweets. At this point, I will say, if the view equals header view, then we want to show ahead of you progress and then load your tweets. So let's go look at load your tweets, which is right here online. 77. Um, load your tweets interview. Hide progress. Why do I hide progress? I guess because this is gonna be loaded, um, synchronously right here. My eyes will. Anyway, I think the later code will be doing this correctly. Will only hide progress once everything is done, but lower loading newer tweets. Here's where that paging object comes into view. So we're gonna say Twitter, get home timeline. But instead of just getting the home timeline, um, with no qualifications, we're going to set up a new paging object here, um, which then uses like a builder pattern. And we say we want a page Since the I d. We want whatever the default page size is since the I d of the first I d on the adapter so well, delegate that after the doctor and the doctor should be able to tell us what the idea of the first item in the list is, And then once the adapter is loaded there, once those statuses are loaded, then we tell the adapter to load those new statuses as newer tweets, which will basically append them to the beginning of the list. And then, um, you'll see that online 82 and actually online 63 when I load the home timeline. In both of those cases, I get a reference to the list view and say, Set the selection toe one and the list of you is a zero based list so that basically such the the view right below the header view as the top view in the list. That way it it sort of hides that the head of you and it's not always hanging around. Um, let me go through one more bit of code and then you actually see her how that works. So let's go Teoh the adapter. Get first I d. And just check out how we're getting the most recent I d. So hover over this and hit F three. Um, you could see this method that I added to the status list adapter. Get first I d just loads the the first status, Um, by getting the item at zero. And if it's no, we'll just make one up. Otherwise it'll get the idea of that guy. So that's that's just how you deal with paging on Twitter and then a pen. Newer is a new method also, um, so here's something interesting. Ah, when I think during the last class, whether we whether we extended list, adapter or base adapter. I can't remember which. Um, but we had to Ah, when we added new items to our task list. Remember when we added items to the adapter, we needed to at the end say that the data set had changed. We say notified data set changed, and that will have the adapter update any views that are listening to it and tell them that they need to display new data. But what's interesting is there's an insert method in ray list adapter. They're array adaptor that will let you put things into its It's the the collection that holds the data for that list. But each time that you insert something or in any way change that data or change the order of the date in the collection or put thing but new things in or take things out, it's gonna it's going. Teoh. Notify the list that something's updated. So since we're loading the whole array list of new statuses or stat, I if you want, um, we don't want it to notify the list and have an update every time a new one is inserted. So what we can do is is sort of shut those notifications off for a little bit. We say Set, notify, unchanged to false. And then every time we insert one of these new ones at the at the top of the list, it's not going to notify the list that something has changed. And then at the end, we can say set or notify data set changed, and that will actually turn those those notifications back on this. Every time something's changed about the array list that this array adaptor holds, it will make new notifications again to the view until it to reload its view. So again, we're just shutting those automatic notifications off. Inserting all the new status is that we loaded in the new page and then notifying that the data set has changed. So let's look at that actually running. Ah, Step two, I need to go over here and run. This is an android application. Now the new code should be getting deployed, and once the home timeline is loaded here into the list, you can see that there's no header view showing up. This this one. This list item is the 1st 1 that shows up, and that's because again, back here in status list activity. When I load the home timeline, the last thing I do after I set the adapter is set the selection toe one, and that's kind of a nice user experience. I'm sure you've seen it on other Twitter applications because you don't get bothered with that header view when you don't want to see it. But if you try to scroll up to see new tweets instead of seeing your tweets, he's shown your shown that you're at the top of the list already and you see the head of you that allows you to load your tweets. So that's just a nisi way that you can do a little bit of clean up on the view. All right, so let's click this and see what happens. You can see that it just kind of jumps to the list. At the last place we are had one had one loaded, so that means that nothing new is in the home view are the home Twitter timeline for this user. So I think I could go create one here. If I go to Twitter, you could see this actually working. I'm signed in as Tweet Android, which is the user I'm using for this class even seem Here's my timeline right now. Um, and this retweet of Chris Perillo, I guess by creative live is the one that showing up at the top Uh, that's that doesn't sound good. Get this is Latin. This this is live so seeing anything and everything that shows up on Twitter. But if I tweet something new like learning about interviews in android lists and tweet that now I've got a new tweet in my home timeline that I created And if I switch back to the emulator and scroll down for load near tweets Click note Load your tweets. Now that tweet is at the top of the list and we've selected that one and the headers against sitting at the top. So that's how that should work. Um, let's see if we've accomplished everything that we need for this step. So we've got the latest I d. We load the home timeline with the paging object to get any new tweets that have shown up since the first tweet in the lists. I d. And I think we're all set. So in summary, a list of you can have a set of headers. So that's another interesting point. You can have as many different headers as you want. We only have one, but you can have multiple headers. And then footers, we're gonna be looking at those in the next step and those air lists items that could display special data metadata controls load new paging type controls just like we've got here. That kind of thing. Let's start with a question from the audience. We have one from Ernest. Hi. I had a question in the ah, load more dot xml It looks like some of the pixel, uh, definition to change. I think one of them was dp I and another one was SP, and I was just wondering why you went with those as opposed to just p X or something. Okay, that's we're gonna go over that in depth in two classes, but I'll give you this quick answer right now, you want to use SP for text and you want to use DP for graphics. Um, the reason is that SP stands for scaled pixels, and that takes into account not only screen size and density, but the users preference for for text size so they could go bump that text size up. And this will honor that as well as other things and NDP dependency. Independent pixels will take care of different screen sizes and deviations from the standard pixel density, which I think is 160 pixels per inch. But but if that doesn't make sense to anybody else, hopefully that answers your question. But if it doesn't make sense, we're gonna be going over that in depth in two classes. And then I had one other question. Ah, when you're showing the load mawr, um, option on the list view Is it at all possible to have the timeline auto refresh without having to click it first? Yeah, sure you could do that. Um, let me think how you would actually do that, though. So you probably want to do You can't just, um, like, surprised the user by when this view shows up. Um, and I'm not even really sure you do that. Technically, we have to experiment a little bit like we don't want, just want to just show when the view shows up. Is anybody familiar with Tweedy? Are I guess now the official Twitter app for the IPhone called Twitter now or Twitter for IPhone. Yeah. Okay, well, so what? That would at what that app does, which I really like, Is it It allows you as you pull down. It kind of shows you that. Hey, if you keep pulling this list, um, then let go. At a certain point, once this view is completely shown, then we'll unload new tweets. But the problem is that there's there's not as much of a physics model, I guess, for the android list is there is for the IPhone one. So there's not really that stretchy rubber band kept type of a behavior, so I don't know if that would quite work, but you could You could do something Where this header view is really tall and and then show the user, as more of it is, is revealed. Um, not sure again of the technical details, but you can show them that if they keep on pulling down and that let go, at a certain point, it'll load new tweets. You could do something like that. I don't think you'd want to do it automatically, though. Cool. Thank you. Um, and I have one question that I'm gonna hand it off to Sarah and Ruth. Somebody is asking to explain the android Intermediate attribute. Oh, for the progress bar. You know what? Well, let me just give a quick run down, and then we're gonna see Well, im gonna make this point again. And even more detail in the next next segment when I click this Remember them? I'm calling show progress on this header, but when I click it, nothing happens because you don't see progress. The reason is that, um, we're blocking the you I from updating by doing the work on the U I thread. Um, so you don't actually see the progress indicators show up, But later on, we will, and then it'll it'll probably make more more sense, but just really quickly load more this progress indicator, this progress bar we're setting indeterminate to true because we want it. We don't know how to know how much progress is completed. So it's just going to turn that into a spinner. Little guy that spins in a circle. Got it. Okay. Yeah, that makes sense with the I didn't realize before you were actually on on the u y thread, but yeah, that makes sense. So is it Is the correction that it's in determined android indeterminant and not intermediate? I think so. Oh, I didn't even catch anything that she said that I guess I knew I translated in my head. It's not intermediate. It's indeterminate. I'm not. I have ah question or to hear from Goto Webinar. What? What happens with Sepp? Selection One when there are no tweets yet such selection one when there are no tweet said Good question. I don't know. It may blow up. Uh, it's a good question. Okay, um, and earlier you said you prefer to edit the XML round rather than use the layout editor. And this is what that person has been hearing all along. Is it true that the layout editor is too buggy and that we need to view at it? XML to maintain real control over code? Uh, I've found that to be the case. Yes. So I mean, like, look at this. Slowed more in the interview, the visit, the visual editor and I can't even see what I have out there on the screen. I think, um, I think the problem in this case is that I've got a custom custom class here, but I'm not sure. I don't know. I just I just never use it. It's a lot easier. Teoh. Not only is it it's still not quite complete, I guess it doesn't know how to deal with a lot of skinning changes. So if I've got some if I've got some, like, programmatic skinning, going on it completely freaks out, doesn't know what to do Saturday. Yeah, I think that's pretty much the case. Okay, um, Tony have a couple from the chat room number one. So for the, uh, indeterminate, which loads the default spinner, is there a way to load your own spinner? The customs? Well, yeah. Um you wouldn't load your own scone spinner. You would just style the spinner the way that you wanted it to look instead. Okay? And then I have another question. It says so. Notify Did Is that change calls set notify on change equals to true, does it? Yes, it does. Does it activate it temporarily? No, it turns it back on. So let's look back at the adapter. Um, in fact, I think we can look at the documentation for this. I'm gonna hover over this hit of two. And that will show the Java doc for that method. Um, well, when you zoom in, but I don't actually exist. It doesn't say notifies the attached view that the underlying data has been changed and it should refresh itself. I don't know where I read. I can't remember. But it's in some documentation somewhere that I read that when I set notify on change to false and then call notify Data set change. It turns it back on. Um uh, let's let's take that to the forums. But I think I think I read that somewhere.