1
00:00:00,000 --> 00:00:02,422
(electronic jingle)

2
00:00:02,422 --> 00:00:05,130
(typing)

3
00:00:05,130 --> 00:00:07,680
A few videos ago, we looked at different ways

4
00:00:07,680 --> 00:00:11,420
to get references to our widgets from Kotlin code.

5
00:00:11,420 --> 00:00:12,860
So let's review the code again

6
00:00:12,860 --> 00:00:14,950
and quickly go over what we did.

7
00:00:14,950 --> 00:00:18,310
Now, for the first two widgets, the edit text widgets

8
00:00:18,310 --> 00:00:21,540
for the result and the user's input, we used the approach

9
00:00:21,540 --> 00:00:24,530
that would be familiar to Java programmers.

10
00:00:24,530 --> 00:00:27,877
So we declared the properties first on lines 15 and 16,

11
00:00:27,877 --> 00:00:31,520
as you can see here, then called find view by ID

12
00:00:31,520 --> 00:00:34,690
in the on create method to get the references

13
00:00:34,690 --> 00:00:36,600
to the widgets in the layout.

14
00:00:36,600 --> 00:00:38,440
And we had to declare the two properties

15
00:00:38,440 --> 00:00:42,940
as late init, but otherwise that's pretty standard code.

16
00:00:42,940 --> 00:00:45,850
Now, for the display operation text view,

17
00:00:45,850 --> 00:00:48,870
we used a lazy delegate.

18
00:00:48,870 --> 00:00:51,433
This is the code on line 17.

19
00:00:52,810 --> 00:00:56,150
Now, the find view by ID function isn't called

20
00:00:56,150 --> 00:00:59,530
until we first access the display operation property

21
00:00:59,530 --> 00:01:02,530
and it's in cached so that find view by ID

22
00:01:02,530 --> 00:01:04,680
doesn't get called repeatedly.

23
00:01:04,680 --> 00:01:06,720
Now, we had to give Kotlin a hint

24
00:01:06,720 --> 00:01:09,850
so that it knows what type to cast the view to

25
00:01:09,850 --> 00:01:12,710
and we did that by using the diamond operator

26
00:01:12,710 --> 00:01:17,120
to specify text view when calling find view by ID over here,

27
00:01:17,120 --> 00:01:18,403
again on line 17.

28
00:01:19,670 --> 00:01:22,520
Now, Kotlin has a number of extensions for Android

29
00:01:22,520 --> 00:01:25,010
that can simplify this even further,

30
00:01:25,010 --> 00:01:28,410
and one of these lets us effectively import the resources

31
00:01:28,410 --> 00:01:32,460
and then refer to them as normal properties in our code.

32
00:01:32,460 --> 00:01:33,710
First, we have to import

33
00:01:33,710 --> 00:01:36,030
what are called synthetic properties,

34
00:01:36,030 --> 00:01:38,850
and for our activity_main layout,

35
00:01:38,850 --> 00:01:40,460
that's gonna look like the following.

36
00:01:40,460 --> 00:01:44,100
So it's basically below the other imports up here,

37
00:01:44,100 --> 00:01:45,350
we type import

38
00:01:47,324 --> 00:01:52,324
kotlinx.android.synthetic.main.activity_main.*

39
00:02:00,810 --> 00:02:04,090
So after adding that import, all the widgets in our layout

40
00:02:04,090 --> 00:02:06,940
can be accessed just like any other properties

41
00:02:06,940 --> 00:02:09,770
that we imported into our code.

42
00:02:09,770 --> 00:02:12,320
Now, it's easier to fully appreciate that by seeing

43
00:02:12,320 --> 00:02:15,860
it in action, so I'm gonna modify our existing code

44
00:02:15,860 --> 00:02:17,783
to make use of these extension properties.

45
00:02:17,783 --> 00:02:20,930
As I do it, notice that the only thing I'm doing

46
00:02:20,930 --> 00:02:22,750
is deleting code.

47
00:02:22,750 --> 00:02:24,330
And in fact, what I'm gonna do is I'm gonna start

48
00:02:24,330 --> 00:02:27,440
by commenting it out just so you can see how much code

49
00:02:27,440 --> 00:02:29,100
we can remove.

50
00:02:29,100 --> 00:02:31,500
So I'm gonna start by commenting out the three lines

51
00:02:31,500 --> 00:02:34,393
up here, our definitions on line 17 through 19.

52
00:02:37,240 --> 00:02:40,050
And next I'm gonna come down here to the definitions

53
00:02:40,050 --> 00:02:42,410
in the on create function

