1
00:00:05,590 --> 00:00:09,690
Okay, so we're back in Android Studio. Let's have a closer look now at this view Inspektor.

2
00:00:09,970 --> 00:00:13,980
So click on the image view if it's not clicked and we've got the view inspector.

3
00:00:14,050 --> 00:00:18,360
Now inside the inspector, are four lines inside the square here,

4
00:00:18,560 --> 00:00:22,650
and they're used to set how the width and height are interpreted.

5
00:00:22,870 --> 00:00:26,470
Now Google refer to these as the inner lines within a widget.

6
00:00:26,510 --> 00:00:31,220
Now at the moment they're both using the values that we've specified in the layout_width

7
00:00:31,420 --> 00:00:36,230
and the layout_height boxes. This is the 200 by 200 dp.

8
00:00:36,460 --> 00:00:38,470
So that's actually called fixed,

9
00:00:38,550 --> 00:00:42,750
but if I come up here and actually click on one of these, we can change them to match_constraints.

10
00:00:42,790 --> 00:00:48,760
So click on that now, and you can see that we had a change with the image view on the screen and also the

11
00:00:48,760 --> 00:00:54,120
mark has changed to a sort of spiky graph, a bit like the electronic symbol for a resistor.

12
00:00:54,370 --> 00:00:58,530
If you click it again now, you can see that's

13
00:00:58,570 --> 00:01:05,510
down here now in the layout_width. Let's change that to wrap_content and the marker's changed to chevrons. And notice

14
00:01:05,510 --> 00:01:07,680
how fitStart and fitEnd work

15
00:01:07,880 --> 00:01:14,510
when the horizontal width is set to wrap_content and the layout_height is set to 200 dp. The vertical and

16
00:01:14,510 --> 00:01:17,270
horizontal lines change independently.

17
00:01:17,300 --> 00:01:18,690
So what do they all mean?

18
00:01:19,010 --> 00:01:23,160
Well at the moment we're working with an image that's actually bigger than the device screen.

19
00:01:23,390 --> 00:01:27,560
The image is 640 by 480 and our screen isn't that wide.

20
00:01:27,680 --> 00:01:29,930
Now please trust me on that for a moment.

21
00:01:30,020 --> 00:01:36,410
It probably doesn't make sense because our nexus 4 has a width of 768, but I'll be explaining that shortly.

22
00:01:37,800 --> 00:01:40,090
To prove, though, that it's wider than the screen,

23
00:01:40,340 --> 00:01:45,830
We're going to click the vertical and horizontal inner lines until the layout_width and layout_height change to wrap_content.

24
00:01:46,130 --> 00:01:52,340
So you can see that I've got wrap_content from our layout_width. I'm gonna do the same for the layout-height now, clicking on

25
00:01:52,340 --> 00:01:54,270
it once and then clicking on it again.

26
00:01:54,570 --> 00:01:58,850
You can see we've got now wrap_content, although we can't quite see that in the boxes. It's been set for both the

27
00:01:59,180 --> 00:02:01,370
layout_width and layout_height.

28
00:02:01,370 --> 00:02:06,120
The other thing you want to do now is come out here to scaleType and make sure that's now set to fix 

29
00:02:06,160 --> 00:02:07,850
XY.

30
00:02:08,009 --> 00:02:11,480
So now that I've done that, the image has to be compressed horizontally.

31
00:02:11,730 --> 00:02:17,280
So we've got that rugby ball or AFL football, which means it must have been wider than the available

32
00:02:17,280 --> 00:02:18,990
space.

33
00:02:19,020 --> 00:02:21,570
Now even changing the left margins to zero doesn't help.

34
00:02:21,580 --> 00:02:26,230
So if I try doing that to zero, we've still got this issue here

35
00:02:26,260 --> 00:02:33,840
where clearly, it's not fitting and I'll just change that back to 16. So ignore the numbers for now and trust your

36
00:02:33,840 --> 00:02:38,140
eyes. The image itself is definitely wider than the screen.

37
00:02:38,160 --> 00:02:42,660
Now it's easy to understand what these inner line settings are doing, that we've been working with,

38
00:02:42,930 --> 00:02:48,660
if we use a smaller image. So I'm going to change the imageView's source attribute, which is abbreviated

39
00:02:48,660 --> 00:02:49,890
to SRC.

40
00:02:50,070 --> 00:02:56,190
Now because we're using the appCompat library to make our app compatible with older devices, the attribute

41
00:02:56,190 --> 00:03:02,400
down here is called Source Compat, srcCompat, and it's one of the most commonly used properties that

42
00:03:02,400 --> 00:03:04,610
appears in the right hand pane.

43
00:03:04,610 --> 00:03:06,860
By the way, this plane is dynamic.

44
00:03:06,930 --> 00:03:12,810
So if you happen to have unticked the compatibility option when creating the project, it will actually be labelled

