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