So I mentioned towards the end of the
last video that the Android Studio
layout designer, makes it easier to see
how things look on different devices. So
we're going to add a button to our
layout to demonstrate this. So we're going
to start off with an imageView set to
wrap_content, both vertically and
horizontally, and we did that in the last
video. You can see layout_width and
height is wrap_content, and you can see
the chevrons which indicate that. We
also want to make sure that our
constraints are at the top, left, right
and bottom of the imageView to the
screen, and that's obviously set as
well, as you can see here. Next we want to
make sure that autoconnect is off, and
there's this little button over here,
autoconnect, which are I talked about
briefly before. We want to make sure that
that's actually off. We can tell when
it's actually off, because there's a
slash that's appearing through the
little magnet icon. So I'm going to do
that to make sure that that's turned off.
Next what we're going to do is drag a
button to the top left of the screen,
slightly in from both edges. I'm going to
do that, just in slightly from both
edges like so, and release the button,
and once I've done that, you can see over
here that we've got some warnings now.
That's because there aren't any
constraints there, so I can click on Show
warnings, Missing Constraints in
ConstraintLayout. So to fix that up I'm
just going to add a constraint from the
button to the top of the screen, and also
add a constraint from the button to the
left of the screen. That fixes up that
error. You won't worry about these other
errors for now, we'll talk about those
later, and I'll close that down. And what
we're going to do now is change the left
constraint on the image, so that it's no
longer constrained to the edge of the
screen but to the right-hand edge of the
button instead. So I click on the image
View. You can see that clearly we've got
a constraint to the left of the screen
so we're going to remove that and
constrain it to the right of the button.
So when I click on the imageView's
left button, left circle, it flashes red,
and I click on delete connection and it
removes the left constraint, and what I
can do now, I'm gonna drag the circle to
the right-hand edge of the button. So I'm
gonna click on it and then drag it over,
and in earlier versions of Android
Studio, by the way, you could drag the
constraint handle to anywhere along the
edge of the button, or whatever
widget you were constraining to. That's
now changed and you have to drag to the
constraint handle on the other widget. So
that's the constraint handle on the
button in this case. Now notice since I'm
holding the mouse button down, that the
constraint handle for the button is
flashing green, and that's a visual
indication that we should be aiming for
that and not anywhere else on the buttons
right edge. I'm just gonna move over here
now and constrain it, release the mouse
button, and we've now got a constraint
from the left of the imageView to the
right of the button. So basically, the
left-hand edge of the imageView is now
constrained by the right hand edge of the
button, so that the imageView itself can
occupy all the space from the right of
the button up to the screen's right edge.
Now we've now got the image centered, in
the space between the button to the
right-hand edge of the layout. Now
depending on what version of Android
Studio you're running, you may actually
have to click on the imageView and make
sure that your margins are set correctly.
In my case, they're set correctly to 16 to the
right and 16 to the left of the image
View, to make sure that you truly are
centered in the middle. And by the way,
because we're using the wrap, we're using
wrap_content, the imageView
is 100 by 100, but we want to play with
the units. So what I'm going to do is
change it to fixed, by clicking on the
inner lines again, because this is the
imageView. So I'm going to click on the image
View lines. So doing that changes the
layout_width and layout_height to reflect
the last sizes that we've specified. So
if, by some reason, yours aren't set to
100 dp x 100 dp, as mine are here, then
just type them in manually. Now to see
what's wrong with using pixel
measurements, what I'm going to do now
is change both the dp sizes to 200 px,
px standing for pixels. So I'll go ahead
and do that so I'm typing 200px. I'm
just going to tab over, 200px again and
press Enter. Now the image is still
centered where it should be.
Notice that it hasn't changed size, so on
this device, the nexus 4, 200 px is equal
to 100 dp. Now that's fine on this
screen, so let's see how it looks on
other devices. Now
by the way, I can choose different
devices using this drop-down over here,
from the designers button bar. Now the
Nexus One is quite old so let's choose
that first and see what happens, and you
can see that everything still looks
pretty good but the image is bigger than
it was, relative to the size of the
screen. But even worse though, is something
like one of the Android wear devices. So
let's go ahead and click that again, and
we'll come down here and choose this 320
x 290 Round Chin. Now looking at the
blueprint rather than the design, because
the design now renders as a circle,
that's because wear devices are like
watches and this one has a circular
screen. Now things, I think you would
agree, are getting a little bit hideous
now, with the image overlapping the
button and extending beyond the
right-hand edge of the screen. And the
button's also messed up in the design
because we created a layout for
a rectangular screen, but don't worry
about that because we're looking at how
things size at the moment. Now to get
around this and make images display
reasonably on all devices, Android uses the
concept of device independent pixels, or
dp. Now 1 dp is equal to one pixel at a
resolution of 160 pixels per inch, but
scales to use more or less pixels, as the
pixel density of the screen changes. So
I'm going to go back to our original
Nexus 4 device, and what we're going to do
is change the sizes back to 100 dp on
this screen, and 100 dp is about the same
as 200 px, so everything should still look
the same. Now let's switch back to the
Android wear device again and see what
it looks like. You can see now that we've
done that, everything still looks okay,
ignoring the circular display of course.
Now these are pretty extreme differences,
from a 768 by 1280 Nexus to a 320 by 290
watch, but using density-independent
pixels, dp, instead of pixels allows the
widgets to be resized to still look okay
and remain usable. Now of course you'll
eventually run into the physical limitations
of a small screen, if you have more in
your layout than will fit. Now if I
choose the 280 by 280 watch, just
to show you, down here, the things just
physically won't fit. So using dp's can
only achieve so much. Now if you
were creating an app to run on a
wearable device, then you design the
layouts using one, and Android Studio
does fully support wearables. But we're
not going to be covering that in this
course, but using the watch made it
really obvious how using dp's is to be
preferred over pixels, when sizing
images and other widgets. So I'm going to
switch back to the Nexus 4 because that
watch is a little bit small on the video,
to show a similar device independent way
of specifying text size. Now when I come
over here and click on the button to
select it, the attributes window changed
to the right, and I can come down here to
textAppearance, and you might find that
that is sized up like that. If it is, just
click on the little
arrow to expand it out, and what we can
do is set the, or see the font size, and
that's the text size here. So here the
units are sp, which stands for scale
independent pixel. The concept is the
same but sp also considers the users
preferred text size. Now what I'm going
to do is change this text size to 32px,
and although that's a little large, it
still displays okay here. But if we
switch back to our device, our watch that
we were using before, the 320 by 290, you
can see that we've got a bit of a
problem now. The button now overlaps the
area where the image is constrained to
appear. Now 32 px on our original device
was 16 sp, so I can change the size here
to 16 sp by typing that in the text size
field. It looks okay, well okayish,
because it's still a bit large for the
screen, but what is clear is that the
button's now moved, or clear of the image,
and if we go back to the Nexus 4 device
everything still looks fine Now there's
a useful
description of dp and sp on Android's
developer website. I'm gonna just
bring that up on the screen. I'm just
going to paste in this link. It's good
reading just to read up a little bit
more on what Density-independent pixels
are. The bottom line here is to use
Density-independent pixels when sizing
graphical elements, and Scale-independent
pixels when sizing text. Alright so I'm
going to finish this video by mentioning
that this isn't quite the full story.
It's possible to provide images at
different resolutions and Android will
choose the one that's most appropriate
for the device that the app's running
on. Now we're going to be looking at
doing that later in the course, but I'll
mention it briefly because I've promised to
explain how come our 640 wide image was
wider than a 768 screen. We're scrolling
down on this page, about halfway down you
can see here we've got this Provide
Alternative Bitmaps section. Now we're
going to be providing alternative images
later in the course.
For now though, what's interesting in
this section, is the scaling factors for
the different densities. So notice here
on the screen that xhdpi has a
scaling factor of 2. So we go back to
Android Studio and drop down the list of
devices, and we can see that our Nexus 4
is an xhdpi device. So our 640 by 480 px
image was scaled by 2, to become 1280
by 960 pixels, which is wider than the
screen. So as an exercise, use the source
compat attribute to load the ball
_640 x 480 image back into
the image view, and specify its width and
height to be 640 px by 480 px. That'll
confirm that it does fit and was scaled
up when the dp units were used. And just
as a hint, delete the left constraint
as there's not enough space to the right of
the button. But I'll leave that with you as
an exercise and see you in the next video.