1
00:00:00,140 --> 00:00:02,501
(relaxing, futuristic music)

2
00:00:02,501 --> 00:00:05,220
(keyboard typing)

3
00:00:05,220 --> 00:00:06,770
In the previous videos,

4
00:00:06,770 --> 00:00:09,077
we created the layout for the calculator app,

5
00:00:09,077 --> 00:00:11,480
and we saw it running on an emulator.

6
00:00:11,480 --> 00:00:13,360
Now, it looked fine on my screen when I ran it,

7
00:00:13,360 --> 00:00:14,650
but if you're having problems,

8
00:00:14,650 --> 00:00:18,260
you might be struggling to work out exactly what's wrong.

9
00:00:18,260 --> 00:00:20,680
If you missed a step while we were creating the layout,

10
00:00:20,680 --> 00:00:23,300
it can be difficult to tell from the screen

11
00:00:23,300 --> 00:00:25,180
what bit may be missing,

12
00:00:25,180 --> 00:00:26,230
and if the whole widget

13
00:00:26,230 --> 00:00:28,070
then you probably spot it quite easily,

14
00:00:28,070 --> 00:00:30,040
but trying to work out all the constraints

15
00:00:30,040 --> 00:00:32,740
by comparing the image on my screen with yours

16
00:00:32,740 --> 00:00:35,010
isn't very easy and intuitive.

17
00:00:35,010 --> 00:00:35,890
There is a better way,

18
00:00:35,890 --> 00:00:39,960
and that's to compare the XML files produced for the layout.

19
00:00:39,960 --> 00:00:43,390
Now, Android Studio has a built in diff tool,

20
00:00:43,390 --> 00:00:46,310
and that's a tool that allows you to compare files

21
00:00:46,310 --> 00:00:49,340
with the computer doing most of the work.

22
00:00:49,340 --> 00:00:50,780
Now these tend to work best

23
00:00:50,780 --> 00:00:53,500
when the contents of the files you're comparing

24
00:00:53,500 --> 00:00:55,400
are in roughly the right order.

25
00:00:55,400 --> 00:00:57,130
So after completing layouts in the course,

26
00:00:57,130 --> 00:01:00,950
make sure the order of your widgets in the component tree

27
00:01:00,950 --> 00:01:04,120
matches mine, and you can see that on the screen there.

28
00:01:04,120 --> 00:01:06,340
Now I did add another couple of widgets

29
00:01:06,340 --> 00:01:07,350
to the top of the layout

30
00:01:07,350 --> 00:01:10,170
since I last reordered the component tree,

31
00:01:10,170 --> 00:01:11,510
so check the order of the tree,

32
00:01:11,510 --> 00:01:14,280
and move them back near the top if necessary.

33
00:01:14,280 --> 00:01:16,510
And you can see we've got the result, operation,

34
00:01:16,510 --> 00:01:19,710
newNumber, the buttons zero through nine,

35
00:01:19,710 --> 00:01:21,970
then we've got divide, multiply, minus,

36
00:01:21,970 --> 00:01:24,183
plus, dot and equals buttons.

37
00:01:25,090 --> 00:01:27,687
Now, it's also a good idea to reformat your code.

38
00:01:27,687 --> 00:01:31,040
And this applies whether it's XML or programme code

39
00:01:31,040 --> 00:01:32,590
that you wanna compare.

40
00:01:32,590 --> 00:01:34,830
Formatting the code in a standard way

41
00:01:34,830 --> 00:01:37,600
makes it much easier to use differencing tools

42
00:01:37,600 --> 00:01:39,690
to spot differences.

43
00:01:39,690 --> 00:01:42,210
So to do that, and I did show you this in the last video,

44
00:01:42,210 --> 00:01:46,670
but click on Text, and come up here to the Code Menu,

45
00:01:46,670 --> 00:01:48,780
and select Reformat Code.

46
00:01:48,780 --> 00:01:50,847
That's how you go about actually doing it,

47
00:01:50,847 --> 00:01:52,530
but you can see I've got a little popup here

48
00:01:52,530 --> 00:01:54,620
saying my code, or content rather,

49
00:01:54,620 --> 00:01:56,303
is already properly formatted.

50
00:01:57,490 --> 00:01:58,750
Alright, so I've already got a copy

51
00:01:58,750 --> 00:02:01,403
of this layout file on my computer.

52
00:02:01,403 --> 00:02:02,236
And what I'm gonna do,

