1
00:00:02,240 --> 00:00:07,730
Now the good thing is of course you don't have to use this default width and height,

2
00:00:07,730 --> 00:00:14,310
you can set your own. So you can give this image a style and I'll do this, here

3
00:00:14,350 --> 00:00:22,490
I'll add an image property in the stylesheet and give this a width of let's say 80% of the parent

4
00:00:22,550 --> 00:00:28,850
view, so 80% of this screen view, so 80% of the screen width therefore and maybe a height

5
00:00:28,880 --> 00:00:30,260
of 300 pixels

6
00:00:30,260 --> 00:00:36,380
and now we can assign this image style here to this image component by using the style prop there and

7
00:00:36,380 --> 00:00:38,990
pointing at styles image like this and

8
00:00:39,000 --> 00:00:46,850
if we do that now, we see that's way better and now the image fits onto the screen and is resized accordingly.

9
00:00:46,850 --> 00:00:50,560
Now by the way, you can also control how the image is resized

10
00:00:50,570 --> 00:00:56,420
if you define a width and height that doesn't meet the aspect ratio of the original image,

11
00:00:56,420 --> 00:01:02,750
so if your width to height aspect ratio isn't the same as the image file and chances are that you

12
00:01:02,750 --> 00:01:04,470
have a different aspect ratio,

13
00:01:04,610 --> 00:01:12,670
well then you can set a resize mode here and this simply is a string where you can choose from different

14
00:01:12,730 --> 00:01:13,550
options

15
00:01:13,630 --> 00:01:20,260
and for example cover is an option where you will resize the image to keep its aspect ratio and fit it

16
00:01:20,260 --> 00:01:26,980
into this box here. For contain, it's similar but for contain, it will not necessarily take the entire

17
00:01:26,980 --> 00:01:28,330
box as you can see here,

18
00:01:28,360 --> 00:01:33,430
here it contains the image and simply shrinks it so that it doesn't exceed the width and height of the

19
00:01:33,430 --> 00:01:35,950
box we reserve for it. For cover,

20
00:01:35,950 --> 00:01:41,740
it also keeps the aspect ratio but doesn't necessarily shrink the image to fit into this box, instead

21
00:01:41,740 --> 00:01:48,430
it just the crops the image beyond the boundaries of the access it would exceed otherwise.

22
00:01:48,490 --> 00:01:53,880
So we can simply play around with these different settings to get the setup you want,

23
00:01:53,920 --> 00:02:01,480
cover is the default but in case you want to keep the whole image and you don't want to crop it on any

24
00:02:02,050 --> 00:02:06,770
axis, then you could set this to contain and you can play around with the other values too.

25
00:02:06,790 --> 00:02:09,110
I'll go with cover which again is the default,

26
00:02:09,140 --> 00:02:13,960
so you could remove this prop here but to show that you can set this, I'll leave it here.

27
00:02:13,960 --> 00:02:20,390
Now this allows you to add an image here on the screen and of course you can assign more styles,

28
00:02:20,410 --> 00:02:24,010
for example we could try to give this rounded corners by now

29
00:02:24,010 --> 00:02:30,940
also adding a border radius here and setting this to let's say 200, so really large border radius to

30
00:02:30,940 --> 00:02:32,800
render a rounded image.

31
00:02:32,800 --> 00:02:39,580
Now that's looking a bit strange though, a better way of setting this is to simply wrap the image into

32
00:02:39,580 --> 00:02:48,740
a surrounding view like this and then assign the styles that should add rounded corners or drop shadows

33
00:02:48,740 --> 00:02:51,670
or anything like that to that surrounding view.

34
00:02:51,680 --> 00:02:58,130
So there you could refer to the image container prop or anything like that and add this down here in

35
00:02:58,130 --> 00:03:05,560
your stylesheet and now on that image container, you could set up a border radius of let's say 200,

36
00:03:06,240 --> 00:03:10,050
maybe also border width of 3 and a border

37
00:03:10,080 --> 00:03:11,480
color of black

38
00:03:11,490 --> 00:03:13,660
so that we also have a visual border