45
00:03:12,810 --> 00:03:19,380
as src rather than srcCompat. But unless you've got a really good reason, for example, you're producing

46
00:03:19,380 --> 00:03:24,570
a corporate app targeting a specific version of Android that a company is settled on, then you should

47
00:03:24,570 --> 00:03:29,180
really use the appCompat library and you should be seeing source compat in the properties pane,

48
00:03:29,190 --> 00:03:31,300
as is showing on the screen here now.

49
00:03:31,740 --> 00:03:37,560
So what I'm going to do is use the smaller ball image, the ball_100x100, so that we can get a

50
00:03:37,560 --> 00:03:39,560
better feel for how this works.

51
00:03:39,570 --> 00:03:41,110
Now I could just come over here

52
00:03:41,220 --> 00:03:48,160
and go into that box, and you can see the name of the current image is ball_640x480.

53
00:03:48,270 --> 00:03:50,180
So I could just change and type that in,

54
00:03:50,610 --> 00:03:51,590
and that would certainly work.

55
00:03:51,600 --> 00:03:57,670
But if I come over here and click on the ellipsis, over here, click on that, we get the resources dialogue,

56
00:03:57,820 --> 00:03:59,690
and I can select the image I want from there.

57
00:03:59,700 --> 00:04:01,320
So that's actually a lot easier.

58
00:04:01,520 --> 00:04:06,060
It removes the risk of typing the name incorrectly. So I'm going to select ball_100

59
00:04:06,060 --> 00:04:07,740
x100 and click OK.

60
00:04:09,630 --> 00:04:14,490
The other thing I'm going to do is change the layout_width and height back to 200 dp, so let's go

61
00:04:14,490 --> 00:04:17,660
into there, 200 dp.

62
00:04:17,990 --> 00:04:24,990
And I'm just pressing tab now, 200 dp. Press enter there. Now notice that the settings and the inner lines are

63
00:04:24,990 --> 00:04:26,140
linked.

64
00:04:26,220 --> 00:04:31,140
When we click the inner lines, the layout-width and layout_height settings change, and also in this case, when

65
00:04:31,140 --> 00:04:36,540
we typed a value, or chose one of the settings for the width and height, then the inner lines also changed to

66
00:04:36,540 --> 00:04:37,760
reflect the new settings.

67
00:04:37,770 --> 00:04:40,090
So in other words, we're back to a fixed setting here now.

68
00:04:40,470 --> 00:04:46,890
So at this point, we've now got a 200 x 200 imageView, containing a 100 x 100 image of a

69
00:04:46,890 --> 00:04:47,820
ball.

70
00:04:48,180 --> 00:04:52,530
Now by the way, I've given the ball a green background, so you can easily tell when the image is

71
00:04:52,530 --> 00:04:54,080
smaller than its container,

72
00:04:54,150 --> 00:04:59,640
the imageView, and I chose a ball, not because I'm mad about soccer, but because it's easier to see when the

73
00:04:59,640 --> 00:05:04,970
image gets skewed when it's resized, which means that the aspect ratio isn't being maintained.

74
00:05:05,260 --> 00:05:08,660
Now to get a more visual idea of what happens when I change the inner lines,

75
00:05:08,970 --> 00:05:14,410
you want to make sure that the scaleType is set to fitXY, which I've already set here.

76
00:05:14,760 --> 00:05:20,070
So at the moment, we're using a fixed width and height, so the values for the layout_width and layout_height

77
00:05:20,420 --> 00:05:26,520
are being used and the current size of the image view is 200 x 200. But if we change the layout_width

78
00:05:26,520 --> 00:05:29,880
to match_constraints by clicking the horizontal inner lines,

79
00:05:30,930 --> 00:05:37,080
as I've done there, you can see that the widget's now expanded to fill the screen, left to right.

80
00:05:37,230 --> 00:05:42,690
Now if you've designed Android's layouts before, by the way, this may look the same match_parent, but it's

81
00:05:42,690 --> 00:05:46,460
actually slightly different because it considers the constraints.

82
00:05:46,470 --> 00:05:52,290
Now if you're new to Android layouts, match_parent is a way of sizing a widget so that it fits all the available

83
00:05:52,290 --> 00:05:58,560
space in its parent, its parent being the layout it's been placed into. Now match_constraints looks exactly

84
00:05:58,560 --> 00:06:00,220
the same as match_parent here.

85
00:06:00,420 --> 00:06:05,490
It's causing the widget to expand to fill the width of the screen, allowing for the left and right

86
00:06:05,490 --> 00:06:10,560
margins, and you'll see slightly different behavior once we have some more widgets on the screen.

87
00:06:10,910 --> 00:06:16,220
Now if I come over here and click on the horizontal inner lines again, it's going to change it to wrap_content,