53
00:02:02,236 --> 00:02:03,197
I'm gonna close down the landscape one,

54
00:02:03,197 --> 00:02:05,850
and I'm gonna be dealing with the portrait one,

55
00:02:05,850 --> 00:02:07,980
so we're gonna be testing and comparing that one.

56
00:02:07,980 --> 00:02:10,443
So, I've already got a copy like I said.

57
00:02:11,550 --> 00:02:13,670
So to start the comparison tool,

58
00:02:13,670 --> 00:02:16,250
you want to expand the project pane,

59
00:02:16,250 --> 00:02:18,850
and find the file that you wanna check.

60
00:02:18,850 --> 00:02:22,290
So I'm using the portrait activity_main.xml subset,

61
00:02:22,290 --> 00:02:25,600
so I can come down here and open up the layout.

62
00:02:25,600 --> 00:02:28,697
Down here, the activity_main.xml is the one we want.

63
00:02:28,697 --> 00:02:32,570
Then when I select the file in the project pane,

64
00:02:32,570 --> 00:02:34,350
you can actually see the path up here,

65
00:02:34,350 --> 00:02:36,340
displayed just above the pane.

66
00:02:36,340 --> 00:02:38,730
So within the calculator project,

67
00:02:38,730 --> 00:02:42,380
this activity_main.xml can be found in

68
00:02:42,380 --> 00:02:46,630
app, src, main, res, layout.

69
00:02:46,630 --> 00:02:47,463
That's the folder,

70
00:02:47,463 --> 00:02:50,690
and obviously the name is activity_main.xml.

71
00:02:50,690 --> 00:02:53,540
Now, you'll need to know that path within the project

72
00:02:53,540 --> 00:02:56,120
when you come to compare files in different projects,

73
00:02:56,120 --> 00:03:00,490
such as your copy with the files in my source code.

74
00:03:00,490 --> 00:03:02,600
For now, though, I'm gonna compare this layout

75
00:03:02,600 --> 00:03:04,860
with another copy that I've already stored

76
00:03:04,860 --> 00:03:06,860
on this computer's hard drive.

77
00:03:06,860 --> 00:03:10,180
So I'm gonna select activity.xml in the project pane,

78
00:03:10,180 --> 00:03:11,810
over here, which is selected,

79
00:03:11,810 --> 00:03:14,243
and I'm going to then come up to the View menu,

80
00:03:15,170 --> 00:03:16,693
and click on Compare With.

81
00:03:19,650 --> 00:03:22,350
When I do that, I get a popup up here.

82
00:03:22,350 --> 00:03:25,014
And by the way, the shortcut key for that is

83
00:03:25,014 --> 00:03:28,770
Ctrl + D on a PC or Linux, or Command + D on a Mac.

84
00:03:28,770 --> 00:03:30,820
So this is the file picker dialogue,

85
00:03:30,820 --> 00:03:33,330
and I can use that to navigate to the other file,

86
00:03:33,330 --> 00:03:34,900
so one that I wanna compare to

87
00:03:34,900 --> 00:03:36,707
this projects activity_main.xml.

88
00:03:38,241 --> 00:03:40,540
So in my case, I've actually stored it on my desktop,

89
00:03:40,540 --> 00:03:42,663
so I'm going to click on there, activity_main_compare_1,

90
00:03:44,970 --> 00:03:45,913
and click on Open.

91
00:03:46,960 --> 00:03:49,500
Now once I've done that, I've chose the second file,

92
00:03:49,500 --> 00:03:51,730
you can see that the diff tool has started up

93
00:03:51,730 --> 00:03:55,150
with the two files displayed side by side.

94
00:03:55,150 --> 00:03:57,250
Now the top right of the window

95
00:03:57,250 --> 00:03:59,370
shows me how many differences there are

96
00:03:59,370 --> 00:04:00,870
between the two files,

97
00:04:00,870 --> 00:04:02,220
and you can see in this particular case,

98
00:04:02,220 --> 00:04:04,180
it says no differences.

99
00:04:04,180 --> 00:04:07,220
And over here, it says contents are identical.

100
00:04:07,220 --> 00:04:09,050
Now, most of the window is taken up

101
00:04:09,050 --> 00:04:11,500
with the two files side by side,

102
00:04:11,500 --> 00:04:14,830
with matching lines aligned as far as possible.

103
00:04:14,830 --> 00:04:17,850
Now, because there are no differences in these two files,

