1 00:00:00,330 --> 00:00:02,290 We're almost done with our layout. 2 00:00:02,290 --> 00:00:06,340 All we need to do is make sure our button is below our text view. 3 00:00:06,340 --> 00:00:10,042 But before we do that, let's take a minute to talk about the difference between 4 00:00:10,042 --> 00:00:11,800 a view's layout parameters and 5 00:00:11,800 --> 00:00:14,480 its properties, by looking at a simple text view. 6 00:00:15,550 --> 00:00:16,930 You might not have noticed but 7 00:00:16,930 --> 00:00:22,230 when we declare a view in XML, there's really two kinds of values we're setting. 8 00:00:22,230 --> 00:00:28,430 There's things that are properties of our view itself Like ID, text, and text size. 9 00:00:28,430 --> 00:00:31,680 And there's things that are telling us where our view should go within 10 00:00:31,680 --> 00:00:37,050 the layout: like layout width, layout height and layout align parent bottom. 11 00:00:37,050 --> 00:00:40,820 These are the layout parameters and, in this case, 12 00:00:40,820 --> 00:00:46,080 they're stored in an object of type relativelayout.layoutparameters. 13 00:00:46,080 --> 00:00:48,330 Here's a good idea of what it looks like. 14 00:00:48,330 --> 00:00:52,850 We've got our text view with its id text and text size properties. 15 00:00:52,850 --> 00:00:55,490 But it also has a layout param's property. 16 00:00:55,490 --> 00:00:58,910 And that's where we store the layout width, layout height and 17 00:00:58,910 --> 00:01:00,980 layout align parent bottom attributes. 18 00:01:02,190 --> 00:01:03,590 Getting back to our code, 19 00:01:03,590 --> 00:01:07,210 we still need to make sure our button is below our text view. 20 00:01:07,210 --> 00:01:11,690 Which means we need to add the layout below attribute to our button. 21 00:01:11,690 --> 00:01:17,910 To do this, let's jump to the closing bracket of our button and 22 00:01:17,910 --> 00:01:21,810 then type .lparams. 23 00:01:21,810 --> 00:01:23,610 And then pick the version that starts with brackets. 24 00:01:24,830 --> 00:01:29,880 One thing I really like about Anko is how initializing a view is broken down. 25 00:01:29,880 --> 00:01:33,910 Instead of declaring the properties and the layout parameters all at once. 26 00:01:33,910 --> 00:01:36,090 We declare the properties inside the view. 27 00:01:37,380 --> 00:01:41,190 And then declare any layout parameters and an optional lparams block. 28 00:01:42,470 --> 00:01:45,980 It's optional because both the layout width and 29 00:01:45,980 --> 00:01:49,230 layout height properties default to wrap content. 30 00:01:49,230 --> 00:01:52,600 So we only need to specify them if we want to use something else. 31 00:01:53,620 --> 00:01:58,540 Inside our lparams block let's type below and pick the version that takes into view. 32 00:02:00,070 --> 00:02:03,880 Then let's pass in our counter text view and run the app. 33 00:02:06,632 --> 00:02:07,950 And, yikes! 34 00:02:07,950 --> 00:02:11,280 It looks like our button's covering up our text view 35 00:02:11,280 --> 00:02:15,580 though I guess we can see just a sliver of it and 36 00:02:15,580 --> 00:02:20,720 if we tap the button It does seem to be updating. 37 00:02:21,790 --> 00:02:24,760 But why isn't our button below our text view? 38 00:02:24,760 --> 00:02:27,950 Well, this is just one of the tricky parts about using Anko. 39 00:02:28,980 --> 00:02:31,370 Sometimes things aren't quite what you'd think they are. 40 00:02:32,590 --> 00:02:36,660 To fix our problem, let's put the cursor on below. 41 00:02:38,910 --> 00:02:39,930 After I minimize that. 42 00:02:40,930 --> 00:02:44,180 And then use Command or Ctrl+B to jump to its declaration. 43 00:02:46,580 --> 00:02:51,290 Here we can see that below is an extension function on the LayoutParams class 44 00:02:51,290 --> 00:02:54,000 that takes in a view and returns nothing. 45 00:02:55,050 --> 00:02:58,300 All it does is call addRule on itself. 46 00:02:58,300 --> 00:03:00,670 while passing in the below constant. 47 00:03:00,670 --> 00:03:02,990 And the ID of our view parameter. 48 00:03:04,460 --> 00:03:07,280 So it looks like it's expecting our text view to have an ID. 49 00:03:08,820 --> 00:03:14,110 Let's close this file and then back in main activity inside our text view, 50 00:03:15,820 --> 00:03:19,717 let's add a line at the top and set ID = 11 or 51 00:03:19,717 --> 00:03:24,278 some other positive number that you like. 52 00:03:24,278 --> 00:03:30,950 Then, let's run the app again and there we go our button's below our text view. 53 00:03:30,950 --> 00:03:35,329 And if we click on the button, we can see the text view start counting up, awesome. 54 00:03:37,866 --> 00:03:39,440 Pretty cool, right? 55 00:03:39,440 --> 00:03:42,210 Instead of having our layout tucked away in an XML file, 56 00:03:42,210 --> 00:03:44,630 we created it right in the activity and 57 00:03:44,630 --> 00:03:48,860 we were even able to add our buttons on click listener at the same time. 58 00:03:48,860 --> 00:03:53,810 It's a lot less code and at least for me it seems a lot less complicated. 59 00:03:53,810 --> 00:03:54,730 Okay. 60 00:03:54,730 --> 00:03:58,190 Now before you go there's two more things I should tell you about Anko 61 00:03:58,190 --> 00:04:00,240 that you won't be seeing in this course. 62 00:04:00,240 --> 00:04:02,650 And they're both from the very bottom of the Anko docs. 63 00:04:03,870 --> 00:04:07,300 The first thing is that you need to know about the include tag. 64 00:04:07,300 --> 00:04:10,240 While Anko does let you get away from XML layouts 65 00:04:10,240 --> 00:04:12,550 that doesn't mean you can't still use them. 66 00:04:12,550 --> 00:04:16,330 If you want to use an XML layout with Anko just use the include tag. 67 00:04:16,330 --> 00:04:19,900 The second thing is the style function 68 00:04:19,900 --> 00:04:22,920 which is actually called apply recursively now. 69 00:04:22,920 --> 00:04:26,600 And it's just a way for us to stop repeating ourselves in our layouts. 70 00:04:26,600 --> 00:04:31,310 We pass in a function and then it calls this function on each view in the layout. 71 00:04:31,310 --> 00:04:35,570 So if we want every edit text in our layout to have the same text size 72 00:04:35,570 --> 00:04:39,150 we could pass in this lambda expression to the apply recursively function. 73 00:04:40,468 --> 00:04:44,150 Then it will call this lambda expression on every view in the layout, and 74 00:04:44,150 --> 00:04:47,300 when that view is an edit text we'll set its text size to 20f. 75 00:04:49,240 --> 00:04:50,100 Cool. 76 00:04:50,100 --> 00:04:53,950 Now that we've seen the power of Anko and the next video we'll look into how all of 77 00:04:53,950 --> 00:04:58,010 this is possible and then move on to implementing a UI for the solitaire app.