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.