All right let's solve the challenge that I gave to you right at the end of the last video.
So to start off with what we need to do is constrain the left edge of new number.
I'm going to click on that.
Our EditText newNumber and constrain the left edge of that to the left edge of the layout.
and its right edge to the right edge of the layout
So its sizes in both planes should be set to wrap_content already.
And it is in this case.
But if it's not in your version, make sure you change them. And also want to make sure the three margins
are all set to 8, which they are set here as we can see in the Inspector and finally set the horizontal
slider to be set to 50 if it's not all ready.
But again in my case it is set.
Now the operation TextView should also be set to wrap_content.
When I click on the TextView you can see that's set to wrap_content and the slider should be set to 50 which
it is.
And the left or right margin is set to the same value.
We are using 8 but 16 would be OK as well because it's only displaying a single character which might
look a bit lost.
We're going to use the properties of the right hand side to set the text size to a larger size, to 18
sp and also set the bold button just below that, come down here and click on bold and also change this
as I mentioned to 18 sp. Press enter there.
Now we can't see much change at the moment but as both of the EditText widgets also use a text size of
18sp, this text field would look better at that size.
Now that's looking pretty good.
But before I forget we also want to allow single with decimal numbers things like negative four point
five six seven.
Now the text we've used allows signed numbers but not decimals.
So we need to or we have a change to make.
So when I select a result widget over in the inputs to the right here input type and you can see it's set to number.
signed, now we also want that to be number decimal.
So I'm going to click on this ellipsis button over here.
And you can see that we get a menu that pops up, and we can we can then tick the options we want.
So after coming down here.
and selecting number decimal by checking the box and clicking on OK we can see now that both those
options are in there there's number signed that was there.
And then there's a pipe character than the number decimal.
I want to do the same name for the new number.
I click on that come over here to the ellipsis and add number decimal, or check number decimal as well.
So it's now set to both values.
And if you don't do that you won't be able to use buttonDot to enter a decimal point into your
numbers.
Now there's one last change I want to make to the result EditText widget.
So I'll select that. Now when we run the button click app the soft keyboard appeared automatically on the
screen and let us type into the EditText widget.
Now we don't want users to be able to type into the result widget, that's just there to display the result
of the calculation.
Now the way to prevent that behavior is to use the focusable attributes.
So when I actually expand the list of attributes and scroll down
See here we've got focusable as well as focusInTouchMode.
Now the reason for two properties is that mobile devices can have different input methods.
For example you can have a phone that only works in touch mode, and a tablet that has a physical keyboard
connected, in which case it's not in touch mode.
Actually most modern Android phones support USB On The Go (or USB OTG) so that you can connect an external
keyboard and/or mouse to them. If you do that
they'll actually no longer being touch mode either.
And when a device is in touch mode widgets are not focusable. But there is an exception for widgets that
are designed for text input, like the EditText that we're using.
So we need to set both of these attributes to false to prevent the soft keyboard from appearing when the
user taps the widget or clicks on it with an external mouse.
So I come over here now to focusable and select the dropdown.
You can see that the focusable attribute only shows true and
auto.
So we need to actually type in false for this one. Im going to type in false, press enter but on the other hand
focusableInTouchMode if I click into there I'm just going to expand this out on a bit more so we
can see a little bit better.
Now focusableInTouchMode, you can see that I'm actually clicking here,
uses a tri-state check box and it can be sent to one of three states: a dash means it's set to
the default which it is now; a tick means it's set to true;
and if it's empty, that's false.
But unfortunately as you can see here it doesn't work.
It's actually a bug.
Now it's a bug that's been present for quite a while actually since Android studio 2.3.
And by the way I have mentioned a few bugs so far, but don't let that put you off Android Studio.
Remember that this layout designer is just a convenience so that you don't have to top in loads of XML
In the first version of this, course a few years ago, that's how we created the layouts - by typing in the XML.
So things have certainly come a long way and obviously over a time will get even better.
But in our case now, what can we do about this bug?
Well the work.
the work around is to use the tools property instead.
Now you may have noticed that some of these attributes seem to appear twice, with one version having
a spanner (or wrench, in American) next to them.
One example is the text attribute, which we can see when I collapse the attributes. We've got text and we've
got this one with the spanner or the wrench, of the same name.
So these are tool attributes, that only apply inside the layout designer.
So that means that changing these, the ones with the wrench or the spanner, they've got no effect
when you run the app.
So just to show you what I mean: in the text you can type in say negative eight seven six five point
four three, and you can see that immediately shows up in the actual field itself in the result Edit
EditText. If I actually delete that
again, and come down here to the text one, with the spanner or wrench, and Press enter, that's still shows.
But the difference here is that the number in the second one, in this second field - the one with the
wrench or the spanner, that won't appear when we run the app.
So it's basically there to help you with a visual display.
So we go back to the focusableInTouchMode attribute in the extended list, we can come up here and
we can click on this little spanner to the right hand side, and you can see when I've done that, that's
opened up another one but just below. Now this one doesn't suffer from the same bug.
I mean come down here we can click on this and you can see that works you've got a checkbox.
Now and we want to turn it off to make it false.
So this one doesn't suffer as you can see from the same bug.
We're able to tick it
And obviously because it's the wrench or the spanner version it's not going to have any effect when
we run the app.
But what we can do is come over here and click on the text tab.
And you see we've got tools colon focusableInTouchMode equals false. I can change that to Android.
So in other words I'm up here and change that to Android.
We're going to come over here and set that to true as well.
could have left that as it was. I'm going to take the opportunity now to just delete the text as well, because we don't need
that anymore.
Alright so now that we've done that though, I could come back to design you can see we've now got a check box in the
focusableInTouchMode, in the first one not in the tools one, and I can actually tick that again now and turn
the effect off and actually make it false.
So that's a quick way to work around this particular bug.
And by the way if I click it the third time, you get the dash back again and you won't be able to change
back again without using the tools attribute again, so on that now you can say that it's not working.
But then I can do the same thing here and come back under the tools version of it.
back into design, into text rather, then change tools to Android, and leave it at false, because that's ultimately
what we want it set to be, and that's now working. then I can come over here and close down the tools version.
All right.
So at this point now we've disabled both focusable and focusedableInTouchMode for the result
EditText.
Now we could do the same with the newNumber EditText widget. Whether to allow the soft keyboard to be used
with is the sort of design decision you have to make when creating your user interface.
In other words does it make sense to restrict the entry of numbers to our buttons only. Possibly would
be the answer.
But if someone is using an external keyboard, they would probably be a bit upset, if they went to, if they have
to touch the screen to use our calculator.
So focusable should almost certainly be set for this widget.
This is the newNumber widget and I've also decided to allow numbers to be entered using a soft keyboard
that way users can use its backspace key to correct typing errors if they want to.
So I'm also going to leave focusable and focusableInTouchMode unchanged for this widget.
And if you don't want to allow the on-screen keyboard to be used you now know how to disable it.
Right now we just need to line up the buttons. So to do that what we need to do is delete the left constraint
for button7, then set it to the left edge of newNumber instead.
So I can come over here and get this constraint for number 7, our digit 7, and just go back to our normal mode there
we can see that we've got the left constraint, which is to the left screen left of the layout.
So I'm going to delete that.
And then what we want to do is set the left constraint to the left edge of newNumber instead.
So let's go ahead and do that.
Like so. And the other thing we want to do is make sure that we change the margin, the left margin
now, for button7 to zero. We'll go ahead and do that.
Otherwise it's going to be a little bit off.
You can say now that it's fitting in quite nicely.
Now for this particular layout that's all we need to do.
We haven't really centered the button array, but as it's constrained to something that is centered and it
is the same width.
It all works fine.
Now if I switch the layout to landscape it'll still look fine - well fine horizontally, It's not as good vertically
but we'll come back to that later.
And again, just having a look to see what this looks like and come up here and switch to landscape.
So we can see that it does still look OK.
Well I guess, to be fair, fine horizontally, as I mentioned, not so good vertically but whe'll actually
come back to that. I'm just going to go back to portrait again.
We haven't centered the array of buttons as I've said. Now because we've only got four buttons across
it works fine, but if we added more columns of buttons then it wouldn't be centered any longer.
I'm going to come back to that at the end of this section, and look at how to center groups of widgets.
Now though, there is just one more thing I want to discuss before we move on to writing the code for the calculator.
Now in the previous videos we removed the text from the text view in code.
It's easy to do, as you saw, and it's often a good idea to leave text in the layout.
But in this one I'm going to clear the text in operation, then try to change its vertical constraint.
So it's aligned on its baseline.
It does look a little bit high when aligned to the top there. I'm going to come over here to our TextView. This
is for our operation widget.
We're going to delete the text, as I mention
and you can see that once I press enter there.
And the same thing would happen if I click back in the design, in the design or blueprint, the widgets shrinks
and that's because it's set to wrap_content.
In fact there isn't any content.
So I'm going to start by deleting the vertical vertical constraint and you can say that it disappeared
from the inspector at the right, and I could have deleted it from there as well.
In fact now that it's so small, it's probably easier to use the inspector to delete the constraints.
But creating a baseline constraint that we want now is just about impossible. And it is possible, but it's
pretty hard to try and get over there and get to touch the the baseline button now, which of course makes
the handle appear.
Now I could resize the widget, or put some text in temporarily, to make it wide enough, or I could
even edit the XML.
There was another way though. It's not necessarily easier than putting some text in temporarily but it's
useful to know about it.
Now the constraints appear in the attributes, so I can expand the attributes using the double arrow.
As I've been doing in the course, and then I can expand ... back up to the top of the list and I
can expand constraints as you can say here. Remember that the list is alphabetical, but properties that
have been used are shuffled to the top of the list.
So it might help if I make this still a little bit wider, so that we can see the names of all of these
basically the full names of each constraint. The one we want is the baseline_toBaselineOf
this one here, baseline_toBaselineOf.
Now the names are very descriptive.
So we can see the constraints that we've already set.
So the left one, start, is set to the left of the layout.
This one here, start set to parent. And the right one, and it's constrained to the left of the new numbers.
as you can see up here.
Now we want line the baseline of the textView to the baseline of new number.
So you could just put its ID, @+id/newNumber, as the widget to constrain the baseline
to, and even easier.
You just select newNumber from the list. So we can come over here
select newNumber, and you can see immediately the alignment actually kicked in straight away.
And we saw that being drawn up on the screen.
So the two new widgets have been added to the bottom of the component tree, by the way.
So I'm going to come back over here and make a bit more space
I'm going to drag them up
So they appear in the list in the order matching the placement in the layout.
That should really be a result.
Operation.
And then you newNumber. Like so. Get back into the landscape now just have a bit of a look.
You can see that the buttons are far too close to the bottom of the screen.
There's a fair bit of space between the widgets vertically, so we could start shuffling them up or reducing
their top margins.
Now sometimes you might have to do that, but Android's got another solution and it's possible to create
separate layouts for different screen sizes; and landscape counts as a different screen size to portrait.
Right.
Let's finish the video here.
Now that we've identified that these buttons are too close, in the next video we'll spend a bit of time fixing
that problem, so that things look right for this interface; both in portrait and landscape mode.
So see you in the next video.