Alright, so let's make our code do a
little bit more. Now, currently our layout
contains three widgets. So I'm going to
add some variables to store a reference
to those widgets, so that we can do
things with them in the code. Now at this
point, I should point out that there are
better ways to do what we're about to do,
and you'll be seeing those in the next
section, but it's important to understand
what's really going on when you use
those other techniques. They still do,
basically, what we're about to do here.
The difference is that Kotlin has some
extensions that make coding it all a bit
simpler. So please don't take this next
bit of code as the definitive way to do things.
In Kotlin, there are easier ways to do this,
but I think it's important to understand
what's really going on, so we're going
to do it the quote-unquote longhand way,
if you like, here. Now it's also far easier
to understand what this code's doing,
and that's because there's very little
magic. Now the methods that we'll use
later, and for the rest of the course, do
rely on behind the scenes magic to make
the code simpler, but if I started with that
you wouldn't really know what was
happening under the hood. So we'll go
ahead now and add three lines of code, so
I'm going to start by putting this under
the line 6, under the class Main
Activity line, and I'm gonna start with
private space var space editText space
: then EditText with a capital E, Edit
Text? equals null, making
sure you get your capitalization correct
with this. Next line, private space var
space button: then capital B this
time for Button again, question mark
equals null. Then on the third line,
private var, this time it's textView,
text with a capital V for View colon and a
capital T for TextView, so I'll repeat
that word, question mark equals null.
Alright, so at this point now we've got
three properties. Now editText with a
lowercase e, and you can see that on line
10, well that can store a reference to an
editText widget. And notice that the
capitalization of the
two words there, and that's actually very
important that you do pay attention to
that, to the cases of names in Kotlin.
EditText with a capital E isn't the same
as editText with a lowercase e. Now with
a capital E, EditText is a class, so it
represents the type of object that we're
going to be dealing with. Now if we look
at the import section, up here on the top,
now I'll just scroll up so we can see all the
code, we can see here that EditText
has been added and it's coming from the
android.widget package. So EditText,
effectively, is a widget, and similarly
Button is a button widget and TextView
is a textview widget. Now editText with
a lowercase e is a property that can
store a reference to a widget. We can
create a new widget and refer to it
using the name editText or, and this is
what we'll be doing here, we can find the
editText widget in our layout and
assign it to the editText property, so
that we can refer to the widget that's
been created when the layout was
inflated. Now for some reason, Google
referred to an editText widget in the
designer as Plain Text, but it's typing
code is editText. So we can search the
layout for our Plain Text widget
and refer to it via the field edit
Text, and we can also do the same with a
Button than the TextView as well. So we
come back and open the layout
design view, and if I click on some of
these things here, you see we've got a Text
View there over to the left hand side,
and then a text, we've got Plain Text
there. But essentially, Plain Text is the
editText that we're referring to here.
Alright, and back to our Kotlin class.
Alright, so we've also done the same with
the Button and the TextView, so we've now
got three properties that we've created
here. And incidentally, it's very common
in Kotlin, to give the field the same
name as it's type or class, but with a
lower case initial letter. Now if we had
several editText widgets in the layout,
then we'd have to give them more
meaningful names such as address text
perhaps, or name text and so on, but
as there's only one type of each type
of widget, I'll just use these names for
the Button and the TextView. But just so
there's no confusion though, what I'm going
to do is rename the editText field to user input.
You'll see why in a minute, when we have
the word button three times on the same
line or with different meanings.
So let's just go to line 10 and just change this
editText, and I'm going to change that
to userInput, userInput with a capital
I for Input, the rest in lowercase.
Now another thing to note is that you
have to initialize variables in Kotlin.
Now we don't yet know what values to
assign to these properties, because we
can't look them up in the layout until
after that setContentView function's been
executed. This is the one here on line 16.
Until then there's no layout, which means
that widgets don't yet exist. So therefore,
I'm actually initializing all three
properties to null to start with, in our
declarations on line 10 through 12. So
this means we have to declare them as
nullable types, and that's what the
question mark after the type means.
Alright, so how do we link these fields
up with the widgets in the layout.
Well, the Android framework provides a
method called findViewById, that's
used to check a layout to fetch a widget
with a particular ID from it. Now if you
remember from when we were creating this
interface, we made sure that each widget
had an ID, and we removed the numbers from
the ends in the IDs because they weren't
necessary. It's actually those IDs that
we use when calling findViewById, so
I'm going to type the code in first and
then we'll go through it. So I'm gonna come
down here, below the setContentView line.
I'm going to type in userInput is
equal to findViewById, less than sign,
then EditText with a capital E and a
capital T and a greater than sign. Then
in parentheses we're going to type in
R.id, capital R that was, and
then lowercase id.editText. Press
ENTER there. Then on the next line we're
going to type button equals findViewById
and I can type the less than sign
again, this time it's going to be Button
and a greater than sign. Then in
parentheses, R.id.button, then last
line, textView. Notice as I'm typing, Android
Studio is helpfully trying to give us some
shortcuts, so I could just press ENTER to
select those to save
a bit of time, and less then sign again, Text
View, greater than sign then parentheses
again, R.id.textView. Okay.
So you can see that those three lines
are very similar. They each call the find
ViewById method to find what's called
a view. Now I think I mentioned, in an
earlier video, that all widgets are Views.
So a View in Android is the class that
all widgets extend, so all widgets share
some common behavior, such as being able
to be placed in a layout and having size
etc. But different widgets extend View in
different ways to provide their own
specific functionality. So an editText
is a View that you can type into and a
textView is a View designed for
displaying text, for example. So findView
ById returns a view object, and we have
to tell Kotlin what type we really want
before assigning the results to our
properties. The View with your ID edit
Text is an editText. I'd have to
specify that that is the kind of object
we expected before we can assign it to
the userInput field on line 18, and the
same for button and textView.
So hopefully now, you can see why I renamed
the editText to a userInput now. It
could get very confusing otherwise. Now
on line 19, the first button refers to
the property and button surrounded by
the less than than the greater than sign,
here, well that refers to the type of
object that we want the view to
be treated as, before we can assign it to
the property. And finally, the last user
button over here to the right-hand side,
that refers to the ID of the button that
we used in the layout. Now on line 18,
we can see that they're different things.
There we looked for an EditText widget
with the ID editText, that's with the
edit with a lowercase e, then assigning
the reference to its property called
userInput. Alright, so the last thing
to look at is the way the IDs themselves,
have been specified. Now it's easy to see
how they relate to the IDS we gave to
the widgets in a previous video, but what
is this R dot id dot all about. Well if
you remember, when we set the IDS in the
layout, we used a plus to tell Android Studio that
this is the, this is where the IDs were being
created, and that causes Android Studio
to create a class that it calls R,
capital R, where it stores all the
information on resources in the app. So
in other words, R here is for resources.
Now there's a really cool feature of
Android Studio that lets you jump to
where something's defined, by holding
down the ctrl key, or the command key on
a Mac, when you click the
item. So if I come over here and click on,
and command click the editText, again
control click on a PC, so over here
on line 18,
click on that, you can see I get taken
straight to the XML for the layout where
the editText is defined. Now that's
really useful and we're going to be
using that a lot in this course, to check
out all sorts of things. So what you can
see now, now that I've clicked that, is
that the ID really is referring to the
widget in our layout. Now the R class is
created automatically by Android Studio
to store all resources, as I said, and we
can have a quick look at that. Now I'm
just showing you this to explain what's
going on here and I wouldn't normally
edit the the R class, and you certainly
shouldn't be going about
making any changes to it. And in fact, 249
Android Studio doesn't even show the R
class in the project pane when it's in
Android view. What I'm going to do is
come over here and click on project view,
and once I do that we get some other
options if I expand the window out again,
and what I'm going to do is come down
here because, basically, project view is
giving us a list of all the files in
the project, even the ones we shouldn't
be messing with or changing. So under app,
I'm going to click on app then build,
generated then source then r, lowercase r
there, then debug. These are all files and
folders created automatically by
Android Studio for us. Then we're going to
go into this academy.learn
programming.buttoncounter app. Expand
that out, and here now we've got this R class.
I'm just going to double click that. Now
again, there's no reason for you to edit
this file, and in fact, you can see at the
top there, there's actually a warning that the
file shouldn't be edited.
Now as I scroll through, you can
see there's quite a bit of information
in here, and it really creates all sorts
of things that don't
probably make a lot of sense, and it's
all stuff that Android needs in order to
build the app and to track all the
various components of the application.
Now rather than trying to find the ID
section by scrolling, I'm going to search
for class ID, just doing a search and
typing class space id, and there it is
there, in my case, on line 2694
but it might be a different line
number for you. Now looking through this
class here, contains all sorts of IDs with
the identification numbers that Android
Studio has given them. Now most of these
aren't used so they won't appear in the
final compiled version of the app, but if
we scroll down and have a look here, we
can see that our button's there, button is
there. We've also got an editText
showing here, and we should be able to
see the textViews as well, with a bit of scrolling.
You can see there's a textview there as well.
So these are in a class called ID,
inside another class called R, so
which is why now, when I close this, you can see
now that's why we use - going back to our
class - R.id. then whatever the
name we want to reference. So that's the
reason we're doing that. We're telling
Android Studio where to look to find
that particular reference, and the method
wants the numeric ID, essentially. Alright,
so I have digressed a lot here, but we
were trying to connect the button up to
some code. So let's end the video here,
in the next one, we're going to start work
on doing just that. So I'll see you in the next video.