This course will be retired on July 14, 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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
In this video we walk through our counter app to see what Anko's up to behind the scenes!
Related Links
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
Okay, so now that we've got a fuzzy
understanding of how this all works,
0:00
let's take a step back and see if we
can make things a little bit clearer.
0:04
Here we are in main activity where
our code that creates the layout.
0:08
It starts with a call
to the relative layout,
0:12
which is an extension
function on activity.
0:14
And, actually, that's all this code is,
just one big function call
0:17
to relative layout, with one parameter
that happens to be another function.
0:22
So inside a relative layout function,
this passed in function will be the init
0:26
parameter, then all we have to do is,
return the result of calling ankoView
0:31
with the relative layout constant and
our init function.
0:36
And, remember, the relativeLayout
constant is just a simple function
0:40
that takes on a context and returns an
instance of underscore relatively layout.
0:43
From here, we call the ankoView method and
0:48
pass along our init function along with
our underscore relativeLayout constant.
0:51
And note that we're calling the version
which is an extension function
0:55
on the activity class.
0:58
So inside this function this
keyword will be an activity.
1:00
Moving on to the end side of the function,
1:05
we start by creating a variable
to hold the context.
1:07
Then we pass this context to our
factory to give us an instance of
1:10
underscore relative layout.
1:14
Next, we call our init
function on our new layout,
1:15
which brings us to the inside
of our init function.
1:19
Inside the init function,
1:22
we start with the call to text view, which
is an extension function on View Manager.
1:24
But, don't worry, I looked into it and
View Manager is an interface that gets
1:29
implemented by relative layout,
so we're good.
1:33
Next, just like with our relative well
function, we're passing in another
1:36
function to our text view function, and
it gets passed in as the init parameter.
1:40
Now we're calling anko view again, but
this time with the text view constant and
1:45
a different init parameter.
1:50
So let's pass those in, and also,
1:51
note that this time we're calling
the View Manager version of ankoView.
1:54
So this key word will be our view manager,
AKA, our relative layout.
1:59
Back inside the ankoView function,
we grab a context and
2:04
use it alongside our factory
function to create a text view.
2:08
Then, we call in it on our text view and
it sets our text view ID to 11,
2:11
its text to 0, and its text size to 24.
2:16
Once that's done,
2:21
we're back in our ankoView function where
we add our TextView to a relative layout.
2:22
Then, we return our TextView, and
2:27
return it again, and then it get sets
to our counter TextView variable.
2:29
After that,
2:34
we march on to the button function where
we again pass in another function.
2:35
Just like last time, we end up calling
ankoView within an init function and
2:40
a view factory, but
this time it's a different init function,
2:44
and the view factory returns buttons.
2:47
So inside ankoView, we grab our context,
create a button using that context, and
2:50
then initialize that button
with our init function,
2:55
which adds on clicklistener to our button.
2:58
Back in ankoView, we then add
our button to a relative layout,
3:00
and then return our button,
and return it again.
3:04
But this time, instead of setting
some variable equal to our button we
3:08
immediately call the lparams
function on our button, and
3:12
again, we pass in another function.
3:15
Inside the lparams function,
we start by creating a relative layout,
3:18
layout params object.
3:22
Then, we call our init function
where we modify the layout params
3:24
to say that this view, our button,
should be below our text view.
3:28
Then we set our buttons layout
param to our newly created and
3:32
initialized layout parameters.
3:36
And, finally, we return our button,
3:39
which brings us to the end of our
relative layouts init function.
3:41
And once that's done, we're back at
the activities ankoView function where we
3:45
add our relative layout for our activity,
and then return our relative layout.
3:49
Then we return it one more time, which
brings us back to the end of our layout.
3:54
That was a lot, but on the plus side,
now we've got an excellent understanding
3:59
of how Anko works, and trust me, this will
make the rest of the course a lot easier.
4:04
Speaking of the rest of the course,
4:10
it's about time that we get
back to our solitaire game.
4:12
I mean, it's pretty cool that we can
see the game in our debug log, but
4:14
what good is a game if you can't play it?
4:18
So, from here on out we'll be focused
on using what we just learned
4:20
to implement the UI for our game.
4:24
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