Wrapping Your UI Code

Our app is looking beautiful. 0:00 Next, we're going to add in Google play services so 0:03 we can share these listings with our friends. 0:06 Welcome back. 0:10 Let's wrap up our UI code so we can see a list on our screen. 0:11 All we need to do is create a layout file for activity and 0:15 then make a call to the API. 0:18 First, let's go to the layout file. 0:20 In our resources under layout 0:23 by default our project was recruited underscore name for us. 0:26 But it doesn't have anything helpful, so let's go and add what we need here. 0:30 I'm just going to create a frame layout. 0:34 Frame layout is going to draw all of its children one right on top of the other. 0:38 And, in here, we just need three different views. 0:43 We need our recycler view, which will display our list. 0:46 Going to put a progress bar to display a loading indicator. 0:48 And just some text, in case an error happens, we can display that to the user. 0:52 Let's go ahead and put in our recycler view. 0:56 To get our recycler view, we need to reference it from the support library. 0:58 Here it is, android.support.v7.widget.RecyclerView. 1:03 Then I go ahead and give it an ID, gonna call it recycler view, 1:09 and it's going to take up the entire screen. 1:13 So the width and height will be match parent. 1:16 Next is going to be our progress bar and it's just going to be wrap content. 1:23 We're gonna apply a style though and 1:28 the style is just going to be a standard progress bar. 1:30 And we want to include an ID for this as well. 1:35 Progress bar. 1:39 And finally, let's just put in a text view. 1:41 And again, this is just in case an error happens. 1:44 We weren't able to fetch any data from the network. 1:47 We want to display something to the user. 1:49 And that's just going to be some text. 1:52 This idea of this is just going to be error. 1:54 View. 1:57 And finally, we just want to make sure that this text and 1:58 progress bar, since they're not going to take up the full screen, 2:01 are just going to be centered, so we want to include 2:05 gravity if center layout underscore gravity is going to be center. 2:09 That's going to pass the gravity attribute up to the parent 2:14 while it's doing the layout. 2:17 So that'll be centered in the middle of the screen. 2:18 Going to also include that with our progress bar. 2:23 Okay. Let's switch over to our activity 2:26 Java class now. 2:28 And in here, we just need to go ahead and store those views. 2:29 We have our recycler view, we're going to have our loading view. 2:35 Now I don't, it's always gonna be loading. 2:40 The progress bar will always be loading. 2:42 I don't need to cast it to a particular type, 2:43 I'm just gonna keep a reference to it as a view itself. 2:45 I'm just gonna call it progress bar. 2:48 >> So use alt return any time when you import, and 2:54 the text view, I do want to set some text in case something happens so, 2:58 I'm going to keep that as my error view, but 3:02 I'm going to keep it typed to, to be text view itself, 3:06 after calling set content view, we can go ahead and get the references here. 3:10 >> Again, you might be using something like Butterknife to do this, 3:18 that's great, finally, let's get our error view, 3:21 some text view, and while we're at it let's go ahead and just add three methods. 3:26 These methods are going to just switch the state of the UI based on 3:32 what's happening at any given time, 3:36 so we'll call these from our adapter when we have data to display. 3:38 By default, you know, we're always going to be displaying the loading indicator by 3:41 default, so let's go ahead and add these at the very bottom of our class. 3:45 Down here we're just gonna create a few methods. 3:49 One's gonna call show loading, and in here, you want the loading indicator, 3:52 which is our progress bar, to be visible, but we're going to 3:58 not show our recycler view, and we're not going to show our error text. 4:04 Showlist is going to do the same thing as 4:11 our other code except we're just going to show the list instead. 4:15 So I'm just going to copy this code from here, put it in here, 4:17 but I'm gonna change so the progress bar is gone. 4:21 And the recycler view is visible. 4:25 And we're gonna do the same exact thing for 4:29 our final method, which is show error. 4:34 Paste this in again. 4:39 What we're going to show is the error this time. 4:42 By default, then they load, we're going to call show loading. 4:46