alright let's solve the challenge that I
gave to 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
numbers I'm going to click on that you
know when it texts a new number so
constrain the left edge of that to the
left edge of the layout so and it's
right edge to the right edge of the
layout so it sizes in both planes should
be set to replica on 10th already and it
is in this case but if it's not in your
revision make sure you change them and
also want to set make sure the three
merchants are all set to eight which
they are set here with as we can see in
the inspector and finally set the
horizontal slider to be set to 50 if
it's not already but again in my case it
is set now the operation textview should
also be set to wrap on a scroll content
so I'm going to click on the text view
and you can see that's set for apples
core content and the slider should be
set to 50 which it is and the left and
right margins are set to the same value
now we're using 8 here but 16 would be
ok as well now because it's only
displaying a single character which
might look a bit lost I'm going to use
the properties on 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 I come down here you can
click on bold and also change this as I
mentioned to 18 SP it's in to there now
we can't see much change at the moment
but as both of the edit text widgets
also use a text size of 18 SP this text
view will 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 edit
text widget we've used allows sign
numbers but not decimal so we need to or
we have a change to make so when I
select the result widget over in the
inputs to the right here is input type
and you can see it's set to number side
now we also want that to be number
decimal so I'm gonna click on this
ellipsis button over here you can see
that we get a menu where that pops up
and we can KITT 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 like none by saying
that was there and then there's a pipe
character than the number decimal I want
to do the same nail for the new numbers
I click on that come over here to the
ellipsis and add number decimal or check
of a decimal as well so that's now set
to both values and if you don't do that
you won't be able to use button dot to
it to enter a decimal point into your
numbers now there's one last change I
want to make to the result and it text
widget so we'll select that now when we
ran the button click app this soft
keyboard appeared automatically on the
screen and let us type into the edit
text widget now we know what uses 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 at the list of attributes and
scroll down
see here we've got focusable as well as
focus in touch mode now the reason for
two properties is that mobile devices
can have different input methods for
example you could 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 and if you do that
they'll actually no longer be in 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
edit text that we're using so we need to
set both of these attributes to false to
prevent the soft keyboard from appearing
when they use attempts the widget or
clicks on it with an external mouse so
I'll come over here now to focusable
and select the drop-down you can see
that the focus and will actually be it
only shows true and auto so we need to
actually type in false for this one when
the type in false and press Enter
but on the other hand focusable in touch
mode if I click into there I'm just
going to expand this out a little bit
more so we can see it a little bit
better you know focus I'm in touch mode
you can see that I'm actually clicking
here it uses a tri-state checkbox and it
can be set 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 in sexualy a bug now it's a
bug that's been present for quite a
while actually since the Android studio
2.3 and by the way I've mentioned a few
bugs so far but don't let that put you
off Android studio remember that this
layout design is just a convenience so
that you don't have to type 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 time will get even
better but in our case now what can we
do about this bug or the worker Pat the
workaround is to use the tools properly
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 so we've got text and they've
got this one with a spanner or a wrench
but that are of the same name so these
are tool attributes and 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 text now
if I actually delete them again and come
down here to the text one with the
spanner or wrench and press Enter
that still shows but the difference here
is that the number in the second one in
this second field with one with the
wrench will the spanner that won't
appear when we run the app so it's
basically there to help you with a
visual display well so we go back to the
focusable in touch mode actually reading
the extended list we can come over here
and we can actually 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 and we can come down here we can
click on this and you can see that works
we've got a checkbox now and then we
want to turn it off to make it false so
this one doesn't suffer as you can see
from the same bug and we're able to
ticket 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 you can see
we've got tools colon focusable in touch
my own equals false well I can change
that to Android so in other words come
up here and change it to Android we're
going to come over here and set that to
true as well good enough finis it was
and I'm gonna take the other opportunity
now just delete the the text as well
because we don't need that anymore all
right so now that we've done that though
we come back to design you can see we've
now got a checkbox in the focusable in
touch mode in the first one not in the
tools one
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 on the third time we get
the dash back again and you won't be
able to change it back again without
using the tools that you buuuut again so
I'll click on that now you can see that
it's not working but then I can't do the
same thing here and come back under the
tools version of it back into design
into text rather and change tools to
Android and leave it on false because
that's ultimately what we want to set to
be and that's now working and then I can
come over here so I can close down the
tools version alright so at this point
now we've disabled both focusable and
focusable in touch mode for the result
edit text now we could do the same with
the new number in a text widget whether
to allow the soft keyboard to be used
with it is the sort of desired decision
you have to make when creating your user
interface in other words doesn't 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 that'd probably be a
bit upset if they went to if they have
to touch the screen to use our
calculator so focusable should always
certainly be set for this widget this is
the new number which it
and I've also decided to allow numbers
to be entered using a soft keyboard that
way a user can use its backspace key to
prove to correct typing errors if they
want to so I'm also going to leave
focusable
and focusable in touch mode unchanged
for this widget and if you don't want to
allow the on-screen keyboard to be used
you know how to disable it all 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 button 7 then
set it to the left edge of new number
instead so I'm gonna come over here
we've got 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 the
left screen left of the layer so I'm
going to delete that and then now what
we want to do is set the left constraint
to be the left edge of new number
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 button seven to zero
I'm going to go ahead and do that
otherwise it's going to be little bit
off you can see know 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 assets constrain to something that
is centered and it is the same width
it all works fine now if I switch the
layout to landscape it will still look
forward
well foreign horizontally it's not as
good vertically but we'll come back to
that later and again just to having us
having a look to see what this looks
like and come up here and switch to
landscape they can see that it does
still look okay well I guess it I guess
to be fair fine horizontally as I
mentioned - not so good vertically I
will actually come back to that I
totally go back to to portrait again we
haven't centered the array of buttons as
I've said there 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's 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 remove the text from
the textview 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
higher when the line to the top there so
I'm going to come over here to our text
view this is there for our operation
widget we're going to delete the text as
I mentioned and you can see that once I
press the Enter there and what the same
thing would happen if I clicked back in
the design in the design or blueprint
the widget shrinks and that's because
it's set to wrap underscore content in
fact there isn't any content so I'm
going to start by deleting the vertical
vertical constraint and you can see that
it's disappeared from the inspector at
the right and I could have deleted it
from there as well
in fact now the widgets so small
it's probably easier to use the
inspector to delete the constraints but
creating the baseline constraint that we
won't know is just about impossible and
it is possible it's pretty hard to try
and get over to there and get to touch
the the baseline button there which of
course makes the handle appear now I
could resize the widget or put some text
in temporarily to make it wide enough
where I could even edit the XML there is
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 arrows I've
been using been doing in the course and
then I can expand I'll go back up to the
top of the list I can expand constraints
as you can see here
you remember that the list is
alphabetical but properties that have
been used to shuffle to the top of the
list so so may 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 I'll escort to
baseline off this one here baseline now
let's go to baseline to baseline off now
the names are very descriptive so and 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 step two parent the right one end
was constraint to the left of the new
number as you can see up here now we
want the light we want to line the
baseline of the textview to the baseline
of new number so you could just put it
ID you know ampersand + ID / new number
as - widget to constrain the baseline -
and even easier you just select new
number from the list so come over here
select new number and you can see
immediately the alignment actually
kicked in straightaway 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 it more space
so going to drag them up to so they
appear in the list in the order matching
the placement in the layout that should
really be result operation and then you
number like so so go 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 he could start
shuffling them up by reducing their top
margins now sometimes you may have to do
that but to 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 all
right so 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 I'll see you in the next video