1 00:00:00,350 --> 00:00:02,020 We just learned about Anko and 2 00:00:02,020 --> 00:00:05,590 how we can use it to entirely replace our XML layouts. 3 00:00:05,590 --> 00:00:09,680 But before we can create any layouts, we need to create a project. 4 00:00:09,680 --> 00:00:14,260 So let's start a new Android Studio project and name it Solitaire. 5 00:00:16,410 --> 00:00:21,520 Then let's accept all the defaults, and even 6 00:00:21,520 --> 00:00:25,900 though we won't be using any XML, let's let it generate a layout file for now. 7 00:00:32,450 --> 00:00:35,910 Nice, now we need to set up our project with Kotlin. 8 00:00:35,910 --> 00:00:39,270 To do this we first need to have the Kotlin plugin. 9 00:00:39,270 --> 00:00:43,520 So let's go up here to Android Studio, and pick Preferences, or Settings if you're on 10 00:00:43,520 --> 00:00:49,775 Windows and then choose Plugins and let's search for Kotlin. 11 00:00:52,340 --> 00:00:56,530 Then click Browse, pick the Kotlin plugin and hit Install. 12 00:00:57,840 --> 00:01:02,030 And once that's done we'll need to restart Android Studio, so let's do that. 13 00:01:05,490 --> 00:01:09,200 And once we're back with our code, let's click inside MainActivity and 14 00:01:09,200 --> 00:01:13,720 then go up to the Code tab and choose Convert Java File to Kotlin File. 15 00:01:16,790 --> 00:01:18,630 Then, once we sync the project, 16 00:01:20,220 --> 00:01:24,390 we get a little notification letting us know that Kotlin is unconfigured. 17 00:01:24,390 --> 00:01:31,273 So let's click the Configure link, pick Android with Gradle and then hit OK. 18 00:01:33,628 --> 00:01:38,274 And now Android Studio has made some small changes to both of our build.gradle files 19 00:01:38,274 --> 00:01:40,370 to support Kotlin. 20 00:01:40,370 --> 00:01:46,060 So let's sync our project one more time, and we're ready to move on to Anko. 21 00:01:46,060 --> 00:01:49,900 But before we do, there's something else we need to talk about first, and 22 00:01:49,900 --> 00:01:52,665 that is Kotlin Android extensions. 23 00:01:52,665 --> 00:01:58,510 Kotlin Android extensions is just another way around that pesky findViewByID method. 24 00:01:58,510 --> 00:02:01,450 It's kind of like Butter Knife but better. 25 00:02:01,450 --> 00:02:05,220 To see how we can use these extensions, let's quickly make a counting app 26 00:02:05,220 --> 00:02:08,790 with a textView to show the count, and a button to increment the count. 27 00:02:10,150 --> 00:02:16,992 Let's head over to our layout, And start with the textView. 28 00:02:24,459 --> 00:02:28,282 First let's give our textView an ID of counterTextView. 29 00:02:35,829 --> 00:02:41,788 Then lets set the starting text to 0, 30 00:02:41,788 --> 00:02:46,265 and the textSize to 24sp. 31 00:02:46,265 --> 00:02:50,128 And since we're not really concerned with the layout, let's leave it at that. 32 00:02:50,128 --> 00:02:55,193 Next let's create a button element below our textView, 33 00:02:55,193 --> 00:03:00,060 and set its width and height to wrap_content as well. 34 00:03:02,190 --> 00:03:04,423 Then let's give it an ID of counterButton. 35 00:03:10,460 --> 00:03:15,118 And then since this is a relative layout, let's add the layout below property. 36 00:03:20,158 --> 00:03:24,989 And set it equal to @idcounterTextview. 37 00:03:24,989 --> 00:03:27,480 All right, that does it for the lab. 38 00:03:27,480 --> 00:03:30,910 Now let's head over to our app's build.gradle file and 39 00:03:30,910 --> 00:03:35,110 at the top, let's apply the Kotlin Android extensions plug-in. 40 00:03:35,110 --> 00:03:36,318 It's in the teacher's notes as well. 41 00:03:46,059 --> 00:03:50,853 Then let's sync the project, and get back to MainActivity to make the magic happen. 42 00:03:53,269 --> 00:03:56,907 Let's add a space below setContentView, and 43 00:03:56,907 --> 00:04:00,367 then let's start typing our button's ID. 44 00:04:03,418 --> 00:04:06,670 And once we've got it, let's hit Enter to add the import statement. 45 00:04:07,970 --> 00:04:11,380 And that's it, we've already got access to our button and 46 00:04:11,380 --> 00:04:13,060 we barely even did anything. 47 00:04:14,060 --> 00:04:18,110 Thanks to the Kotlin Android extensions, we can just import our views and 48 00:04:18,110 --> 00:04:20,230 start using them right away. 49 00:04:20,230 --> 00:04:23,992 So now that we've got our button, let's add an onClick listener, 50 00:04:23,992 --> 00:04:25,450 .setOnClickListener. 51 00:04:27,770 --> 00:04:31,500 And another cool thing about Kotlin is that instead of the regular process for 52 00:04:31,500 --> 00:04:35,000 creating an onClickListener we can take advantage of lambdas 53 00:04:35,000 --> 00:04:36,350 to save us from all that typing. 54 00:04:37,540 --> 00:04:41,215 Inside the onClickListener, we need to increment our counter by one, and 55 00:04:41,215 --> 00:04:43,280 then update the textView. 56 00:04:43,280 --> 00:04:48,735 So first, let's create a var for our counter and set it equal to 0. 57 00:04:52,330 --> 00:04:56,455 Then inside the OnClickListener, let's increment our counter by one, 58 00:04:56,455 --> 00:05:00,970 counter++. 59 00:05:00,970 --> 00:05:07,096 And then set counterTextView.text 60 00:05:07,096 --> 00:05:12,080 = counter.toString. 61 00:05:12,080 --> 00:05:14,033 Now, let's run the app and see what happens. 62 00:05:16,269 --> 00:05:20,800 And just like we expected, we've got a TextView and a button. 63 00:05:20,800 --> 00:05:24,500 And when we click on the button, the number goes up, awesome! 64 00:05:26,105 --> 00:05:28,690 Kotlin Android extensions take a lot of the headache out of 65 00:05:28,690 --> 00:05:29,430 dealing with our views. 66 00:05:29,430 --> 00:05:32,320 And there are great tool to have in your tool belt. 67 00:05:32,320 --> 00:05:33,760 But now that we've got that covered, 68 00:05:33,760 --> 00:05:37,552 let's get back on track to create an app without XML layouts using Anko.