1
00:00:02,560 --> 00:00:08,680
For centering the content in the middle, we can use a technique I already covered earlier, styling and

2
00:00:08,710 --> 00:00:11,500
there specifically, flexbox.

3
00:00:11,500 --> 00:00:17,470
So on our modal we have that view or in our modal we have that view, that's our root view,

4
00:00:17,500 --> 00:00:19,400
it's the only element in the modal

5
00:00:19,420 --> 00:00:25,090
and then this view of course has other child elements but that's the only direct child of our modal.

6
00:00:25,180 --> 00:00:29,310
There, we have the input container style which we apply and there, we currently set a flex direction of

7
00:00:29,350 --> 00:00:30,490
row.

8
00:00:30,490 --> 00:00:35,170
Now of course we could leave that but I'd say in the modal if we present it on a full screen like this,

9
00:00:35,620 --> 00:00:41,230
I'm actually fine with a vertical orientation so that we have the input and below that, the button.

10
00:00:41,610 --> 00:00:48,250
So I'll change this back to column or since this is the default, simply delete this flex direction

11
00:00:48,250 --> 00:00:52,580
and now I want to center this horizontally and vertically though

12
00:00:52,810 --> 00:00:59,480
and for that, we can set justify content to center here and align items to center

13
00:00:59,680 --> 00:01:01,690
but that alone won't do the trick.

14
00:01:01,780 --> 00:01:05,710
You can see if you open the modal, it's still all the way at the top

15
00:01:05,800 --> 00:01:07,920
and the reason for that is that our input container,

16
00:01:07,930 --> 00:01:14,080
so that view we're assigning this style to, by default doesn't take the full available space it can

17
00:01:14,080 --> 00:01:16,720
get in the surrounding view,

18
00:01:16,720 --> 00:01:22,450
so in this case in the modal. The modal theoretically takes the full height and width of the screen but

19
00:01:22,480 --> 00:01:25,480
the view simply doesn't take that full available space by default,

20
00:01:25,480 --> 00:01:26,560
that's just how it works,

21
00:01:26,560 --> 00:01:28,630
that's the default setting.

22
00:01:28,630 --> 00:01:31,900
It only takes the space its children require,

23
00:01:31,900 --> 00:01:33,590
so the text input and the button.

24
00:01:33,730 --> 00:01:38,830
So the view essentially has the height of text input and button combined

25
00:01:38,980 --> 00:01:47,420
and then also the width of the broadest child in this case, so of the text input here and by the way

26
00:01:47,420 --> 00:01:51,940
here, Android just didn't update correctly that's why you see this strange output here,

27
00:01:51,940 --> 00:02:02,010
you can ignore that for now. So to make the view take the full available space here, you can simply go

28
00:02:02,010 --> 00:02:04,320
to the style you apply to the view,

29
00:02:04,320 --> 00:02:11,670
in this case our input container style here and set flex to one here. Flex is a property which is

30
00:02:12,120 --> 00:02:18,270
used in conjunction with flexbox and as you learned earlier in this module, in this extra flexbox lecture,

31
00:02:18,480 --> 00:02:25,140
flex allows you to control how much space your different items inside of a flexbox take and if it's

32
00:02:25,140 --> 00:02:26,430
the only item,

33
00:02:26,430 --> 00:02:29,970
this simply ensures that this container will take all the available space.

34
00:02:29,970 --> 00:02:34,980
You could also set this to flex two, the exact value doesn't matter here if it's the only child but you

35
00:02:34,980 --> 00:02:39,570
need to set flex to make sure that this takes the full available space.

36
00:02:39,600 --> 00:02:44,160
If you don't do it, it will just take as much space as its child elements do,

37
00:02:44,280 --> 00:02:48,850
if you set flex, it will take as much space as its parent element gives it,

38
00:02:48,900 --> 00:02:50,720
so as the parent element of that view,

39
00:02:50,730 --> 00:02:52,990
the modal in this case gives the view.

40
00:02:53,340 --> 00:03:00,650
So with flex one added here, if you now save this, on iOS, you see now this is nicely centered

41
00:03:00,670 --> 00:03:05,860
and to also see this on Android, what you can do is you can open the task switcher, close this app here

42
00:03:06,070 --> 00:03:08,210
and press a here to restart

43
00:03:08,320 --> 00:03:11,890
this app on Android, doesn't like the modal as it seems

44
00:03:11,890 --> 00:03:19,970
and now here, you also see that. Now tiny adjustment is a little bit of spacing between the button and

45
00:03:20,000 --> 00:03:22,140
the input which I want to have and for that,

46
00:03:22,250 --> 00:03:30,530
I'll go to the input and add a margin bottom of 10 here but with that, I'm quite happy about that again,

47
00:03:30,530 --> 00:03:35,380
unfortunately Android is really having some issues here with my modal, so let's close it and see it

48
00:03:39,120 --> 00:03:40,430
whether that looks good,

49
00:03:40,440 --> 00:03:42,000
yes this is good.

50
00:03:42,000 --> 00:03:47,430
Now I want to make sure that when we click add here, we do actually now close the modal.