88
00:06:16,240 --> 00:06:18,430
so let's do that.

89
00:06:18,440 --> 00:06:23,930
This makes the widget become as wide it needs to be, to fit whatever it contains. Now because we're using

90
00:06:23,930 --> 00:06:25,860
a 100 x 100 image,

91
00:06:25,940 --> 00:06:33,530
the imageView is now a 100 dp wide. Because we chose fitXY as the scaleType, the image is scaled vertically

92
00:06:33,890 --> 00:06:40,280
to fit the fixed height of the imageView, which is still 200 dp, so therefore the football becomes, sort of,

93
00:06:40,280 --> 00:06:46,220
like a rugby ball or AFL football or Easter egg, if chocolate is more your thing than rugby.

94
00:06:46,220 --> 00:06:50,420
So I'm just going to do the same thing here with the vertical sizes, and then I'm going to explain about

95
00:06:50,420 --> 00:06:53,380
those strange units, the 100 dp and the 200 dp.

96
00:06:53,590 --> 00:06:55,360
So I'm gonna click on that until we get wrap_content.

97
00:06:58,450 --> 00:07:02,760
You can see that initially, it changed it to match_constraints, and the imageView got stretched to fit

98
00:07:02,770 --> 00:07:04,160
the height of the layout.

99
00:07:04,230 --> 00:07:06,520
Now I'll just do that again so we can go back and see what I did.

100
00:07:06,700 --> 00:07:12,850
So I clicked that once, and you can see that the imageView stretched to fit the height of the layout, and it

101
00:07:13,030 --> 00:07:16,870
looks a bit frightening rather than a rugby ball or chocolate egg.

102
00:07:17,110 --> 00:07:25,320
By clicking it again, you change the layout-height to wrap_content and we get an imageView now that's 100 x

103
00:07:25,320 --> 00:07:28,250
100 to match the image that it contains.

104
00:07:28,590 --> 00:07:33,810
So the imageView is, basically at this point now, sized both vertically and horizontally to match

105
00:07:33,810 --> 00:07:38,280
its contents, which of course were a 100 x 100 image.

106
00:07:38,320 --> 00:07:42,930
Now there's still a lot to look at in this designer, and if you're used to using the older layouts that were

107
00:07:42,930 --> 00:07:48,360
available, you're probably getting pretty excited about the way that this ConstraintLayout works.

108
00:07:48,720 --> 00:07:53,730
But before I go on to the really exciting stuff, where we constrain widgets to other widgets, I should

109
00:07:53,730 --> 00:08:00,850
probably explain what these device independent pixels or dp units that we're using are. Now our image is

110
00:08:00,870 --> 00:08:04,530
100 pixels wide by 100 pixels high,

111
00:08:04,950 --> 00:08:11,120
and the previous image we used was a more usual 640 pixels wide by 480 pixels high.

112
00:08:11,520 --> 00:08:18,360
Now 640 by 480 is a common size because, and do you may not believe this, that was the resolution of early computer

113
00:08:18,360 --> 00:08:19,120
screens.

114
00:08:19,430 --> 00:08:26,760
I can still distinctly remember how excited I was when I got my first 1024 by 768 monitor. The aspect

115
00:08:26,760 --> 00:08:32,299
ratio was one and a third, so the screen height was three quarters of its width.

116
00:08:32,309 --> 00:08:35,179
Now the current trend is for screens to be much wider.

117
00:08:35,400 --> 00:08:42,929
So we now tend to have resolutions of 1280 by 720 or HD screens of 1920 by 1080, giving an aspect

118
00:08:42,929 --> 00:08:44,850
ratio of about 1.8.

119
00:08:45,210 --> 00:08:49,970
But that's computer screens though, and mobile phones are generally the other way around.

120
00:08:50,220 --> 00:08:53,390
So computer screens are in landscape and mobile phones,

121
00:08:53,450 --> 00:08:59,580
well they're in portrait. Now different screens have different resolutions as well, and modern screens are 

122
00:08:59,750 --> 00:09:04,050
managing to pack in far more pixels per inch then was previously possible.

123
00:09:04,050 --> 00:09:06,430
So this is the pixel density.

124
00:09:06,690 --> 00:09:12,450
So if you've specified dimensions in pixels, your image might look OK on one device, but may look a

125
00:09:12,450 --> 00:09:15,230
bit grim something with a different pixel density.

126
00:09:15,330 --> 00:09:20,730
The number of pixels per inch varies from one device to another, and that can result in our ball appearing

127
00:09:20,730 --> 00:09:24,030
in different sizes, relative to the size of the screen.

128
00:09:24,840 --> 00:09:29,040
Now we're going to use the Android Studio layout designer to make it easy to see how things look on

129
00:09:29,040 --> 00:09:30,420
different devices.

130
00:09:30,470 --> 00:09:32,620
We're going to start on that in the next video.