(relaxing, futuristic music)
(keyboard typing)
In the previous videos,
we created the layout for the calculator app,
and we saw it running on an emulator.
Now, it looked fine on my screen when I ran it,
but if you're having problems,
you might be struggling to work out exactly what's wrong.
If you missed a step while we were creating the layout,
it can be difficult to tell from the screen
what bit may be missing,
and if the whole widget
then you probably spot it quite easily,
but trying to work out all the constraints
by comparing the image on my screen with yours
isn't very easy and intuitive.
There is a better way,
and that's to compare the XML files produced for the layout.
Now, Android Studio has a built in diff tool,
and that's a tool that allows you to compare files
with the computer doing most of the work.
Now these tend to work best
when the contents of the files you're comparing
are in roughly the right order.
So after completing layouts in the course,
make sure the order of your widgets in the component tree
matches mine, and you can see that on the screen there.
Now I did add another couple of widgets
to the top of the layout
since I last reordered the component tree,
so check the order of the tree,
and move them back near the top if necessary.
And you can see we've got the result, operation,
newNumber, the buttons zero through nine,
then we've got divide, multiply, minus,
plus, dot and equals buttons.
Now, it's also a good idea to reformat your code.
And this applies whether it's XML or programme code
that you wanna compare.
Formatting the code in a standard way
makes it much easier to use differencing tools
to spot differences.
So to do that, and I did show you this in the last video,
but click on Text, and come up here to the Code Menu,
and select Reformat Code.
That's how you go about actually doing it,
but you can see I've got a little popup here
saying my code, or content rather,
is already properly formatted.
Alright, so I've already got a copy
of this layout file on my computer.
And what I'm gonna do,
I'm gonna close down the landscape one,
and I'm gonna be dealing with the portrait one,
so we're gonna be testing and comparing that one.
So, I've already got a copy like I said.
So to start the comparison tool,
you want to expand the project pane,
and find the file that you wanna check.
So I'm using the portrait activity_main.xml subset,
so I can come down here and open up the layout.
Down here, the activity_main.xml is the one we want.
Then when I select the file in the project pane,
you can actually see the path up here,
displayed just above the pane.
So within the calculator project,
this activity_main.xml can be found in
app, src, main, res, layout.
That's the folder,
and obviously the name is activity_main.xml.
Now, you'll need to know that path within the project
when you come to compare files in different projects,
such as your copy with the files in my source code.
For now, though, I'm gonna compare this layout
with another copy that I've already stored
on this computer's hard drive.
So I'm gonna select activity.xml in the project pane,
over here, which is selected,
and I'm going to then come up to the View menu,
and click on Compare With.
When I do that, I get a popup up here.
And by the way, the shortcut key for that is
Ctrl + D on a PC or Linux, or Command + D on a Mac.
So this is the file picker dialogue,
and I can use that to navigate to the other file,
so one that I wanna compare to
this projects activity_main.xml.
So in my case, I've actually stored it on my desktop,
so I'm going to click on there, activity_main_compare_1,
and click on Open.
Now once I've done that, I've chose the second file,
you can see that the diff tool has started up
with the two files displayed side by side.
Now the top right of the window
shows me how many differences there are
between the two files,
and you can see in this particular case,
it says no differences.
And over here, it says contents are identical.
Now, most of the window is taken up
with the two files side by side,
with matching lines aligned as far as possible.
Now, because there are no differences in these two files,
everything lines up perfectly,
and I can actually scroll the text up and down
to check that all out. And you can see as I do that,
we're getting a representation of both files.
Now, on the toolbar at the top is a button
that collapses identical sections,
so that you can focus on just the bits that are different.
And that's this tool over here.
Now because these files are the same,
it collapses them both completely,
but we'll see it again when there are differences.
But I'm gonna click it again there anyway,
and you can see by doing that there's no text,
there's no XML showing anymore.
Again, because it's only showing what is different,
in this case, the two files are identical.
Now next to that is another button,
and this button synchronises the scrolling of the two files.
You can turn that off if you wanna scroll one file
without the other one following it,
and that can be useful if you're comparing blocks
that are in different places in the file.
Now with this diff tool, we have to do that manually,
and differences in methods that appear in a different place
in each file aren't highlighted for you.
And next to that as we go over is the cog,
which is the settings button,
which you can turn on line numbering if it isn't already on.
And it's also useful just to disable code inspections
from the highlight level sub menu, you can click on that,
and you can see the various options we've got in there.
Now code inspections are the warning and error messages
that appear in the margins,
and with these files, lines two, three and four,
and if I just open it up again.
So with these files, lines two, three and four
are showing in red in the right-hand pane,
and I can actually come over here and click on that.
Three errors found.
So that can be distracting
when you're trying to look for differences in the file,
so I tend to disable the inspections
by choosing syntax from that menu.
So I'm coming over here, Highlighting Level
and choosing Syntax.
Which was already selected, but if we go back
and click on Highlighting Level to Inspections,
you see there's three lines that I'm referring to in red.
So again, I'm going to just come over here,
Highlighting Level, Syntax.
Alright, so that's about all we can see with these files.
And it is a bit boring
when the files are identical after all,
but I have got another file that I didn't reformat,
and also that the widgets are in
a different order in the component tree,
so let's have a look at comparing files
that differ markedly.
So I'm going to close this down,
I'm gonna make sure that activity_main is selected,
View Menu, Compare With,
and this time, I'm gonna select the
activity_main_compare_2.xml.
Click on Open.
So we've got a completely different setup here,
and it in fact is showing 39 differences.
So this is one reason why I recommend
that you use the code reformat code option,
and make sure that your widgets are in the same order
as mine before using this tool to compare your code
to the source you can download from the resources.
Now, one of the things that reformatting the code does
is order the XML attributes in a consistent way,
so the first attribute is always the ID, for example.
And you can see in the left-hand pane
that the IDs here for every widget starts with an ID,
we've got the EditText and the TextView there,
but in the right-hand side file, that's not really the case,
there's no such pat, in other words.
And as I scroll through the document,
it's very hard to see what's happening,
and what the important differences are.
And in fact, this probably isn't gonna help us much at all.
Now, if I'd reformatted the code in that second file,
and made sure that the widgets
were in the same order as my code,
then the differences would actually be much easier to spot.
So I'm gonna close this window down
and do a comparison with a formatted file.
And the same deal,
I'm going to select activity_main in the project pane,
View, Compare With,
this time I'm gonna select another file,
this is activity_main_compare_3.xml, open that.
And initially it looks worse,
it says that there's actually 55 differences.
But now the ordering of the widgets
and the XML attributes have been sorted out,
it's going to be much easier to spot the differences.
Now firstly, we can see that
the EditText in the second file has a different ID.
Now the inputType on line 22,
you can see that's slightly different as well.
We've got numberDecimal pipe numberSigned,
compared to numberSigned pipe numberDecimal.
So that's fine, and we can ignore that one.
But the operation TextView,
if we just scroll down a little bit more.
Well that's also got a few differences,
you can see here that
for the operation on the right-hand side,
we're using 16dp for the various margins,
and the TextView for operation on the left is using 8dp.
And in addition,
it's got a text properly set to a plus symbol,
and we haven't got that text attribute used at all
on the left-hand side.
And its constraints are also slightly different.
Now remember that End_toEndOf is the same as Right_toRightOf
when dealing with constraints,
so it turns out those differences aren't important.
But older versions of Android Studio use left and right,
while Android Studio 3 currently uses start and end.
Of course, that could still change in the future.
Now, these older versions also use the layouts ID,
which is the @+id/activity_main,
and that's actually the same as parent.
You got parent down here you can see,
compared, this is on line 37 on the left,
compared to the use of the actual
the @+id/activity_main on line 39 on the right-hand side.
And again, that's the same as parent,
because the layout is the parent of our widgets.
So we can ignore those differences as well.
So let's move on a little bit now, look at the next one.
And I'm gonna come over here
and click that,
so that I can actually scroll both of them at the same time.
So if we have a look at this next EditText now,
the one that's showing here on the left.
Now this next EditText widget is just about the same.
The only differences are those
input types that we talked about.
This is on line 48 on the left-hand side,
and line 52 on the right-hand side,
And there's also a top margin in the left-hand file.
So this is the sort of thing you could easily miss
if you compare the files manually.
Now, the 10 buttons that follow have some differences,
and I can just scroll down
and we can start looking at some of those.
The ones on the right, if you have a look,
you'll see that they've all got their minimum height set,
as well as minimum width.
And we haven't got minimum height showing
on the left-hand side, only minimum width.
So using a tool like this makes it much easier to spot
problems in code when you've got a working version
to compare your code to.
Now, as long as you're careful
and watch carefully what you're doing,
it's possible to edit these files
from actually inside this difference tool.
To make it easier, the tool provides buttons
that will automatically synchronise lines.
Now you can either transfer the left-hand code to the right,
or the right-hand code to the left.
Now normally you'd probably go from right to left,
because the left-hand side is the file in your project,
and you probably wouldn't be checking for differences
unless you've got a problem in your code.
So in other words, you probably wouldn't be wanting
to update anything but the file that's in your project.
Now, I'm only going to do this to show you how it works,
and I don't wanna mess up my project file,
so I'm going to send the code for the left
over to the right, but bear in mind
that you'd normally probably sending code from the right,
which would be the file that you've downloaded to compare
the one on the left-hand side.
So I'm gonna synchronise all the constraints settings
for the 10 buttons on the right,
by copying the settings from the left.
Now in the centre margin where the line numbers are,
there's actually a little button,
you can see this little, two greater than signs.
And that synchronises the section to the right.
And there's another one this side,
which will go the other way.
So when I click over here on button zero,
this little button,
we get this warning about the file
not being part of the project,
but that's normal, and as I said,
you'd normally be going the other way
and you wouldn't be getting that.
So once I click OK for that,
we can see the change has now been applied
and moved over to the right-hand side.
Now I did the minimum height,
I could also do the constraints as well, the same way.
And if I change my mind and decided that I didn't want that,
I could come over here and put the change
back onto the left-hand side,
but I'm not gonna be doing that here.
So I'm really just gonna focus on the constraints settings,
rather than the minimum height,
just to show you how it works.
So as we scroll down now and have a look a little bit more,
we can see for button one,
I'm just gonna change the constraint.
Button two, constraint again.
And we can just scroll down a little bit more.
Next one for the constraint,
the constraint with the button four, now.
Button five, we'll just come down and do the constraint,
and you can see it's applying those changes
over to the right-hand side as I'm doing that.
Okay, scrolling down a little bit now.
Next one.
And obviously these are very minor little changes
that have been picked up,
but you can see the concept of changing it
is being applied here as I go through and do it.
Eight and nine.
And if I wanted to, I could go back
and do the same for margins as well.
And probably it would be a good idea to actually do it all,
I said I wasn't going to do that,
but if you think about it, it probably does make sense,
because it's clearing up the code
and making it much easier now to see any other differences.
So I'll just go ahead and quickly do that.
And you can see that as we're making all those changes,
things are now lining up a lot better as a result of that.
So did right down, and I'll right back up to button zero,
and you can see that code now is effectively identical,
and we can move down now to the rest of the buttons,
and just finish those off as well.
So still at the buttonMultiply,
and we can do the same thing,
there's a change of a constraint there,
and also the margin,
this has got a margin and a minimum width,
we can change that as well for buttonMinus,
as well as the minor change to the constraint to align.
And let's do the same for that one, for buttonPlus.
Same for buttonDot.
And the only one now is,
we're right down to the last section now, and buttonEquals,
we do have to be a little bit careful with this one.
And you should have noticed by now that the diff tool's
replacing all the text that's highlighted in blue.
Now, if we use the button
to update the constraint to the right-hand file,
it's also going to remove the guideline widget.
That's this one that's on this side,
that doesn't exist on the left-hand side.
I'm going to do it anyway,
because we're not actually updating the project,
but it is important you don't just click
without actually paying a bit of attention
to what's actually being changed.
Alright, and there's the guideline gone.
And by the way, if you clicked on
one of these chevron buttons to copy code across
as I've been doing, but then change your mind,
you can do a Control + Z, or Command + Z on a Mac
to undo the last change made,
and each time we do a Command or Control + Z,
it undoes the change before that.
So I can do one on here now, click on OK,
you can see the last change, I can do one more.
And I can go back and do it a few more times if I wanted to,
and then I can just put them back if I so desire.
So you have got the ability to undo
if for some reason you wanna do that.
If I just undo one more again.
Keep in mind that you can also edit the text directly
in this diff tool, instead of using the copy,
so we could come over here, for argument's sake,
if we wanted to, and just delete that little bit.
Or we could of course still do that if we want to.
So either way will actually work.
Alright, so at this point now,
all the buttons have their constraints corrected,
and I've got to the end of both files.
Now you probably saw that the right-hand file
had an extra widget, a guideline which has now been removed.
We're gonna be actually adding a guideline later on,
it's because of the guideline
that some of the constraints were different,
so I've probably broken that right-hand file now.
But you can see how useful this difference tool is,
and how you can copy code across
from one file to the other.
Now, it's not the best differencing tool in the world,
and if you already use one and are happy with it,
you can continue to use that instead.
And in fact you can integrate
another diff tool into Android Studio,
and show the current files in that tool instead.
Now as I've said, there are better tools available,
but this one comes with Android Studio
and certainly beats comparing files manually.
And it gets better in fact,
because it also allows you to compare entire directories,
and let's have a brief look at that in the next video.