1 00:00:04,900 --> 00:00:07,600 In the previous video, we created a 2 00:00:07,600 --> 00:00:09,760 button click counter app that increased 3 00:00:09,760 --> 00:00:11,320 the number each time the button was 4 00:00:11,320 --> 00:00:13,420 clicked, and then displayed the results 5 00:00:13,420 --> 00:00:15,580 in a TextView. Now there's a reason 6 00:00:15,580 --> 00:00:16,810 I got you to put a Plain Text 7 00:00:16,810 --> 00:00:19,419 widget in the layout, though. That's the 8 00:00:19,419 --> 00:00:21,489 one here, if we open up the layout and 9 00:00:21,489 --> 00:00:26,529 have a look in Design view - the one here in 10 00:00:26,529 --> 00:00:28,300 the top left hand corner, the editText. 11 00:00:28,300 --> 00:00:30,160 I didn't just add that to make the 12 00:00:30,160 --> 00:00:32,500 challenge more challenging. What we're 13 00:00:32,500 --> 00:00:34,750 going to do is change the app. Instead of 14 00:00:34,750 --> 00:00:36,430 just adding the same text with a 15 00:00:36,430 --> 00:00:38,649 different number, I'm going to allow 16 00:00:38,649 --> 00:00:40,600 you to type text into the editText and 17 00:00:40,600 --> 00:00:42,999 then add it to the list of items in the 18 00:00:42,999 --> 00:00:46,239 TextView. Now you've seen that we can 19 00:00:46,239 --> 00:00:48,160 put text into a TextView, either by 20 00:00:48,160 --> 00:00:50,499 changing its text property or using its 21 00:00:50,499 --> 00:00:52,600 append method, and editText is just 22 00:00:52,600 --> 00:00:54,789 an extended TextView, so it's got the 23 00:00:54,789 --> 00:00:57,190 same properties and functions. So you can 24 00:00:57,190 --> 00:00:58,929 probably guess that we can retrieve the 25 00:00:58,929 --> 00:01:00,969 text from an editText widget by 26 00:01:00,969 --> 00:01:03,159 accessing its text property, and of 27 00:01:03,159 --> 00:01:05,979 course, we used that text property in the 28 00:01:05,979 --> 00:01:08,050 previous video. So let's make a few 29 00:01:08,050 --> 00:01:10,420 changes, now, to the code. I'm gonna go back 30 00:01:10,420 --> 00:01:12,850 to that code in MainActivity and 31 00:01:12,850 --> 00:01:15,340 we're going to start off by deleting the 32 00:01:15,340 --> 00:01:18,490 code here on line 15, and delete that 33 00:01:18,490 --> 00:01:20,940 line. 34 00:01:20,940 --> 00:01:22,780 Now when I do that, 35 00:01:22,780 --> 00:01:25,870 notice how Android Studio now highlights 36 00:01:25,870 --> 00:01:27,370 all the places where it's used in the 37 00:01:27,370 --> 00:01:29,680 code. You can see numTimesClicked now is 38 00:01:29,680 --> 00:01:31,900 undefined, so we get an error every time 39 00:01:31,900 --> 00:01:34,960 we try to use it in the code. And this is 40 00:01:34,960 --> 00:01:37,090 quite interesting that, as I've been 41 00:01:37,090 --> 00:01:38,380 recording this video we've got a new 42 00:01:38,380 --> 00:01:41,170 release of Kotlin. So, if you do see that from 43 00:01:41,170 --> 00:01:42,970 time to time, certainly go ahead and 44 00:01:42,970 --> 00:01:44,380 install it and what I'll do is I'll go 45 00:01:44,380 --> 00:01:45,580 through that process now just to show 46 00:01:45,580 --> 00:01:47,230 you what that looks like. So I've clicked 47 00:01:47,230 --> 00:01:50,110 install and give it a moment, and this is 48 00:01:50,110 --> 00:01:51,520 something that you will see from time to 49 00:01:51,520 --> 00:01:52,540 time. You can see at the moment it's 50 00:01:52,540 --> 00:01:54,550 downloading plugins. As things are 51 00:01:54,550 --> 00:01:56,860 updated, new versions of software comes 52 00:01:56,860 --> 00:01:59,080 out and generally, when you see a pop-up 53 00:01:59,080 --> 00:02:00,820 like that, it's certainly recommended 54 00:02:00,820 --> 00:02:03,370 that you take the new version because 55 00:02:03,370 --> 00:02:05,260 it's usually fixed bugs and added new 56 00:02:05,260 --> 00:02:10,000 features. 57 00:02:10,000 --> 00:02:12,440 Okay, you can see that the update has 58 00:02:12,440 --> 00:02:13,670 gone through and it's asking us to 59 00:02:13,670 --> 00:02:15,620 restart Android Studio to activate the 60 00:02:15,620 --> 00:02:17,270 changes in the plugins. So I'm going to 61 00:02:17,270 --> 00:02:19,220 click on that yes, or click on it I 62 00:02:19,220 --> 00:02:21,170 should say, to say yes to the fact that 63 00:02:21,170 --> 00:02:22,790 we do want that updated. Give that a 64 00:02:22,790 --> 00:02:23,750 moment to restart. 65 00:02:23,750 --> 00:02:25,460 There's Android Studio restarting for us 66 00:02:25,460 --> 00:02:29,410 again, 67 00:02:29,410 --> 00:02:34,350 and we're back to where we were before. 68 00:02:34,350 --> 00:02:36,760 And we also get this message, now that 69 00:02:36,760 --> 00:02:38,170 we've actually gone ahead with the 70 00:02:38,170 --> 00:02:39,970 update. You may or may not get this 71 00:02:39,970 --> 00:02:42,160 message and it's basically saying that the 72 00:02:42,160 --> 00:02:44,680 'plugin version is a newer one. The runtime 73 00:02:44,680 --> 00:02:46,150 library should be updated to avoid 74 00:02:46,150 --> 00:02:48,010 compatibility problems'. And you certainly 75 00:02:48,010 --> 00:02:49,180 do want that to happen so I'm going to 76 00:02:49,180 --> 00:02:52,879 click on Update Runtime. 77 00:02:52,879 --> 00:02:56,189 Okay, so we've restarted now, and as I was 78 00:02:56,189 --> 00:02:57,629 saying that now that we deleted that 79 00:02:57,629 --> 00:03:01,650 line 15, you saw that the number times 80 00:03:01,650 --> 00:03:03,329 clicked is being highlighted in red now, 81 00:03:03,329 --> 00:03:05,579 to indicate that there's a problem now 82 00:03:05,579 --> 00:03:07,909 because that variable is now undefined. 83 00:03:07,909 --> 00:03:10,799 Now over on the right hand side, in 84 00:03:10,799 --> 00:03:12,359 addition to the red showing in the main 85 00:03:12,359 --> 00:03:14,849 text, there's these little red buttons, 86 00:03:14,849 --> 00:03:16,829 little red bars I should say, in 87 00:03:16,829 --> 00:03:18,930 the margin and I'll just move the scroll 88 00:03:18,930 --> 00:03:21,450 bar so you can see that. And these show 89 00:03:21,450 --> 00:03:22,709 that there are problems in the code and 90 00:03:22,709 --> 00:03:24,209 you can see that as I'm hovering over them, 91 00:03:24,209 --> 00:03:26,879 we're actually getting a little 92 00:03:26,879 --> 00:03:28,530 code block show up, showing us where the 93 00:03:28,530 --> 00:03:30,560 problem is and what the actual issue is. 94 00:03:30,560 --> 00:03:32,970 You can see here it says 'Unresolved 95 00:03:32,970 --> 00:03:33,780 reference 96 00:03:33,780 --> 00:03:36,329 numTimesClicked, and that's coming up 97 00:03:36,329 --> 00:03:38,269 because I deleted the declaration and 98 00:03:38,269 --> 00:03:40,379 Android Studio is saying it hasn't got 99 00:03:40,379 --> 00:03:42,090 any idea what numTimesClicked is 100 00:03:42,090 --> 00:03:44,489 anymore, and consequently the code's not 101 00:03:44,489 --> 00:03:46,409 going to compile for that reason. So 102 00:03:46,409 --> 00:03:48,180 really, that's Android Studio trying to 103 00:03:48,180 --> 00:03:50,220 help us so that we don't produce code 104 00:03:50,220 --> 00:03:54,450 with errors. Now if we click on the bar, it 105 00:03:54,450 --> 00:03:56,430 takes you, as you saw there, to the line of 106 00:03:56,430 --> 00:03:58,019 code that's got the error, and that makes 107 00:03:58,019 --> 00:03:59,340 life a lot easier when you're getting 108 00:03:59,340 --> 00:04:01,079 lots of them. And obviously, in this small 109 00:04:01,079 --> 00:04:03,150 snippet of code it wasn't really that 110 00:04:03,150 --> 00:04:05,040 noticeable where, wasn't really that 111 00:04:05,040 --> 00:04:06,480 noticeable that the cursor moved. But if 112 00:04:06,480 --> 00:04:08,359 I move this up to here and then click it, 113 00:04:08,359 --> 00:04:11,220 you can see the text does move to the 114 00:04:11,220 --> 00:04:12,900 area where the problem is, for us to 115 00:04:12,900 --> 00:04:16,320 hopefully sort out. Alright, so what 116 00:04:16,320 --> 00:04:18,389 we're going to do now is remove most of 117 00:04:18,389 --> 00:04:20,639 this, the contents of this onClick 118 00:04:20,639 --> 00:04:23,490 method. So what I'm going to do is remove 119 00:04:23,490 --> 00:04:26,789 the if and actually the entire block of 120 00:04:26,789 --> 00:04:29,550 if code there, the if/else block, in other 121 00:04:29,550 --> 00:04:32,669 words. So I'm going to delete that. I'm gonna 122 00:04:32,669 --> 00:04:35,400 also move up here and delete this line, 123 00:04:35,400 --> 00:04:37,380 this numTimesClicked plus 124 00:04:37,380 --> 00:04:39,810 equals one, and leaving just the textView 125 00:04:39,810 --> 00:04:41,880 line and we're going to change this now. 126 00:04:41,880 --> 00:04:45,180 Instead of having the 'The button got 127 00:04:45,180 --> 00:04:47,010 tapped' and how many times, I'm going to 128 00:04:47,010 --> 00:04:48,510 delete that out but leave the parentheses 129 00:04:48,510 --> 00:04:51,590 there, and within there I'm going to put 130 00:04:51,590 --> 00:04:58,990 userInput?.text. 131 00:04:58,990 --> 00:05:01,610 Now that should work, but what I've done 132 00:05:01,610 --> 00:05:03,560 by deleting the other code is I've also 133 00:05:03,560 --> 00:05:05,240 deleted the code that was adding a line 134 00:05:05,240 --> 00:05:08,240 break between each entry. You might think 135 00:05:08,240 --> 00:05:10,820 you could just add the backslash n to 136 00:05:10,820 --> 00:05:11,480 the text, 137 00:05:11,480 --> 00:05:13,400 but that'll give an error. So if I could try 138 00:05:13,400 --> 00:05:15,520 that, you can see I can come into here, I could 139 00:05:15,520 --> 00:05:18,980 try adding a plus and then backslash n 140 00:05:18,980 --> 00:05:21,560 in double quotes. We actually get an 141 00:05:21,560 --> 00:05:24,500 error here. Now the problem is that the 142 00:05:24,500 --> 00:05:26,810 text property is an editable, not a 143 00:05:26,810 --> 00:05:29,360 string. Now we can check that by holding 144 00:05:29,360 --> 00:05:31,280 down the control key and hovering over 145 00:05:31,280 --> 00:05:32,900 text, or because I'm on a Mac I'm going 146 00:05:32,900 --> 00:05:34,790 to hold down the command key. If I do that, 147 00:05:34,790 --> 00:05:36,770 you can see in here it actually says 148 00:05:36,770 --> 00:05:40,610 that 'public Editable getText. And so 149 00:05:40,610 --> 00:05:42,140 therefore, because it's an editable and 150 00:05:42,140 --> 00:05:44,360 not a string, we can't use a plus to 151 00:05:44,360 --> 00:05:47,750 concatenate a string and an editable, so 152 00:05:47,750 --> 00:05:48,950 what we really need to do is split that 153 00:05:48,950 --> 00:05:51,200 line up into two separate append calls. 154 00:05:51,200 --> 00:05:53,540 So we'll leave that first line as it 155 00:05:53,540 --> 00:05:57,440 was. Then what we'll do is come on to the 156 00:05:57,440 --> 00:05:59,350 next line and we'll put textView 157 00:05:59,350 --> 00:06:03,800 question mark dot append double quotes 158 00:06:03,800 --> 00:06:06,770 and a backslash n. We now no longer get 159 00:06:06,770 --> 00:06:08,030 an error because we're not trying to do 160 00:06:08,030 --> 00:06:10,460 a concatenation. Alright, so they're the 161 00:06:10,460 --> 00:06:12,680 only two changes we need to make now, so 162 00:06:12,680 --> 00:06:14,900 let's run the app and see that it's 163 00:06:14,900 --> 00:06:16,640 still working okay, or confirm that 164 00:06:16,640 --> 00:06:19,520 it does work okay. And I'll just connect 165 00:06:19,520 --> 00:06:21,950 to my device, my emulator then I've got 166 00:06:21,950 --> 00:06:27,770 running. 167 00:06:27,770 --> 00:06:29,479 Alright, so there's our app. So let's 168 00:06:29,479 --> 00:06:31,250 just try deleting that name out that 169 00:06:31,250 --> 00:06:35,389 we've got in there, and I'll put more 170 00:06:35,389 --> 00:06:40,580 my name in there. Click on the button and you 171 00:06:40,580 --> 00:06:42,650 can see that it's successfully added my 172 00:06:42,650 --> 00:06:44,780 name there, into the TextView, and if we 173 00:06:44,780 --> 00:06:50,620 change that now to something else. 174 00:06:50,620 --> 00:06:52,940 Click on the button, and we get 175 00:06:52,940 --> 00:06:56,180 Jean-Paul's name added there as well. So 176 00:06:56,180 --> 00:06:58,639 that's actually working well now. Now you 177 00:06:58,639 --> 00:07:00,199 might use a technique like this to 178 00:07:00,199 --> 00:07:02,930 create a to-do list, for example. Now what 179 00:07:02,930 --> 00:07:05,360 we've got here is a very simple app, but 180 00:07:05,360 --> 00:07:07,580 we've seen how to create the layout, get 181 00:07:07,580 --> 00:07:09,020 a button to do something useful when 182 00:07:09,020 --> 00:07:11,180 it's tapped and also to make a TextView 183 00:07:11,180 --> 00:07:13,789 widget scrollable. Now I've written the 184 00:07:13,789 --> 00:07:15,349 code this way because i think it's easier 185 00:07:15,349 --> 00:07:17,810 to understand, but some aspects of this 186 00:07:17,810 --> 00:07:20,389 code are closer to Java, than to how 187 00:07:20,389 --> 00:07:22,969 you'd write it in Kotlin. In fact, this is 188 00:07:22,969 --> 00:07:24,800 close to the code we'd get if Android 189 00:07:24,800 --> 00:07:28,069 Studio converted the Java for us. Now 190 00:07:28,069 --> 00:07:29,030 we're going to be doing that a little 191 00:07:29,030 --> 00:07:30,590 bit later in the course, because it's a 192 00:07:30,590 --> 00:07:33,409 very useful feature. Kotlin in Android 193 00:07:33,409 --> 00:07:35,780 Studio is still very new, and most of the 194 00:07:35,780 --> 00:07:37,669 code samples you find online at the 195 00:07:37,669 --> 00:07:39,860 moment, will be written in Java. Now 196 00:07:39,860 --> 00:07:41,870 because you can take those Java examples 197 00:07:41,870 --> 00:07:44,000 and get Android Studio to convert them 198 00:07:44,000 --> 00:07:46,639 to Kotlin, that's not a problem. And as 199 00:07:46,639 --> 00:07:48,139 I've said, you can't really write Kotlin 200 00:07:48,139 --> 00:07:49,669 programs for Android without knowing a 201 00:07:49,669 --> 00:07:51,740 little bit about Java anyway, and that's 202 00:07:51,740 --> 00:07:53,360 because the Android framework's currently 203 203 00:07:53,360 --> 00:07:55,460 written in Java, and we have to 204 00:07:55,460 --> 00:07:58,580 use the framework classes in our apps. So 205 00:07:58,580 --> 00:08:00,080 what we're going to do now is make a few 206 00:08:00,080 --> 00:08:02,930 small changes to our code, so that fits 207 00:08:02,930 --> 00:08:04,819 more in line with how Kotlin code should 208 00:08:04,819 --> 00:08:06,830 be written. So the first thing we're 209 00:08:06,830 --> 00:08:08,000 going to do is, we're going to delete 210 00:08:08,000 --> 00:08:10,430 those button and user input properties 211 00:08:10,430 --> 00:08:12,289 that we've declared at the start of the 212 00:08:12,289 --> 00:08:15,680 class. Now even in Java, Button wouldn't 213 00:08:15,680 --> 00:08:17,509 be declared up there. It's only actually 214 00:08:17,509 --> 00:08:19,639 used in the onCreate method, so there's 215 00:08:19,639 --> 00:08:21,380 really no point making it a class level 216 00:08:21,380 --> 00:08:24,289 property. Now what may not be so obvious to 217 00:08:24,289 --> 00:08:26,240 Java programmers, though, is that all three 218 00:08:26,240 --> 00:08:28,550 properties can be converted to local 219 00:08:28,550 --> 00:08:31,969 variables of the oCcreate method. And in case 220 00:08:31,969 --> 00:08:33,349 you're wondering, the reason that 221 00:08:33,349 --> 00:08:35,149 user input and textview are different 222 00:08:35,149 --> 00:08:37,578 buttons, is that they're also used in 223 00:08:37,578 --> 00:08:39,770 the onClick method. So if all three 224 00:08:39,770 --> 00:08:41,479 properties could be converted to local 225 00:08:41,479 --> 00:08:43,370 variables, why am I only going to convert 226 00:08:43,370 --> 00:08:45,560 two of them? Well that's a good question, 227 00:08:45,560 --> 00:08:47,720 and it's also a good opportunity to show 228 00:08:47,720 --> 00:08:49,459 why you want a widget reference to be a 229 00:08:49,459 --> 00:08:51,620 class property, rather than a local 230 00:08:51,620 --> 00:08:53,660 variable. So I'm going to answer this 231 00:08:53,660 --> 00:08:55,850 question a little later. To be clear 232 00:08:55,850 --> 00:08:57,680 though, as our code is at the moment, I 233 00:08:57,680 --> 00:08:59,480 could do the same thing with TextView 234 00:08:59,480 --> 00:09:01,940 as well. The reason I'm not doing that is 235 00:09:01,940 --> 00:09:04,639 going to become clear soon. So I'm going 236 00:09:04,639 --> 00:09:07,430 to delete the userInput as well as the 237 00:09:07,430 --> 00:09:11,120 button. Now by doing that we've got 238 00:09:11,120 --> 00:09:12,920 errors further down. That's because 239 00:09:12,920 --> 00:09:14,690 they're no longer declared, so we just 240 00:09:14,690 --> 00:09:16,519 need to change the assignments into 241 00:09:16,519 --> 00:09:19,250 declarations. So let's go ahead and do 242 00:09:19,250 --> 00:09:21,769 that. So down here on line 18, I'm going 243 00:09:21,769 --> 00:09:25,570 to start by typing val, v a l, userInput 244 00:09:25,570 --> 00:09:29,870 and : EditText. So you can see there, 245 00:09:29,870 --> 00:09:31,910 that removes the first error and for the 246 00:09:31,910 --> 00:09:34,790 next one, we're putting val, v a l, space 247 00:09:34,790 --> 00:09:36,560 button : 248 00:09:36,560 --> 00:09:38,949 and then Button with a capital B, and 249 00:09:38,949 --> 00:09:42,470 both errors are now removed. Now notice 250 00:09:42,470 --> 00:09:44,720 that I've declared them as val rather 251 00:09:44,720 --> 00:09:46,850 than var, and that's because we don't 252 00:09:46,850 --> 00:09:49,130 need them to be writable. Once we've used 253 00:09:49,130 --> 00:09:51,410 findViewById to assign the reference to 254 00:09:51,410 --> 00:09:53,149 the widget, we're not going to change 255 00:09:53,149 --> 00:09:56,089 them. Now because of that, that allows us 256 00:09:56,089 --> 00:09:58,220 to remove the question mark when we set 257 00:09:58,220 --> 00:10:00,680 the button's onClickListener, and also 258 00:10:00,680 --> 00:10:02,899 when we access userInput's text property, 259 00:10:02,899 --> 00:10:04,760 because we're no longer initializing 260 00:10:04,760 --> 00:10:06,709 those values to null. So let's go ahead 261 00:10:06,709 --> 00:10:10,040 and make a change to that now. So firstly, 262 00:10:10,040 --> 00:10:11,839 for the button dot onClickListener line 263 00:10:11,839 --> 00:10:14,510 here, I can change that now to remove the 264 00:10:14,510 --> 00:10:16,370 question mark. It's just going to be 265 00:10:16,370 --> 00:10:18,380 button.setOnClickListener. Then 266 00:10:18,380 --> 00:10:20,540 down here, over where it's got userInput, 267 00:10:20,540 --> 00:10:22,579 now that we've made that a val instead of 268 00:10:22,579 --> 00:10:24,589 var, I can delete the question mark there 269 00:10:24,589 --> 00:10:27,199 as well. And again, we're doing that 270 00:10:27,199 --> 00:10:28,370 because we don't need them to be 271 00:10:28,370 --> 00:10:30,350 writable. Alright, so at this point I'm 272 00:10:30,350 --> 00:10:32,029 going to finish the video. We'll continue 273 00:10:32,029 --> 00:10:34,250 on with working on this in the next 274 00:10:34,250 --> 00:10:36,519 video.