1
00:00:01,010 --> 00:00:01,670
Welcome back.

2
00:00:02,000 --> 00:00:05,300
And this video, I would like to talk a little more about this preview here.

3
00:00:05,780 --> 00:00:13,370
So what you can see is that if we go to our designer, it says hello androids, and that is still the

4
00:00:13,370 --> 00:00:19,490
case, even though here we said hello Dennis or hello name as we had in our phone greeting here.

5
00:00:20,090 --> 00:00:27,830
But this has the annotation of ad preview and the ad composable annotation.

6
00:00:28,430 --> 00:00:35,750
So if we want to see the changes in our designer, we also need to make the changes for our preview

7
00:00:36,170 --> 00:00:37,370
option down here.

8
00:00:37,760 --> 00:00:43,940
So instead of saying greeting Android, we could say Welcome to tutorials, start you.

9
00:00:44,210 --> 00:00:46,130
And you can see that now.

10
00:00:46,610 --> 00:00:53,600
The change is being made directly inside of my previous screen, so that's something you have to consider

11
00:00:53,660 --> 00:00:55,430
when you now run the application.

12
00:00:55,730 --> 00:00:57,920
It will, however, still say Hello, Dennis.

13
00:00:58,850 --> 00:00:59,740
So there we are.

14
00:00:59,750 --> 00:01:01,190
It still says hello, Dennis.

15
00:01:01,910 --> 00:01:06,560
So that's what you can basically do with your preview annotation here.

16
00:01:09,150 --> 00:01:14,970
OK, so the main point here was really to see that there is a difference between the preview to the

17
00:01:14,970 --> 00:01:16,440
actual project that we have.

18
00:01:16,980 --> 00:01:19,110
So I want to show you something else.

19
00:01:19,350 --> 00:01:24,540
And that is that this text here is in fact the composable because I just said that right?

20
00:01:24,540 --> 00:01:25,830
But we didn't check it.

21
00:01:26,070 --> 00:01:28,830
So how can we check whether this text is a composable?

22
00:01:29,220 --> 00:01:35,250
Well, you can hold the control key and click on text, and then you will see that this is a function

23
00:01:35,250 --> 00:01:41,910
called text, which has this at composable annotation assigned to it, which means that it is a composable

24
00:01:41,910 --> 00:01:42,330
function.

25
00:01:42,810 --> 00:01:48,540
So now you also see that there are a bunch of different properties that can be changed for this text,

26
00:01:48,930 --> 00:01:54,000
and we have changed the text property of this text composable.

27
00:01:54,270 --> 00:02:00,390
So you see, we created a text object, you could say, because even though this is not a clause, it's

28
00:02:00,390 --> 00:02:02,520
a function, but it's pretty much like an object.

29
00:02:02,880 --> 00:02:10,770
And we said it's property of text to hello name and its name is just as variable here as we saw.

30
00:02:12,600 --> 00:02:15,600
So now let's go ahead and create our own composable.

31
00:02:16,020 --> 00:02:22,410
OK, so let's use to add composable keyword and then create a function, and I'm going to call this

32
00:02:22,680 --> 00:02:23,640
my app.

33
00:02:23,910 --> 00:02:30,360
OK, so this will just be a very simple composable that will itself use a composable inside of it,

34
00:02:30,360 --> 00:02:31,410
which will be text.

35
00:02:31,950 --> 00:02:37,170
So now we can define properties, and you see there is one that is required.

36
00:02:37,260 --> 00:02:43,890
So otherwise this text composable function will throw an error, so it's not happy with not having a

37
00:02:43,890 --> 00:02:44,460
parameter.

38
00:02:44,850 --> 00:02:49,380
So all of the other settings that you have here are not necessary.

39
00:02:49,440 --> 00:02:52,980
You don't have to define them, but the text needs to be defined.

40
00:02:53,460 --> 00:03:02,910
OK, so let's define the text property to have the value of welcome to this video, for example.

41
00:03:03,720 --> 00:03:08,910
And then in the default preview, instead of using this dark profile page, theme and stuff, let's

42
00:03:08,910 --> 00:03:11,730
get rid of this and use my app instead.

43
00:03:12,180 --> 00:03:12,780
Like so.

44
00:03:13,200 --> 00:03:19,530
So now we're using our composable that we've created inside of our default preview and can run this.

45
00:03:19,890 --> 00:03:21,900
So now we need to refresh this.

46
00:03:24,540 --> 00:03:28,740
It will quickly render it again, and you can see it says, welcome to this video.

47
00:03:29,850 --> 00:03:34,170
Now, as a little challenge, I would recommend that you play around with this a little bit, so go

48
00:03:34,170 --> 00:03:38,790
over to your text and see what could be interesting things that you can define.

49
00:03:39,090 --> 00:03:41,840
So the color, for example, is unspecified.

50
00:03:41,850 --> 00:03:43,560
The font size is unspecified.

51
00:03:43,560 --> 00:03:45,930
So let's change the font size real quick.

52
00:03:46,320 --> 00:03:53,880
Therefore, I'm going to add a comma I can add at the end here and now axis font and you can see there

53
00:03:53,880 --> 00:03:55,110
are different options here.

54
00:03:55,500 --> 00:04:00,300
I'm going to set the font size to, let's say, 30 dot aspe.

55
00:04:01,020 --> 00:04:10,920
Therefore, I need to import ASP, so hover over ASP and either click on import here or I'll shift enter.

56
00:04:11,280 --> 00:04:19,380
This will add this import here at the top, which is the Compose UI unit ASP as P stands for scalable

57
00:04:19,380 --> 00:04:25,320
pixel, so it makes sure that the text is going to look similar on different device sizes.

58
00:04:26,190 --> 00:04:32,990
OK, so if we now rerun it, we will see that the text should be bigger because I think by default you

59
00:04:33,000 --> 00:04:38,070
see the text is now bigger because by default it had a lower number.

60
00:04:38,070 --> 00:04:42,500
So it was a smaller value and it's not defined.

61
00:04:42,510 --> 00:04:44,730
So here, font size, unspecified.

62
00:04:45,450 --> 00:04:46,770
There are no details here.

63
00:04:46,780 --> 00:04:53,040
Doesn't say how large the default value is, unfortunately, but it's going to be smaller than 30.

64
00:04:53,040 --> 00:04:57,420
Probably something around 20 or 22 is the default font size.

65
00:04:58,020 --> 00:05:02,100
So now you could go ahead and change a bunch more settings here.

66
00:05:02,460 --> 00:05:05,490
The font family, the font style and so forth.

67
00:05:05,730 --> 00:05:13,140
But for now, what was important to display in this video is how to change the preview and how to work

68
00:05:13,140 --> 00:05:16,620
with composable and and the text composable.