This course will be retired on June 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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!
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up