104
00:04:17,850 --> 00:04:19,820
everything lines up perfectly,

105
00:04:19,820 --> 00:04:21,500
and I can actually scroll the text up and down

106
00:04:21,500 --> 00:04:24,470
to check that all out. And you can see as I do that,

107
00:04:24,470 --> 00:04:26,783
we're getting a representation of both files.

108
00:04:30,100 --> 00:04:33,140
Now, on the toolbar at the top is a button

109
00:04:33,140 --> 00:04:34,910
that collapses identical sections,

110
00:04:34,910 --> 00:04:37,830
so that you can focus on just the bits that are different.

111
00:04:37,830 --> 00:04:39,930
And that's this tool over here.

112
00:04:39,930 --> 00:04:41,940
Now because these files are the same,

113
00:04:41,940 --> 00:04:43,480
it collapses them both completely,

114
00:04:43,480 --> 00:04:45,960
but we'll see it again when there are differences.

115
00:04:45,960 --> 00:04:47,750
But I'm gonna click it again there anyway,

116
00:04:47,750 --> 00:04:50,050
and you can see by doing that there's no text,

117
00:04:50,050 --> 00:04:52,250
there's no XML showing anymore.

118
00:04:52,250 --> 00:04:54,880
Again, because it's only showing what is different,

119
00:04:54,880 --> 00:04:57,410
in this case, the two files are identical.

120
00:04:57,410 --> 00:04:59,450
Now next to that is another button,

121
00:04:59,450 --> 00:05:03,440
and this button synchronises the scrolling of the two files.

122
00:05:03,440 --> 00:05:05,880
You can turn that off if you wanna scroll one file

123
00:05:05,880 --> 00:05:07,470
without the other one following it,

124
00:05:07,470 --> 00:05:09,560
and that can be useful if you're comparing blocks

125
00:05:09,560 --> 00:05:12,750
that are in different places in the file.

126
00:05:12,750 --> 00:05:15,370
Now with this diff tool, we have to do that manually,

127
00:05:15,370 --> 00:05:17,870
and differences in methods that appear in a different place

128
00:05:17,870 --> 00:05:21,070
in each file aren't highlighted for you.

129
00:05:21,070 --> 00:05:23,000
And next to that as we go over is the cog,

130
00:05:23,000 --> 00:05:24,660
which is the settings button,

131
00:05:24,660 --> 00:05:27,387
which you can turn on line numbering if it isn't already on.

132
00:05:27,387 --> 00:05:30,970
And it's also useful just to disable code inspections

133
00:05:30,970 --> 00:05:33,453
from the highlight level sub menu, you can click on that,

134
00:05:33,453 --> 00:05:36,660
and you can see the various options we've got in there.

135
00:05:36,660 --> 00:05:39,250
Now code inspections are the warning and error messages

136
00:05:39,250 --> 00:05:40,830
that appear in the margins,

137
00:05:40,830 --> 00:05:44,144
and with these files, lines two, three and four,

138
00:05:44,144 --> 00:05:46,320
and if I just open it up again.

139
00:05:46,320 --> 00:05:48,700
So with these files, lines two, three and four

140
00:05:48,700 --> 00:05:50,380
are showing in red in the right-hand pane,

141
00:05:50,380 --> 00:05:53,470
and I can actually come over here and click on that.

142
00:05:53,470 --> 00:05:55,390
Three errors found.

143
00:05:55,390 --> 00:05:56,410
So that can be distracting

144
00:05:56,410 --> 00:05:58,680
when you're trying to look for differences in the file,

145
00:05:58,680 --> 00:06:00,400
so I tend to disable the inspections

146
00:06:00,400 --> 00:06:02,510
by choosing syntax from that menu.

147
00:06:02,510 --> 00:06:05,150
So I'm coming over here, Highlighting Level

148
00:06:05,150 --> 00:06:06,423
and choosing Syntax.

149
00:06:07,660 --> 00:06:09,320
Which was already selected, but if we go back

150
00:06:09,320 --> 00:06:11,570
and click on Highlighting Level to Inspections,

151
00:06:11,570 --> 00:06:14,150
you see there's three lines that I'm referring to in red.

152
00:06:14,150 --> 00:06:16,450
So again, I'm going to just come over here,

153
00:06:16,450 --> 00:06:18,343
Highlighting Level, Syntax.

154
00:06:20,114 --> 00:06:22,520
Alright, so that's about all we can see with these files.

155
00:06:22,520 --> 00:06:23,353
And it is a bit boring

