Placing the Button4:58 with Ben Deitch
Do you know where a View's properties stop and its LayoutParams begin? In this video, we'll investigate the difference between the two and layout our Button!
We're almost done with our layout. 0:00 All we need to do is make sure our button is below our text view. 0:02 But before we do that, let's take a minute to talk about the difference between 0:06 a view's layout parameters and 0:10 its properties, by looking at a simple text view. 0:11 You might not have noticed but 0:15 when we declare a view in XML, there's really two kinds of values we're setting. 0:16 There's things that are properties of our view itself Like ID, text, and text size. 0:22 And there's things that are telling us where our view should go within 0:28 the layout: like layout width, layout height and layout align parent bottom. 0:31 These are the layout parameters and, in this case, 0:37 they're stored in an object of type relativelayout.layoutparameters. 0:40 Here's a good idea of what it looks like. 0:46 We've got our text view with its id text and text size properties. 0:48 But it also has a layout param's property. 0:52 And that's where we store the layout width, layout height and 0:55 layout align parent bottom attributes. 0:58 Getting back to our code, 1:02 we still need to make sure our button is below our text view. 1:03 Which means we need to add the layout below attribute to our button. 1:07 To do this, let's jump to the closing bracket of our button and 1:11 then type .lparams. 1:17 And then pick the version that starts with brackets. 1:21 One thing I really like about Anko is how initializing a view is broken down. 1:24 Instead of declaring the properties and the layout parameters all at once. 1:29 We declare the properties inside the view. 1:33 And then declare any layout parameters and an optional lparams block. 1:37 It's optional because both the layout width and 1:42 layout height properties default to wrap content. 1:45 So we only need to specify them if we want to use something else. 1:49 Inside our lparams block let's type below and pick the version that takes into view. 1:53 Then let's pass in our counter text view and run the app. 2:00 And, yikes! 2:06 It looks like our button's covering up our text view 2:07 though I guess we can see just a sliver of it and 2:11 if we tap the button It does seem to be updating. 2:15 But why isn't our button below our text view? 2:21 Well, this is just one of the tricky parts about using Anko. 2:24 Sometimes things aren't quite what you'd think they are. 2:28 To fix our problem, let's put the cursor on below. 2:32 After I minimize that. 2:38 And then use Command or Ctrl+B to jump to its declaration. 2:40 Here we can see that below is an extension function on the LayoutParams class 2:46 that takes in a view and returns nothing. 2:51 All it does is call addRule on itself. 2:55 while passing in the below constant. 2:58 And the ID of our view parameter. 3:00 So it looks like it's expecting our text view to have an ID. 3:04 Let's close this file and then back in main activity inside our text view, 3:08 let's add a line at the top and set ID = 11 or 3:15 some other positive number that you like. 3:19 Then, let's run the app again and there we go our button's below our text view. 3:24 And if we click on the button, we can see the text view start counting up, awesome. 3:30 Pretty cool, right? 3:37 Instead of having our layout tucked away in an XML file, 3:39 we created it right in the activity and 3:42 we were even able to add our buttons on click listener at the same time. 3:44 It's a lot less code and at least for me it seems a lot less complicated. 3:48 Okay. 3:53 Now before you go there's two more things I should tell you about Anko 3:54 that you won't be seeing in this course. 3:58 And they're both from the very bottom of the Anko docs. 4:00 The first thing is that you need to know about the include tag. 4:03 While Anko does let you get away from XML layouts 4:07 that doesn't mean you can't still use them. 4:10 If you want to use an XML layout with Anko just use the include tag. 4:12 The second thing is the style function 4:16 which is actually called apply recursively now. 4:19 And it's just a way for us to stop repeating ourselves in our layouts. 4:22 We pass in a function and then it calls this function on each view in the layout. 4:26 So if we want every edit text in our layout to have the same text size 4:31 we could pass in this lambda expression to the apply recursively function. 4:35 Then it will call this lambda expression on every view in the layout, and 4:40 when that view is an edit text we'll set its text size to 20f. 4:44 Cool. 4:49 Now that we've seen the power of Anko and the next video we'll look into how all of 4:50 this is possible and then move on to implementing a UI for the solitaire app. 4:53
You need to sign up for Treehouse in order to download course files.Sign up