Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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.
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
You need to sign up for Treehouse in order to download course files.
Sign up