156
00:06:23,353 --> 00:06:25,520
when the files are identical after all,

157
00:06:25,520 --> 00:06:28,420
but I have got another file that I didn't reformat,

158
00:06:28,420 --> 00:06:29,860
and also that the widgets are in

159
00:06:29,860 --> 00:06:32,280
a different order in the component tree,

160
00:06:32,280 --> 00:06:33,690
so let's have a look at comparing files

161
00:06:33,690 --> 00:06:36,040
that differ markedly.

162
00:06:36,040 --> 00:06:37,663
So I'm going to close this down,

163
00:06:39,330 --> 00:06:42,340
I'm gonna make sure that activity_main is selected,

164
00:06:42,340 --> 00:06:44,513
View Menu, Compare With,

165
00:06:45,685 --> 00:06:47,120
and this time, I'm gonna select the

166
00:06:47,120 --> 00:06:51,550
activity_main_compare_2.xml.

167
00:06:51,550 --> 00:06:52,383
Click on Open.

168
00:06:53,770 --> 00:06:55,510
So we've got a completely different setup here,

169
00:06:55,510 --> 00:06:58,580
and it in fact is showing 39 differences.

170
00:06:58,580 --> 00:07:00,580
So this is one reason why I recommend

171
00:07:00,580 --> 00:07:03,220
that you use the code reformat code option,

172
00:07:03,220 --> 00:07:05,390
and make sure that your widgets are in the same order

173
00:07:05,390 --> 00:07:08,640
as mine before using this tool to compare your code

174
00:07:08,640 --> 00:07:11,510
to the source you can download from the resources.

175
00:07:11,510 --> 00:07:13,600
Now, one of the things that reformatting the code does

176
00:07:13,600 --> 00:07:17,600
is order the XML attributes in a consistent way,

177
00:07:17,600 --> 00:07:21,340
so the first attribute is always the ID, for example.

178
00:07:21,340 --> 00:07:23,560
And you can see in the left-hand pane

179
00:07:23,560 --> 00:07:27,520
that the IDs here for every widget starts with an ID,

180
00:07:27,520 --> 00:07:29,300
we've got the EditText and the TextView there,

181
00:07:29,300 --> 00:07:33,230
but in the right-hand side file, that's not really the case,

182
00:07:33,230 --> 00:07:35,320
there's no such pat, in other words.

183
00:07:35,320 --> 00:07:36,820
And as I scroll through the document,

184
00:07:36,820 --> 00:07:38,700
it's very hard to see what's happening,

185
00:07:38,700 --> 00:07:40,567
and what the important differences are.

186
00:07:40,567 --> 00:07:44,470
And in fact, this probably isn't gonna help us much at all.

187
00:07:44,470 --> 00:07:47,780
Now, if I'd reformatted the code in that second file,

188
00:07:47,780 --> 00:07:49,140
and made sure that the widgets

189
00:07:49,140 --> 00:07:51,290
were in the same order as my code,

190
00:07:51,290 --> 00:07:54,530
then the differences would actually be much easier to spot.

191
00:07:54,530 --> 00:07:56,530
So I'm gonna close this window down

192
00:07:56,530 --> 00:07:59,840
and do a comparison with a formatted file.

193
00:07:59,840 --> 00:08:00,673
And the same deal,

194
00:08:00,673 --> 00:08:05,410
I'm going to select activity_main in the project pane,

195
00:08:05,410 --> 00:08:07,890
View, Compare With,

196
00:08:07,890 --> 00:08:09,590
this time I'm gonna select another file,

197
00:08:09,590 --> 00:08:14,253
this is activity_main_compare_3.xml, open that.

198
00:08:16,240 --> 00:08:17,410
And initially it looks worse,

199
00:08:17,410 --> 00:08:20,340
it says that there's actually 55 differences.

200
00:08:20,340 --> 00:08:21,890
But now the ordering of the widgets

201
00:08:21,890 --> 00:08:24,900
and the XML attributes have been sorted out,

202
00:08:24,900 --> 00:08:27,600
it's going to be much easier to spot the differences.

203
00:08:27,600 --> 00:08:29,160
Now firstly, we can see that

204
00:08:29,160 --> 00:08:33,179
the EditText in the second file has a different ID.

205
00:08:33,179 --> 00:08:36,539
Now the inputType on line 22,

206
00:08:36,539 --> 00:08:38,450
you can see that's slightly different as well.