54
00:02:42,410 --> 00:02:44,730
and I'm effectively going to comment all those out

55
00:02:44,730 --> 00:02:48,683
right down to the button plus definitions,

56
00:02:49,570 --> 00:02:51,160
right down here to the button plus.

57
00:02:51,160 --> 00:02:53,450
I'm going to come up here, including result

58
00:02:53,450 --> 00:02:55,460
and comment all of those out

59
00:02:55,460 --> 00:02:57,663
right down to button plus.

60
00:03:00,010 --> 00:03:03,390
So, we've removed all the properties and local variables

61
00:03:03,390 --> 00:03:04,890
and all the boilerplate code

62
00:03:04,890 --> 00:03:07,410
that just calls find view by ID.

63
00:03:07,410 --> 00:03:09,130
As you can see, in this particular programme,

64
00:03:09,130 --> 00:03:10,900
that's a fair bit of code.

65
00:03:10,900 --> 00:03:13,290
Now, we do have two errors.

66
00:03:13,290 --> 00:03:15,420
That's because we called the text view property

67
00:03:15,420 --> 00:03:20,120
display operation but the ID of the text view is operation.

68
00:03:20,120 --> 00:03:22,883
So we just have to change the old property name

69
00:03:22,883 --> 00:03:26,260
to the correct ID on the two lines that we've got an error.

70
00:03:26,260 --> 00:03:28,160
So first, if I click on the first one,

71
00:03:29,340 --> 00:03:31,310
you can see we've got this display operation,

72
00:03:31,310 --> 00:03:33,490
again I mentioned that the text view name is operation,

73
00:03:33,490 --> 00:03:34,623
so let's change that.

74
00:03:37,540 --> 00:03:38,373
Operation.

75
00:03:40,460 --> 00:03:42,160
And then look at the second error,

76
00:03:43,340 --> 00:03:45,590
display operation again, make that operation.

77
00:03:47,840 --> 00:03:50,340
Now there's two other lines we can remove as well

78
00:03:50,340 --> 00:03:52,943
because if you go back up to the top and have a look,

79
00:03:53,830 --> 00:03:56,160
we've actually got two unused imports,

80
00:03:56,160 --> 00:03:58,890
although Android Studio may have deleted them for you

81
00:03:58,890 --> 00:04:01,900
if you told it to remove unused imports in the settings,

82
00:04:01,900 --> 00:04:05,390
and in my case I have done that, and the two imports

83
00:04:05,390 --> 00:04:08,560
that had been removed are android.widget.textview

84
00:04:08,560 --> 00:04:10,520
and android.widget.edittext.

85
00:04:10,520 --> 00:04:13,480
In my case, you can see they have both been removed

86
00:04:13,480 --> 00:04:14,862
because I've got that setting

87
00:04:14,862 --> 00:04:19,160
to basically remove unused imports automatically.

88
00:04:19,160 --> 00:04:22,130
What I'll do is start my emulator

89
00:04:22,130 --> 00:04:23,340
because we're going to test the app again

90
00:04:23,340 --> 00:04:25,240
just to make sure that it still works.

91
00:04:27,370 --> 00:04:29,660
And it's obviously a good idea in this scenario,

92
00:04:29,660 --> 00:04:31,270
given the changes we've made,

93
00:04:31,270 --> 00:04:33,800
to do a test run just to make that things still work

94
00:04:33,800 --> 00:04:36,000
as they were working before.

95
00:04:36,000 --> 00:04:37,743
So we'll just fast-forward this.

96
00:04:42,290 --> 00:04:44,410
Alright, and we'll just run our app

97
00:04:44,410 --> 00:04:45,823
to make sure it still works.

98
00:04:49,540 --> 00:04:51,210
Alright, so let's try our calculations.

99
00:04:51,210 --> 00:04:56,170
So 25 multiplied by four equals,

100
00:04:56,170 --> 00:05:00,890
and multiplied by three equals, that's 300, that's correct.

101
00:05:00,890 --> 00:05:05,890
Let's now divide it by nine, multiplied by three equals 100.

102
00:05:07,750 --> 00:05:09,840
So that's working fine without all the code

103
00:05:09,840 --> 00:05:11,470
that we've now removed.

104
00:05:11,470 --> 00:05:13,300
Let's just go back to the code

105
00:05:13,300 --> 00:05:15,453
and have a look at how this all works.

106
00:05:16,920 --> 00:05:19,040
So when we added that line, which was on line 10

107
00:05:19,040 --> 00:05:20,680
which is now on line seven, this import,

