Now that we've got the dimensions of a card,

let's try to layout just the first row of our app.

Inside our first linear layout,

let's add an image view which will represent our deck.

And inside this image view, let's set the imageResource

property equal to one of the green card backs.

So R.drawable, and then I'll pick the fifth one .cardback_greenfive.

Next, we just need to make this image view the size of a card.

So let's add the .lparams function.

And then add our brackets.

And then inside this function let's set width

= to cardWidth and height = to cardHeight.

And at this point, if we run the app there should be a green card

in the upper left that's about as wide as one seventh of the screen.

Yeah, that looks about right.

Now before we get on with the rest of the first row let's make some small changes to

what we just wrote.

For starters, instead of setting the image resource like this, we can just

call a different version of the imageView function and pass in just the resource.

Instead of passing in this whole function.

So let's delete this function parameter and replace it with parentheses.

And now, we can see that we can pass in the image resource as a parameter.

So let's pass back in our resource ID, R.drawable.cardback_green5.

And there we go.

It's the same thing as before but a little bit shorter.

Anko's always giving us options like this.

Another one of these options is the lparams function.

We've already seen from looking in the underscore relative layout class

that there are a few different versions of the lparams function.

So again, let's delete this function parameter and replace it with parentheses.

Then let's just pass in cardWidth for the width and

cardHeight for the height and bam all one line image view.

Now let's run this again and what a terrible failure.

Let's take a look at the different versions of image view

to see what's going on.

If we add a comma at the start of the function,

we can look at all the different options.

And we can see that we're using the option with only one parameter.

So it turns out that even while we are passing in a resource ID

we're passing it in as the theme.

To fix this we can just pass in a second parameter for the theme,

But that's not a very satisfying solution instead a better solution

is to tell Kotlin exactly what parameter we're passing in.

So in front of our resource ID let's add image resource =.

And now if we run the app, we're back to getting what we expected.

Now let's get back to where we were and

let's finish out this first row.

Let's use command or Ctrl+D.

To duplicate this line for a waste pile and then let's change the resource

from cardback_green5 to cardback_blue1.

We'll be using this cardback to signify an empty pile.

After our deck and waste pile comes a space the size of a card.

On the next line let's type view and then parentheses to create a view and

then let's give that view a width of card width and a height of zero.

So .lparams, pass in cardWidth for the width and for the height let's pass in 0.

Finally we need to add the four foundations.

Let's start with the loop from

zero to three for I in zero to 3.

And inside this loop let's copy and paste in our image view with the blue cardback.

Then let's run the app again.

And look at that.

It's starting to look like a game of Solitaire.

But it looks like we forgot about our spacing on the sides.

Remember, we wanted 4dip on each side?

Back in the code,

one way we could do this is by adding an lparams block to our linear layout.

And then setting the leftMargin equal to four dip and

the right margin equal to 4 dip.

And now, our linear layout, we'll start 40 PN and from the left and

it will end 40 PN and from the right.

But that's only for

this one linear layout, Instead of adding a margin to our linear layouts

layout params what we really want to do is add padding to our vertical layout.

So that each of the views Inside our vertical layout,

we'll four dip on either side.

So let's delete this lparams block and

then add a line at the top of our vertical layout.

Next let's set paddingLeft = dip 4.

And now we get a val cannot be reassigned error, lame.

In Android the only way to programmatically set padding

is by using the set padding method.

So we won't be able to declare our paddings one at a time.

So instead let's type setPadding and

pass and four dip for the left, 0 for the top,

four dip for the right, and hold on a minute.

I've just been told we actually can set these one at a time.

It turns out that instead of using padding left

we should have been using left padding.

So let's delete this setPadding nonsense and

then let's set leftPadding = to the DIP four.

Then let's also set rightPadding = 4 dip.

And while we're at it, let's also add 8 piece of padding to the top.

TopPadding = dip 8.

Nice, also real quick, if we use command or

Ctrl+B to jump to one of these padding declarations.

We can see that it ends up calling set padding just like it has to.

Now let's close that and

run the app one more time to make sure it looks like it should.

Looks great.