207
00:08:38,450 --> 00:08:41,270
We've got numberDecimal pipe numberSigned,

208
00:08:41,270 --> 00:08:44,830
compared to numberSigned pipe numberDecimal.

209
00:08:44,830 --> 00:08:47,180
So that's fine, and we can ignore that one.

210
00:08:47,180 --> 00:08:48,580
But the operation TextView,

211
00:08:48,580 --> 00:08:50,740
if we just scroll down a little bit more.

212
00:08:50,740 --> 00:08:52,270
Well that's also got a few differences,

213
00:08:52,270 --> 00:08:53,320
you can see here that

214
00:08:54,190 --> 00:08:56,570
for the operation on the right-hand side,

215
00:08:56,570 --> 00:08:59,360
we're using 16dp for the various margins,

216
00:08:59,360 --> 00:09:03,550
and the TextView for operation on the left is using 8dp.

217
00:09:03,550 --> 00:09:04,383
And in addition,

218
00:09:04,383 --> 00:09:06,880
it's got a text properly set to a plus symbol,

219
00:09:06,880 --> 00:09:09,920
and we haven't got that text attribute used at all

220
00:09:09,920 --> 00:09:11,390
on the left-hand side.

221
00:09:11,390 --> 00:09:14,090
And its constraints are also slightly different.

222
00:09:14,090 --> 00:09:19,090
Now remember that End_toEndOf is the same as Right_toRightOf

223
00:09:19,120 --> 00:09:20,580
when dealing with constraints,

224
00:09:20,580 --> 00:09:23,400
so it turns out those differences aren't important.

225
00:09:23,400 --> 00:09:26,600
But older versions of Android Studio use left and right,

226
00:09:26,600 --> 00:09:29,710
while Android Studio 3 currently uses start and end.

227
00:09:29,710 --> 00:09:32,290
Of course, that could still change in the future.

228
00:09:32,290 --> 00:09:35,810
Now, these older versions also use the layouts ID,

229
00:09:35,810 --> 00:09:39,960
which is the @+id/activity_main,

230
00:09:39,960 --> 00:09:42,780
and that's actually the same as parent.

231
00:09:42,780 --> 00:09:44,530
You got parent down here you can see,

232
00:09:44,530 --> 00:09:47,320
compared, this is on line 37 on the left,

233
00:09:47,320 --> 00:09:49,730
compared to the use of the actual

234
00:09:51,751 --> 00:09:56,190
the @+id/activity_main on line 39 on the right-hand side.

235
00:09:56,190 --> 00:09:57,650
And again, that's the same as parent,

236
00:09:57,650 --> 00:10:00,040
because the layout is the parent of our widgets.

237
00:10:00,040 --> 00:10:02,700
So we can ignore those differences as well.

238
00:10:02,700 --> 00:10:05,240
So let's move on a little bit now, look at the next one.

239
00:10:05,240 --> 00:10:07,440
And I'm gonna come over here

240
00:10:07,440 --> 00:10:09,120
and click that,

241
00:10:09,120 --> 00:10:11,900
so that I can actually scroll both of them at the same time.

242
00:10:11,900 --> 00:10:14,250
So if we have a look at this next EditText now,

243
00:10:15,434 --> 00:10:17,310
the one that's showing here on the left.

244
00:10:17,310 --> 00:10:20,730
Now this next EditText widget is just about the same.

245
00:10:20,730 --> 00:10:22,180
The only differences are those

246
00:10:22,180 --> 00:10:24,660
input types that we talked about.

247
00:10:24,660 --> 00:10:27,370
This is on line 48 on the left-hand side,

248
00:10:27,370 --> 00:10:29,343
and line 52 on the right-hand side,

249
00:10:30,191 --> 00:10:33,470
And there's also a top margin in the left-hand file.

250
00:10:33,470 --> 00:10:36,700
So this is the sort of thing you could easily miss

251
00:10:36,700 --> 00:10:39,310
if you compare the files manually.

252
00:10:39,310 --> 00:10:41,520
Now, the 10 buttons that follow have some differences,

253
00:10:41,520 --> 00:10:42,353
and I can just scroll down

254
00:10:42,353 --> 00:10:44,440
and we can start looking at some of those.

255
00:10:44,440 --> 00:10:45,780
The ones on the right, if you have a look,

256
00:10:45,780 --> 00:10:48,540
you'll see that they've all got their minimum height set,

257
00:10:48,540 --> 00:10:50,620
as well as minimum width.

