In the previous video, we created a
button click counter app that increased
the number each time the button was
clicked, and then displayed the results
in a TextView. Now there's a reason
I got you to put a Plain Text
widget in the layout, though. That's the
one here, if we open up the layout and
have a look in Design view - the one here in
the top left hand corner, the editText.
I didn't just add that to make the
challenge more challenging. What we're
going to do is change the app. Instead of
just adding the same text with a
different number, I'm going to allow
you to type text into the editText and
then add it to the list of items in the
TextView. Now you've seen that we can
put text into a TextView, either by
changing its text property or using its
append method, and editText is just
an extended TextView, so it's got the
same properties and functions. So you can
probably guess that we can retrieve the
text from an editText widget by
accessing its text property, and of
course, we used that text property in the
previous video. So let's make a few
changes, now, to the code. I'm gonna go back
to that code in MainActivity and
we're going to start off by deleting the
code here on line 15, and delete that
line.
Now when I do that,
notice how Android Studio now highlights
all the places where it's used in the
code. You can see numTimesClicked now is
undefined, so we get an error every time
we try to use it in the code. And this is
quite interesting that, as I've been
recording this video we've got a new
release of Kotlin. So, if you do see that from
time to time, certainly go ahead and
install it and what I'll do is I'll go
through that process now just to show
you what that looks like. So I've clicked
install and give it a moment, and this is
something that you will see from time to
time. You can see at the moment it's
downloading plugins. As things are
updated, new versions of software comes
out and generally, when you see a pop-up
like that, it's certainly recommended
that you take the new version because
it's usually fixed bugs and added new
features.
Okay, you can see that the update has
gone through and it's asking us to
restart Android Studio to activate the
changes in the plugins. So I'm going to
click on that yes, or click on it I
should say, to say yes to the fact that
we do want that updated. Give that a
moment to restart.
There's Android Studio restarting for us
again,
and we're back to where we were before.
And we also get this message, now that
we've actually gone ahead with the
update. You may or may not get this
message and it's basically saying that the
'plugin version is a newer one. The runtime
library should be updated to avoid
compatibility problems'. And you certainly
do want that to happen so I'm going to
click on Update Runtime.
Okay, so we've restarted now, and as I was
saying that now that we deleted that
line 15, you saw that the number times
clicked is being highlighted in red now,
to indicate that there's a problem now
because that variable is now undefined.
Now over on the right hand side, in
addition to the red showing in the main
text, there's these little red buttons,
little red bars I should say, in
the margin and I'll just move the scroll
bar so you can see that. And these show
that there are problems in the code and
you can see that as I'm hovering over them,
we're actually getting a little
code block show up, showing us where the
problem is and what the actual issue is.
You can see here it says 'Unresolved
reference
numTimesClicked, and that's coming up
because I deleted the declaration and
Android Studio is saying it hasn't got
any idea what numTimesClicked is
anymore, and consequently the code's not
going to compile for that reason. So
really, that's Android Studio trying to
help us so that we don't produce code
with errors. Now if we click on the bar, it
takes you, as you saw there, to the line of
code that's got the error, and that makes
life a lot easier when you're getting
lots of them. And obviously, in this small
snippet of code it wasn't really that
noticeable where, wasn't really that
noticeable that the cursor moved. But if
I move this up to here and then click it,
you can see the text does move to the
area where the problem is, for us to
hopefully sort out. Alright, so what
we're going to do now is remove most of
this, the contents of this onClick
method. So what I'm going to do is remove
the if and actually the entire block of
if code there, the if/else block, in other
words. So I'm going to delete that. I'm gonna
also move up here and delete this line,
this numTimesClicked plus
equals one, and leaving just the textView
line and we're going to change this now.
Instead of having the 'The button got
tapped' and how many times, I'm going to
delete that out but leave the parentheses
there, and within there I'm going to put
userInput?.text.
Now that should work, but what I've done
by deleting the other code is I've also
deleted the code that was adding a line
break between each entry. You might think
you could just add the backslash n to
the text,
but that'll give an error. So if I could try
that, you can see I can come into here, I could
try adding a plus and then backslash n
in double quotes. We actually get an
error here. Now the problem is that the
text property is an editable, not a
string. Now we can check that by holding
down the control key and hovering over
text, or because I'm on a Mac I'm going
to hold down the command key. If I do that,
you can see in here it actually says
that 'public Editable getText. And so
therefore, because it's an editable and
not a string, we can't use a plus to
concatenate a string and an editable, so
what we really need to do is split that
line up into two separate append calls.
So we'll leave that first line as it
was. Then what we'll do is come on to the
next line and we'll put textView
question mark dot append double quotes
and a backslash n. We now no longer get
an error because we're not trying to do
a concatenation. Alright, so they're the
only two changes we need to make now, so
let's run the app and see that it's
still working okay, or confirm that
it does work okay. And I'll just connect
to my device, my emulator then I've got
running.
Alright, so there's our app. So let's
just try deleting that name out that
we've got in there, and I'll put more
my name in there. Click on the button and you
can see that it's successfully added my
name there, into the TextView, and if we
change that now to something else.
Click on the button, and we get
Jean-Paul's name added there as well. So
that's actually working well now. Now you
might use a technique like this to
create a to-do list, for example. Now what
we've got here is a very simple app, but
we've seen how to create the layout, get
a button to do something useful when
it's tapped and also to make a TextView
widget scrollable. Now I've written the
code this way because i think it's easier
to understand, but some aspects of this
code are closer to Java, than to how
you'd write it in Kotlin. In fact, this is
close to the code we'd get if Android
Studio converted the Java for us. Now
we're going to be doing that a little
bit later in the course, because it's a
very useful feature. Kotlin in Android
Studio is still very new, and most of the
code samples you find online at the
moment, will be written in Java. Now
because you can take those Java examples
and get Android Studio to convert them
to Kotlin, that's not a problem. And as
I've said, you can't really write Kotlin
programs for Android without knowing a
little bit about Java anyway, and that's
because the Android framework's currently 203
written in Java, and we have to
use the framework classes in our apps. So
what we're going to do now is make a few
small changes to our code, so that fits
more in line with how Kotlin code should
be written. So the first thing we're
going to do is, we're going to delete
those button and user input properties
that we've declared at the start of the
class. Now even in Java, Button wouldn't
be declared up there. It's only actually
used in the onCreate method, so there's
really no point making it a class level
property. Now what may not be so obvious to
Java programmers, though, is that all three
properties can be converted to local
variables of the oCcreate method. And in case
you're wondering, the reason that
user input and textview are different
buttons, is that they're also used in
the onClick method. So if all three
properties could be converted to local
variables, why am I only going to convert
two of them? Well that's a good question,
and it's also a good opportunity to show
why you want a widget reference to be a
class property, rather than a local
variable. So I'm going to answer this
question a little later. To be clear
though, as our code is at the moment, I
could do the same thing with TextView
as well. The reason I'm not doing that is
going to become clear soon. So I'm going
to delete the userInput as well as the
button. Now by doing that we've got
errors further down. That's because
they're no longer declared, so we just
need to change the assignments into
declarations. So let's go ahead and do
that. So down here on line 18, I'm going
to start by typing val, v a l, userInput
and : EditText. So you can see there,
that removes the first error and for the
next one, we're putting val, v a l, space
button :
and then Button with a capital B, and
both errors are now removed. Now notice
that I've declared them as val rather
than var, and that's because we don't
need them to be writable. Once we've used
findViewById to assign the reference to
the widget, we're not going to change
them. Now because of that, that allows us
to remove the question mark when we set
the button's onClickListener, and also
when we access userInput's text property,
because we're no longer initializing
those values to null. So let's go ahead
and make a change to that now. So firstly,
for the button dot onClickListener line
here, I can change that now to remove the
question mark. It's just going to be
button.setOnClickListener. Then
down here, over where it's got userInput,
now that we've made that a val instead of
var, I can delete the question mark there
as well. And again, we're doing that
because we don't need them to be
writable. Alright, so at this point I'm
going to finish the video. We'll continue
on with working on this in the next
video.