This course will be retired on July 14, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Android Lists and Adapters!
You have completed Android Lists and Adapters!
Preview
Creating the layout for the new Activity.
Additional Resources
- Android RelativeLayout.LayoutParams
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Let's get our hourly forecast activity
set up with the RecyclerView.
0:00
First, we can remove these default
things that Android Studio provided us.
0:04
We can delete the app bar layout.
0:08
Our floating action button.
0:13
This CoordinatorLayout,
we need to convert to a constraint layout.
0:15
Fortunately, Android Studio
makes that easy.
0:18
We right click on CoordinatorLayout,
0:21
there is a Convert CoordinatorLayout
to ConstraintLayout.
0:23
Accept the defaults and hit OK.
0:28
Great.
0:33
Now we need to add a RecyclerView, we'll
grab a RecyclerView, pull it in here.
0:33
And we want to constrain it to the left,
right,
0:38
top, and bottom so
that it fills our entire view.
0:44
With our RecyclerView defined,
0:50
we need to create another layout
that defines the single row layout.
0:52
The single row will then be
referenced inside our adapter.
0:56
We go to res and layout.
1:00
Right click, New, XML, Layout File.
1:02
We'll call it hourly_list_item.
1:09
We want this to be a RelativeLayout.
1:13
And hit finish.
1:19
In the text view,
we need to add the layout tags and
1:24
move the XML doc information to utilize
Android's data binding library.
1:27
Go over to the text view.
1:32
We want layout.
1:35
Cut and paste that closing tag.
1:43
Let's indent RelativeLayout to make
it a little bit easier to read and
1:46
we'll grab this xml name space tag,
cut that and move it up here to layout.
1:51
And our closing tag.
1:59
And we need another tag in here.
2:02
Namespace, we want our app one,
we want the res-auto.
2:07
Let's update our relative layout
setting while we're here, as well,
2:15
to define what we need
here inside the XML.
2:19
Now, we could do it in the design view,
as well, but since we're here it
2:22
will save us some scrolling around
inside the design interface.
2:26
So RelativeLayout,
we want it to give it an id.
2:32
Give it an id of hourlyListView.
2:38
We want the height to be wrap_content.
2:47
We'll add some padding to the bottom and
top, as well.
2:53
Padding top will be 8dp.
3:01
And we'll do 8dp on the bottom.
3:11
Here are some tools available for Android
for building the design of our project,
3:19
that allows us to better see how
things are going to be displayed.
3:23
We can add this to the xml name space.
3:27
So xmlns: tools,
3:33
schema tools.
3:38
And down here we do tools background,
we can assign a background color.
3:45
And if we look over in the design,
3:51
we see that the relative layout has
a little bit of our background color.
3:54
Alright, let's update our XML here to
use the Android Data Binding Library.
3:59
So up here we need some data tags.
4:06
We want a variable.
4:12
We'll call it hour and
it will be in stormy weather.
4:14
And we're using hour and our closing tag.
4:21
Now we can add some items for
our custom data.
4:26
We're going to show the hour and
icon image, the summary and
4:29
the hourly temperature, nice and simple.
4:34
But it's still a good
representation of custom data.
4:36
Over in the design view,
we can set up how we'll want this to look.
4:40
But we'll come back here to
the XML to configure each item.
4:44
Again, just to save some scrolling in the
design interface and allow us to cut and
4:48
paste some configurations.
4:52
We'll use the design
view quite a bit though
4:55
just to make sure things
are looking correct.
4:58
Let's go over to design,
we'll add a text view.
5:01
We'll call this time label.
5:08
We'll add an icon ImageView.
5:13
We'll choose partly_cloudy.
5:20
And we'll rename the id iconImageView.
5:26
We want a temperatureLabel,
which will be a text view.
5:33
Again, that's temperatureLabel.
5:39
And we'll want a text view for a summary.
5:46
summaryLabel.
5:53
All right.
Let's head back over to the XML.
5:54
Go to text.
5:57
So our layout width for our text view for
6:03
the time label we wanna
manually set that to be 80dp.
6:06
Layout_height, wrap_content is fine.
6:13
We wanna set the layout_alignment for
6:16
the ParentLeft to be true,
the ParentStart to be true.
6:18
And we want it to center vertically.
6:21
So we have the ParentStart true already.
6:24
Let's change this to ParentLeft.
6:29
We'll add the layout_centerVertical
6:35
To be true, great.
6:41
For our text, we want to use
the android data binding library
6:44
syntax here to get our string.
6:49
The value of our hour.time.
6:55
We want our text color,
to be our Android system white.
7:01
Forgot the android up here.
7:12
And we want the size here to be 24 SP.
7:19
Now we can also utilize our
tools here that we installed.
7:31
Do tools:text="12 PM"/>.
7:34
And we go back over to the design view.
7:43
We see that we have 12
PM as our placeholder.
7:46
This will show up here in our design view,
but won't show up in the final app.
7:49
It's very helpful for
doing our design work.
7:52
So let's head back over to our XML.
7:57
We'll set up our iconImageView.
8:00
Here for the icon image view, we want the
layout width and height to wrap content,
8:07
which they already are.
8:11
That's great.
8:13
We want to center it vertically and
to be laid out to the right of and
8:14
end of our time label.
8:18
So we can get rid of these.
8:22
So we want layout_centerVertical
to be true.
8:27
Layout_toRightOf, we want the time label.
8:37
And EndOf to be the timeLabel as well.
8:48
And our drawable is partly_cloudy.
8:59
Let's take a look at the design view.
9:01
And that's looking pretty nice,
all lined up.
9:07
Head back over here to the XML.
9:11
For the temperature,
9:14
we want to make sure it is aligned on
the right side of the relative layout.
9:15
The layout width and
height we want wrap_content, that's great.
9:22
We are going to want
alignParentEnd to be true.
9:25
Center vertical to be true.
9:29
Aligned parent top to be false.
9:30
And align parent right to be true.
9:33
We'll do align parent top.
9:39
We want that false and
alignParentRight to be true.
9:49
For our text we can get
rid of our marginEnd.
10:00
Our text, we wanna grab from
our android data binding again.
10:06
Which will be
the (String.valueOf(hour.temperature).
10:13
And, our color and size are gonna
be the same as our time labels, so
10:21
we can cut and paste those.
10:25
Or copy and paste, I mean.
10:28
And let's utilize our tools again.
10:35
And we'll give it a temperature of 100,
10:37
just to make sure everything's
lining up inside our design view.
10:41
Let's go take a look.
10:44
And there it is, looking nice.
10:46
Let's go back and finish up our summary.
10:49
For the summary, we want it to be to
the right of the iconImageView, but
10:53
to the left of the temperature label.
10:57
We'll also want some padding in there,
10:58
we'll change centerInParent
to centerVertical.
11:01
We want layout to the right of.
11:11
We want that to be to the right
of the iconImageView,
11:15
it to be the end of our iconImageView.
11:23
We'll add our padding,
left and right of about 15dp.
11:36
paddingLeft.
11:43
15dp.
11:46
paddingRight.
11:52
15dp.
11:54
Our text we'll grab from hour.summary.
12:00
So it will be the
String.valueOf(hour.summary).
12:04
Our color and size again we can grab,
copy and paste.
12:14
And we'll use our tools to
define some default text.
12:25
And since we're using the Partly cloudy
icon, we'll say that it is Partly cloudy.
12:29
Let's go back over to do the design view.
12:38
And there it is.
12:40
Nice.
12:41
Let's take a short break and come back and
talk about the concept of adapters and
12:42
view holders.
12:47
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up