258
00:10:50,620 --> 00:10:53,120
And we haven't got minimum height showing

259
00:10:53,120 --> 00:10:55,610
on the left-hand side, only minimum width.

260
00:10:55,610 --> 00:10:59,140
So using a tool like this makes it much easier to spot

261
00:10:59,140 --> 00:11:01,890
problems in code when you've got a working version

262
00:11:01,890 --> 00:11:03,940
to compare your code to.

263
00:11:03,940 --> 00:11:05,750
Now, as long as you're careful

264
00:11:05,750 --> 00:11:07,520
and watch carefully what you're doing,

265
00:11:07,520 --> 00:11:09,100
it's possible to edit these files

266
00:11:09,100 --> 00:11:11,800
from actually inside this difference tool.

267
00:11:11,800 --> 00:11:14,770
To make it easier, the tool provides buttons

268
00:11:14,770 --> 00:11:17,680
that will automatically synchronise lines.

269
00:11:17,680 --> 00:11:21,480
Now you can either transfer the left-hand code to the right,

270
00:11:21,480 --> 00:11:23,760
or the right-hand code to the left.

271
00:11:23,760 --> 00:11:26,120
Now normally you'd probably go from right to left,

272
00:11:26,120 --> 00:11:28,900
because the left-hand side is the file in your project,

273
00:11:28,900 --> 00:11:30,770
and you probably wouldn't be checking for differences

274
00:11:30,770 --> 00:11:32,370
unless you've got a problem in your code.

275
00:11:32,370 --> 00:11:34,560
So in other words, you probably wouldn't be wanting

276
00:11:34,560 --> 00:11:37,763
to update anything but the file that's in your project.

277
00:11:38,800 --> 00:11:42,010
Now, I'm only going to do this to show you how it works,

278
00:11:42,010 --> 00:11:44,190
and I don't wanna mess up my project file,

279
00:11:44,190 --> 00:11:45,860
so I'm going to send the code for the left

280
00:11:45,860 --> 00:11:47,860
over to the right, but bear in mind

281
00:11:47,860 --> 00:11:50,690
that you'd normally probably sending code from the right,

282
00:11:50,690 --> 00:11:53,490
which would be the file that you've downloaded to compare

283
00:11:53,490 --> 00:11:54,990
the one on the left-hand side.

284
00:11:56,040 --> 00:11:58,520
So I'm gonna synchronise all the constraints settings

285
00:11:58,520 --> 00:12:00,650
for the 10 buttons on the right,

286
00:12:00,650 --> 00:12:03,570
by copying the settings from the left.

287
00:12:03,570 --> 00:12:06,640
Now in the centre margin where the line numbers are,

288
00:12:06,640 --> 00:12:08,230
there's actually a little button,

289
00:12:08,230 --> 00:12:12,100
you can see this little, two greater than signs.

290
00:12:12,100 --> 00:12:14,830
And that synchronises the section to the right.

291
00:12:14,830 --> 00:12:16,700
And there's another one this side,

292
00:12:16,700 --> 00:12:18,340
which will go the other way.

293
00:12:18,340 --> 00:12:20,920
So when I click over here on button zero,

294
00:12:20,920 --> 00:12:22,623
this little button,

295
00:12:23,910 --> 00:12:25,817
we get this warning about the file

296
00:12:25,817 --> 00:12:27,200
not being part of the project,

297
00:12:27,200 --> 00:12:28,540
but that's normal, and as I said,

298
00:12:28,540 --> 00:12:29,720
you'd normally be going the other way

299
00:12:29,720 --> 00:12:31,200
and you wouldn't be getting that.

300
00:12:31,200 --> 00:12:34,223
So once I click OK for that,

301
00:12:35,260 --> 00:12:37,760
we can see the change has now been applied

302
00:12:37,760 --> 00:12:41,200
and moved over to the right-hand side.

303
00:12:41,200 --> 00:12:42,440
Now I did the minimum height,

304
00:12:42,440 --> 00:12:46,220
I could also do the constraints as well, the same way.

305
00:12:46,220 --> 00:12:48,970
And if I change my mind and decided that I didn't want that,

306
00:12:48,970 --> 00:12:50,970
I could come over here and put the change

307
00:12:50,970 --> 00:12:52,550
back onto the left-hand side,

308
00:12:52,550 --> 00:12:53,730
but I'm not gonna be doing that here.

309
00:12:53,730 --> 00:12:56,830
So I'm really just gonna focus on the constraints settings,

