The First Row

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