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 we add the entire first row to our UI!
-
0:00
Now that we've got the dimensions of a card,
-
0:02
let's try to layout just the first row of our app.
-
0:06
Inside our first linear layout,
-
0:08
let's add an image view which will represent our deck.
-
0:12
And inside this image view, let's set the imageResource
-
0:17
property equal to one of the green card backs.
-
0:22
So R.drawable, and then I'll pick the fifth one .cardback_greenfive.
-
0:29
Next, we just need to make this image view the size of a card.
-
0:34
So let's add the .lparams function.
-
0:40
And then add our brackets.
-
0:43
And then inside this function let's set width
-
0:47
= to cardWidth and height = to cardHeight.
-
0:52
And at this point, if we run the app there should be a green card
-
0:56
in the upper left that's about as wide as one seventh of the screen.
-
1:01
Yeah, that looks about right.
-
1:03
Now before we get on with the rest of the first row let's make some small changes to
-
1:08
what we just wrote.
-
1:10
For starters, instead of setting the image resource like this, we can just
-
1:15
call a different version of the imageView function and pass in just the resource.
-
1:21
Instead of passing in this whole function.
-
1:23
So let's delete this function parameter and replace it with parentheses.
-
1:28
And now, we can see that we can pass in the image resource as a parameter.
-
1:33
So let's pass back in our resource ID, R.drawable.cardback_green5.
-
1:42
And there we go.
-
1:43
It's the same thing as before but a little bit shorter.
-
1:47
Anko's always giving us options like this.
-
1:50
Another one of these options is the lparams function.
-
1:54
We've already seen from looking in the underscore relative layout class
-
1:57
that there are a few different versions of the lparams function.
-
2:00
So again, let's delete this function parameter and replace it with parentheses.
-
2:07
Then let's just pass in cardWidth for the width and
-
2:11
cardHeight for the height and bam all one line image view.
-
2:16
Now let's run this again and what a terrible failure.
-
2:22
Let's take a look at the different versions of image view
-
2:24
to see what's going on.
-
2:26
If we add a comma at the start of the function,
-
2:28
we can look at all the different options.
-
2:32
And we can see that we're using the option with only one parameter.
-
2:37
So it turns out that even while we are passing in a resource ID
-
2:41
we're passing it in as the theme.
-
2:44
To fix this we can just pass in a second parameter for the theme,
-
2:52
But that's not a very satisfying solution instead a better solution
-
2:56
is to tell Kotlin exactly what parameter we're passing in.
-
3:02
So in front of our resource ID let's add image resource =.
-
3:09
And now if we run the app, we're back to getting what we expected.
-
3:16
Now let's get back to where we were and
-
3:20
let's finish out this first row.
-
3:24
Let's use command or Ctrl+D.
-
3:26
To duplicate this line for a waste pile and then let's change the resource
-
3:31
from cardback_green5 to cardback_blue1.
-
3:37
We'll be using this cardback to signify an empty pile.
-
3:41
After our deck and waste pile comes a space the size of a card.
-
3:46
On the next line let's type view and then parentheses to create a view and
-
3:52
then let's give that view a width of card width and a height of zero.
-
3:57
So .lparams, pass in cardWidth for the width and for the height let's pass in 0.
-
4:07
Finally we need to add the four foundations.
-
4:10
Let's start with the loop from
-
4:15
zero to three for I in zero to 3.
-
4:21
And inside this loop let's copy and paste in our image view with the blue cardback.
-
4:31
Then let's run the app again.
-
4:36
And look at that.
-
4:36
It's starting to look like a game of Solitaire.
-
4:40
But it looks like we forgot about our spacing on the sides.
-
4:43
Remember, we wanted 4dip on each side?
-
4:46
Back in the code,
-
4:48
one way we could do this is by adding an lparams block to our linear layout.
-
4:56
And then setting the leftMargin equal to four dip and
-
5:02
the right margin equal to 4 dip.
-
5:11
And now, our linear layout, we'll start 40 PN and from the left and
-
5:15
it will end 40 PN and from the right.
-
5:19
But that's only for
-
5:20
this one linear layout, Instead of adding a margin to our linear layouts
-
5:26
layout params what we really want to do is add padding to our vertical layout.
-
5:30
So that each of the views Inside our vertical layout,
-
5:34
we'll four dip on either side.
-
5:37
So let's delete this lparams block and
-
5:40
then add a line at the top of our vertical layout.
-
5:45
Next let's set paddingLeft = dip 4.
-
5:54
And now we get a val cannot be reassigned error, lame.
-
6:00
In Android the only way to programmatically set padding
-
6:04
is by using the set padding method.
-
6:07
So we won't be able to declare our paddings one at a time.
-
6:11
So instead let's type setPadding and
-
6:16
pass and four dip for the left, 0 for the top,
-
6:22
four dip for the right, and hold on a minute.
-
6:28
I've just been told we actually can set these one at a time.
-
6:32
It turns out that instead of using padding left
-
6:35
we should have been using left padding.
-
6:38
So let's delete this setPadding nonsense and
-
6:43
then let's set leftPadding = to the DIP four.
-
6:50
Then let's also set rightPadding = 4 dip.
-
6:58
And while we're at it, let's also add 8 piece of padding to the top.
-
7:02
TopPadding = dip 8.
-
7:09
Nice, also real quick, if we use command or
-
7:13
Ctrl+B to jump to one of these padding declarations.
-
7:18
We can see that it ends up calling set padding just like it has to.
-
7:23
Now let's close that and
-
7:24
run the app one more time to make sure it looks like it should.
-
7:30
Looks great.
You need to sign up for Treehouse in order to download course files.
Sign up