310
00:12:56,830 --> 00:12:58,180
rather than the minimum height,

311
00:12:58,180 --> 00:12:59,660
just to show you how it works.

312
00:12:59,660 --> 00:13:01,960
So as we scroll down now and have a look a little bit more,

313
00:13:01,960 --> 00:13:03,790
we can see for button one,

314
00:13:03,790 --> 00:13:06,410
I'm just gonna change the constraint.

315
00:13:06,410 --> 00:13:08,893
Button two, constraint again.

316
00:13:10,408 --> 00:13:12,283
And we can just scroll down a little bit more.

317
00:13:13,910 --> 00:13:15,690
Next one for the constraint,

318
00:13:15,690 --> 00:13:17,763
the constraint with the button four, now.

319
00:13:19,370 --> 00:13:22,250
Button five, we'll just come down and do the constraint,

320
00:13:22,250 --> 00:13:23,870
and you can see it's applying those changes

321
00:13:23,870 --> 00:13:26,170
over to the right-hand side as I'm doing that.

322
00:13:27,300 --> 00:13:29,200
Okay, scrolling down a little bit now.

323
00:13:30,920 --> 00:13:31,753
Next one.

324
00:13:34,730 --> 00:13:36,870
And obviously these are very minor little changes

325
00:13:36,870 --> 00:13:37,717
that have been picked up,

326
00:13:37,717 --> 00:13:40,040
but you can see the concept of changing it

327
00:13:40,040 --> 00:13:42,783
is being applied here as I go through and do it.

328
00:13:45,100 --> 00:13:46,823
Eight and nine.

329
00:13:49,400 --> 00:13:50,580
And if I wanted to, I could go back

330
00:13:50,580 --> 00:13:52,380
and do the same for margins as well.

331
00:13:54,330 --> 00:13:56,410
And probably it would be a good idea to actually do it all,

332
00:13:56,410 --> 00:13:57,560
I said I wasn't going to do that,

333
00:13:57,560 --> 00:13:59,990
but if you think about it, it probably does make sense,

334
00:13:59,990 --> 00:14:02,000
because it's clearing up the code

335
00:14:02,000 --> 00:14:05,360
and making it much easier now to see any other differences.

336
00:14:05,360 --> 00:14:07,413
So I'll just go ahead and quickly do that.

337
00:14:09,660 --> 00:14:12,840
And you can see that as we're making all those changes,

338
00:14:12,840 --> 00:14:14,940
things are now lining up a lot better as a result of that.

339
00:14:14,940 --> 00:14:17,720
So did right down, and I'll right back up to button zero,

340
00:14:17,720 --> 00:14:20,610
and you can see that code now is effectively identical,

341
00:14:20,610 --> 00:14:23,160
and we can move down now to the rest of the buttons,

342
00:14:23,160 --> 00:14:24,860
and just finish those off as well.

343
00:14:25,710 --> 00:14:27,283
So still at the buttonMultiply,

344
00:14:28,200 --> 00:14:29,320
and we can do the same thing,

345
00:14:29,320 --> 00:14:31,900
there's a change of a constraint there,

346
00:14:31,900 --> 00:14:33,220
and also the margin,

347
00:14:33,220 --> 00:14:35,620
this has got a margin and a minimum width,

348
00:14:35,620 --> 00:14:38,553
we can change that as well for buttonMinus,

349
00:14:38,553 --> 00:14:41,690
as well as the minor change to the constraint to align.

350
00:14:41,690 --> 00:14:44,240
And let's do the same for that one, for buttonPlus.

351
00:14:46,370 --> 00:14:48,147
Same for buttonDot.

352
00:14:52,280 --> 00:14:53,440
And the only one now is,

353
00:14:53,440 --> 00:14:57,520
we're right down to the last section now, and buttonEquals,

354
00:14:57,520 --> 00:14:59,920
we do have to be a little bit careful with this one.

355
00:14:59,920 --> 00:15:01,620
And you should have noticed by now that the diff tool's

356
00:15:01,620 --> 00:15:04,550
replacing all the text that's highlighted in blue.

357
00:15:04,550 --> 00:15:06,200
Now, if we use the button

358
00:15:06,200 --> 00:15:08,770
to update the constraint to the right-hand file,

359
00:15:08,770 --> 00:15:12,070
it's also going to remove the guideline widget.

360
00:15:12,070 --> 00:15:13,640
That's this one that's on this side,