108
00:05:20,680 --> 00:05:24,987
this kotlinx.android.synthetic.main.activty_main.*

109
00:05:26,930 --> 00:05:29,710
the Kotlin extension plugin creates properties

110
00:05:29,710 --> 00:05:32,620
corresponding to each of the views in the layout.

111
00:05:32,620 --> 00:05:34,050
Now in this case it would import them

112
00:05:34,050 --> 00:05:36,670
from activity_main, because that's the name

113
00:05:36,670 --> 00:05:39,740
that we provided to the import, again on line seven.

114
00:05:39,740 --> 00:05:43,410
Now behind the scenes, Kotlin adds a caching function

115
00:05:43,410 --> 00:05:44,870
to our class.

116
00:05:44,870 --> 00:05:47,430
Now the first time we access one of the properties

117
00:05:47,430 --> 00:05:50,670
by the using the views ID, the caching function calls

118
00:05:50,670 --> 00:05:53,800
find view by ID to get a reference to the view.

119
00:05:53,800 --> 00:05:56,940
It then stores that so subsequent accesses

120
00:05:56,940 --> 00:06:00,930
don't result in further calls to find view by ID.

121
00:06:00,930 --> 00:06:02,870
I think you'd agree that's pretty neat,

122
00:06:02,870 --> 00:06:05,440
'cause we can refer to the views in our layout

123
00:06:05,440 --> 00:06:08,210
without all that boilerplate code that we had before,

124
00:06:08,210 --> 00:06:11,430
all that code that I've now commented out in this class.

125
00:06:11,430 --> 00:06:13,220
Now I'm gonna leave the comments for now

126
00:06:13,220 --> 00:06:15,760
so that they'll appear in the source code for this video

127
00:06:15,760 --> 00:06:17,410
in the resources section.

128
00:06:17,410 --> 00:06:18,820
What I will do is delete the comments

129
00:06:18,820 --> 00:06:20,500
at the start of a future video

130
00:06:20,500 --> 00:06:22,933
before we make any more changes to the code.

131
00:06:23,770 --> 00:06:25,490
Now one thing that we couldn't see

132
00:06:25,490 --> 00:06:28,600
is that Android Studio will add the import for us.

133
00:06:28,600 --> 00:06:31,130
We couldn't see it because we'd already added code

134
00:06:31,130 --> 00:06:33,590
that used the properties, but you'll see the import

135
00:06:33,590 --> 00:06:35,540
being added to our next app.

136
00:06:35,540 --> 00:06:37,890
I'm gonna be using this approach in most places

137
00:06:37,890 --> 00:06:38,970
from now on.

138
00:06:38,970 --> 00:06:40,850
There's at least one bit of code where I won't,

139
00:06:40,850 --> 00:06:43,170
but I'll explain why at the time.

140
00:06:43,170 --> 00:06:45,370
So there are several ways of getting references

141
00:06:45,370 --> 00:06:47,750
to the views or widgets in our layout

142
00:06:47,750 --> 00:06:49,320
from our Kotlin code.

143
00:06:49,320 --> 00:06:51,100
You'll find all ways being used in code

144
00:06:51,100 --> 00:06:53,600
that you'll come across and there's nothing right or wrong

145
00:06:53,600 --> 00:06:55,200
about any of the approaches.

146
00:06:55,200 --> 00:06:58,300
I think this last way results in the simplest code

147
00:06:58,300 --> 00:07:00,770
which is why I'm gonna be using it going forward.

148
00:07:00,770 --> 00:07:02,470
Now if this method wasn't available,

149
00:07:02,470 --> 00:07:06,110
I'd prefer the lazy delicate method wherever possible.

150
00:07:06,110 --> 00:07:08,180
If the widget reference has to be read write,

151
00:07:08,180 --> 00:07:10,340
then late init is the next choice.

152
00:07:10,340 --> 00:07:12,380
And you can only use lazy with val properties,

153
00:07:12,380 --> 00:07:13,810
not with vars.

154
00:07:13,810 --> 00:07:16,430
In the next few videos, we're gonna go back to layouts.

155
00:07:16,430 --> 00:07:19,030
Our calculator doesn't look too good in landscape

156
00:07:19,030 --> 00:07:21,250
and that's because the buttons aren't centred

157
00:07:21,250 --> 00:07:23,760
and we're a bit pushed for space vertically,

158
00:07:23,760 --> 00:07:25,610
so we're gonna look at ways to tidy that up.

159
00:07:25,610 --> 00:07:27,633
So let's work on that in the next video.