Display Loading and Error States7:51 with Jamie Huson
Add some final polish by saving state across rotation and displaying loading and error states.
Now we need to actually perform our API call. 0:00 You don't have a method to actually do that from our Etsy class yet so let's go 0:03 ahead and add in a new method to Etsy class so we can perform a call to our API. 0:07 This method needs to be public so that the activity class has access to it and 0:13 can call it. 0:17 Now the important thing is that this is void. 0:20 We're just going to be passing in the call back. 0:22 So the call back is going to get called back when the network request 0:25 completes and is parsed into the active listings. 0:29 I'm gonna call this getActiveListings. 0:34 And it's going to take in the callback of type active listings. 0:37 And what we're going to do is, oh, import callback type, 0:42 what we're going to do is just call API, and the API has our active listings. 0:47 And to call that we need to include images and shop. 0:54 And it's asking for the call back itself, which is here, so 0:58 now that, since this is public, we can call it from our main activity. 1:02 First what we need to do is set up our recycler view. 1:08 To do this we need to set a layout manager on our recycler view, and 1:14 in this case, I'm just going to use a staggered grid layout manager. 1:18 And it's going to take number of spans that we want. 1:23 For now, I'll just say one. 1:26 And it wants an orientation, which just going to say vertical to start out with. 1:27 You might want to change the span count to be based on a dimension or 1:35 integer, based on the number columns that might fit on the screen. 1:39 You can choose whatever you want. 1:43 I'm just going to go ahead and go with one for now. 1:45 And our list is going to be scrolling hor, vertically up and down. 1:47 So we've chosen vertical. 1:51 Next, we need to go ahead and set an adapter on here. 1:54 I'm going to say new listing adapter. 1:56 We need a pass and a context, which is this referring to the activity. 2:02 And we need, actually, 2:07 to use this adapter because remember this adapter is our call back. 2:08 So, let's go ahead and take this adapter object, and 2:12 get that reference before we assign it. 2:16 And then what we're going to do is first time we're running, 2:23 saved instance state will be null. 2:28 We can go ahead and just fire off the API call. 2:29 We're going to pass in the adapter. 2:34 Okay. This looks pretty great. 2:37 We need to go ahead and save state as well. 2:39 So let's override the on save instance state method, 2:42 and in on save instance state, 2:48 we need to save the data that came back from the API, 2:51 so I'm going to keep the key for the save instance state. 2:56 If savedInstanceState was null, it was the first time, we're going to go ahead, and 3:10 again, and show loading. 3:14 If it wasn't null, we need to go ahead and pull out from savedInstanceState. 3:18 The parsable object, which is our active listings and 3:25 on our adapter, we need to call success with that data. 3:32 The data is the parsable object. 3:44 Which is in fact active listings, object. 3:45 And the second value of success is the response itself. 3:51 Which we can just pass in null. 3:59 So now, if it's the first time running, we're going to go ahead and show loading, 4:03 we're going to make the call to the network, otherwise when we come back, 4:07 if we have that active listings there, we're going to just go ahead and 4:10 set it on the adapter and display our lists. 4:15 But it might be the case that we don't have any data yet, so we need to make sure 4:20 we check if there's any data to begin with in the saved instance state. 4:24 So we're gonna only do this if the saved instance state contains the key. 4:27 So if it contains that key that means it had some data. 4:35 And it, on saving some state, we're gonna go ahead and check by getting that data. 4:39 Now we need to add a method to our adapter to get the current data, so 4:45 let's go ahead and add that in here. 4:49 Public, it's gonna return back that active listings object, 4:53 getActiveListings, and we're just gonna return our active listings object. 4:58 It may or may not be null, it could be null. 5:03 So, we need to check that. 5:06 Now we have to have access to our adapter here so, let's go ahead and 5:08 move the scope of this to be just within our activity class itself. 5:13 So, if the active listings are not null, we're gonna to go ahead and 5:31 put them in our outState window. 5:34 Put parsable, going to give it the key, and the actual active listings object. 5:38 So if we have that data, it'll be passed into the bundle, the outstate. 5:44 Then come back to on create. 5:49 We're going to check if there's data. 5:52 Go ahead and display it. 5:54 If not, kick off a call to the API. 5:55 So in this case, again there was an eta, it wasn't stored in the save instance 5:59 state bundle, so again we need to show loading, and do another call to the API. 6:04 One last thing we want to do is in our adapter, we want to go ahead and 6:15 if failure does happen, we want to call back to our activity and 6:19 say we should display that error text. 6:22 So, since that's the case, we need access to that activity. 6:25 So, instead of passing in a generic context here, 6:28 let's just pass in our main activity itself. 6:31 And we'll just call this activity instead. 6:35 And we'll keep a reference to it here in the class. 6:40 And then down on success. 6:53 We're gonna go ahead and show the list by calling to our activity show the list. 6:58 Otherwise, you wanna show that failure. 7:05 So it's gonna show the error message here. 7:11 And error message we can actually retrieve from our object here. 7:14 Okay, let's go ahead and run this to see if everything is working okay, 7:18 we should get a call to the network, get a response back, display some listings. 7:21 Our app now displays listings from an API. 7:30 We use the Retrofit library to make it easy to call the API and 7:34 parse the response to the type we need. 7:37 After that, we displayed the list using Recycler view and 7:40 the staggered grid layout manager. 7:43 Finally, in our adapter, we used the Picasso library to display the images. 7:46
You need to sign up for Treehouse in order to download course files.Sign up