361
00:15:13,640 --> 00:15:16,000
that doesn't exist on the left-hand side.

362
00:15:16,000 --> 00:15:16,833
I'm going to do it anyway,

363
00:15:16,833 --> 00:15:19,300
because we're not actually updating the project,

364
00:15:19,300 --> 00:15:21,300
but it is important you don't just click

365
00:15:21,300 --> 00:15:23,130
without actually paying a bit of attention

366
00:15:23,130 --> 00:15:25,470
to what's actually being changed.

367
00:15:25,470 --> 00:15:28,080
Alright, and there's the guideline gone.

368
00:15:28,080 --> 00:15:29,270
And by the way, if you clicked on

369
00:15:29,270 --> 00:15:31,300
one of these chevron buttons to copy code across

370
00:15:31,300 --> 00:15:33,530
as I've been doing, but then change your mind,

371
00:15:33,530 --> 00:15:36,210
you can do a Control + Z, or Command + Z on a Mac

372
00:15:36,210 --> 00:15:37,970
to undo the last change made,

373
00:15:37,970 --> 00:15:39,880
and each time we do a Command or Control + Z,

374
00:15:39,880 --> 00:15:41,410
it undoes the change before that.

375
00:15:41,410 --> 00:15:45,000
So I can do one on here now, click on OK,

376
00:15:45,000 --> 00:15:48,110
you can see the last change, I can do one more.

377
00:15:48,110 --> 00:15:50,480
And I can go back and do it a few more times if I wanted to,

378
00:15:50,480 --> 00:15:52,690
and then I can just put them back if I so desire.

379
00:15:52,690 --> 00:15:54,250
So you have got the ability to undo

380
00:15:54,250 --> 00:15:56,860
if for some reason you wanna do that.

381
00:15:56,860 --> 00:15:59,033
If I just undo one more again.

382
00:16:01,140 --> 00:16:03,730
Keep in mind that you can also edit the text directly

383
00:16:03,730 --> 00:16:05,840
in this diff tool, instead of using the copy,

384
00:16:05,840 --> 00:16:07,400
so we could come over here, for argument's sake,

385
00:16:07,400 --> 00:16:10,580
if we wanted to, and just delete that little bit.

386
00:16:11,550 --> 00:16:13,650
Or we could of course still do that if we want to.

387
00:16:13,650 --> 00:16:15,490
So either way will actually work.

388
00:16:15,490 --> 00:16:17,210
Alright, so at this point now,

389
00:16:17,210 --> 00:16:19,700
all the buttons have their constraints corrected,

390
00:16:19,700 --> 00:16:22,280
and I've got to the end of both files.

391
00:16:22,280 --> 00:16:23,810
Now you probably saw that the right-hand file

392
00:16:23,810 --> 00:16:27,570
had an extra widget, a guideline which has now been removed.

393
00:16:27,570 --> 00:16:29,910
We're gonna be actually adding a guideline later on,

394
00:16:29,910 --> 00:16:31,130
it's because of the guideline

395
00:16:31,130 --> 00:16:32,940
that some of the constraints were different,

396
00:16:32,940 --> 00:16:35,440
so I've probably broken that right-hand file now.

397
00:16:35,440 --> 00:16:37,390
But you can see how useful this difference tool is,

398
00:16:37,390 --> 00:16:39,410
and how you can copy code across

399
00:16:39,410 --> 00:16:41,330
from one file to the other.

400
00:16:41,330 --> 00:16:43,240
Now, it's not the best differencing tool in the world,

401
00:16:43,240 --> 00:16:45,730
and if you already use one and are happy with it,

402
00:16:45,730 --> 00:16:47,950
you can continue to use that instead.

403
00:16:47,950 --> 00:16:49,050
And in fact you can integrate

404
00:16:49,050 --> 00:16:51,260
another diff tool into Android Studio,

405
00:16:51,260 --> 00:16:54,400
and show the current files in that tool instead.

406
00:16:54,400 --> 00:16:56,280
Now as I've said, there are better tools available,

407
00:16:56,280 --> 00:16:58,480
but this one comes with Android Studio

408
00:16:58,480 --> 00:17:01,290
and certainly beats comparing files manually.

409
00:17:01,290 --> 00:17:02,970
And it gets better in fact,

410
00:17:02,970 --> 00:17:05,833
because it also allows you to compare entire directories,

411
00:17:05,833 --> 00:17:09,093
and let's have a brief look at that in the next video.