This course will be retired on June 1, 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
Preview
Start a free Courses trial
to watch this video
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