39
00:03:13,800 --> 00:03:21,000
and if we do that and save this, we get this strange look. The reason for this is that we haven't set a

40
00:03:21,000 --> 00:03:25,770
width and height on the container and therefore we should do this and actually use width and height

41
00:03:25,770 --> 00:03:30,480
we were setting on the image, set it on the container instead and on the image, we can now simply use

42
00:03:30,480 --> 00:03:36,630
a width of 100% and a height of 100% because the image is inside of this container,

43
00:03:36,630 --> 00:03:40,230
so a 100% here and here means it takes the width and height

44
00:03:40,230 --> 00:03:41,610
we're setting up on the container

45
00:03:41,730 --> 00:03:47,280
but now the container also has these values so that the container is sized appropriately.

46
00:03:47,280 --> 00:03:51,660
Now what you can see is something strange though, the image overlaps the container.

47
00:03:51,660 --> 00:03:53,510
We see the rounded corners,

48
00:03:53,520 --> 00:03:59,700
we see the circle here in the background, here with these black corners or edges here

49
00:03:59,700 --> 00:04:03,670
but the image isn't cropped into that circle

50
00:04:03,750 --> 00:04:04,900
so to say

51
00:04:04,900 --> 00:04:09,120
and that can be achieved by adding another property on the container that holds the image

52
00:04:09,410 --> 00:04:12,650
and that's the overflow property with the value of hidden.

53
00:04:12,660 --> 00:04:18,030
That means that any child inside of the container that would kind of break out of the container, that

54
00:04:18,030 --> 00:04:23,510
would go beyond the boundaries of that container is actually clipped, is cut off

55
00:04:23,760 --> 00:04:30,420
so that now we actually squeeze the image nicely into that container with the rounded corners we got

56
00:04:30,420 --> 00:04:31,440
here.

57
00:04:31,470 --> 00:04:36,490
Now what we can also add in addition is a little bit of margin on the vertical axis,

58
00:04:36,660 --> 00:04:41,350
maybe of 30 to have some spacing around the image top and bottom

59
00:04:41,520 --> 00:04:44,910
and with that, this doesn't look too bad I'd say.

60
00:04:44,910 --> 00:04:51,420
Now one thing you'll notice is that it's not looking like a perfect circle here on Android.

61
00:04:51,430 --> 00:04:55,990
The reason for that is that our border radius isn't calculated perfectly,

62
00:04:55,990 --> 00:04:58,570
the border radius should be half of your width and height

63
00:04:58,570 --> 00:05:01,060
and the problem is width and height aren't equal,

64
00:05:01,060 --> 00:05:06,380
so we should actually render a square here and then add a border radius to get a perfect circle.

65
00:05:06,490 --> 00:05:13,510
So the solution could be that we set the width of 300 here on the image container and have the same width

66
00:05:13,510 --> 00:05:13,960
as height

67
00:05:13,980 --> 00:05:18,640
therefore and now use a border radius that is half of that which is 150 and now we'll

68
00:05:18,640 --> 00:05:21,600
get a perfect circle on both devices.

69
00:05:21,600 --> 00:05:28,480
This also means that on very small devices, our image here, our circle might not fit on the screen if

70
00:05:28,480 --> 00:05:35,590
the devices have a screen that's smaller than 300 pixels regarding its width but we'll learn about tools,

71
00:05:35,590 --> 00:05:41,830
how to find out which device width our device has and how we can adjust styles to that in the next module.

72
00:05:41,830 --> 00:05:47,380
For now let's go with the hardcoded value here which looks good on these screens here and we'll again

73
00:05:47,500 --> 00:05:50,950
cover tools that help us with other device screens later.

74
00:05:50,950 --> 00:05:56,380
So this is how you can add an image and how you can style it, how you can make it rounded like you do here

75
00:05:56,380 --> 00:05:59,680
which of course don't have to do but which looks nice in this case here I

76
00:05:59,680 --> 00:06:03,420
think, how you can do this if you have the image as a file here.

77
00:06:03,430 --> 00:06:05,530
Now what if the image is coming from the web though?