Welcome back.
And this video, I would like to talk a little more about this preview here.
So what you can see is that if we go to our designer, it says hello androids, and that is still the
case, even though here we said hello Dennis or hello name as we had in our phone greeting here.
But this has the annotation of ad preview and the ad composable annotation.
So if we want to see the changes in our designer, we also need to make the changes for our preview
option down here.
So instead of saying greeting Android, we could say Welcome to tutorials, start you.
And you can see that now.
The change is being made directly inside of my previous screen, so that's something you have to consider
when you now run the application.
It will, however, still say Hello, Dennis.
So there we are.
It still says hello, Dennis.
So that's what you can basically do with your preview annotation here.
OK, so the main point here was really to see that there is a difference between the preview to the
actual project that we have.
So I want to show you something else.
And that is that this text here is in fact the composable because I just said that right?
But we didn't check it.
So how can we check whether this text is a composable?
Well, you can hold the control key and click on text, and then you will see that this is a function
called text, which has this at composable annotation assigned to it, which means that it is a composable
function.
So now you also see that there are a bunch of different properties that can be changed for this text,
and we have changed the text property of this text composable.
So you see, we created a text object, you could say, because even though this is not a clause, it's
a function, but it's pretty much like an object.
And we said it's property of text to hello name and its name is just as variable here as we saw.
So now let's go ahead and create our own composable.
OK, so let's use to add composable keyword and then create a function, and I'm going to call this
my app.
OK, so this will just be a very simple composable that will itself use a composable inside of it,
which will be text.
So now we can define properties, and you see there is one that is required.
So otherwise this text composable function will throw an error, so it's not happy with not having a
parameter.
So all of the other settings that you have here are not necessary.
You don't have to define them, but the text needs to be defined.
OK, so let's define the text property to have the value of welcome to this video, for example.
And then in the default preview, instead of using this dark profile page, theme and stuff, let's
get rid of this and use my app instead.
Like so.
So now we're using our composable that we've created inside of our default preview and can run this.
So now we need to refresh this.
It will quickly render it again, and you can see it says, welcome to this video.
Now, as a little challenge, I would recommend that you play around with this a little bit, so go
over to your text and see what could be interesting things that you can define.
So the color, for example, is unspecified.
The font size is unspecified.
So let's change the font size real quick.
Therefore, I'm going to add a comma I can add at the end here and now axis font and you can see there
are different options here.
I'm going to set the font size to, let's say, 30 dot aspe.
Therefore, I need to import ASP, so hover over ASP and either click on import here or I'll shift enter.
This will add this import here at the top, which is the Compose UI unit ASP as P stands for scalable
pixel, so it makes sure that the text is going to look similar on different device sizes.
OK, so if we now rerun it, we will see that the text should be bigger because I think by default you
see the text is now bigger because by default it had a lower number.
So it was a smaller value and it's not defined.
So here, font size, unspecified.
There are no details here.
Doesn't say how large the default value is, unfortunately, but it's going to be smaller than 30.
Probably something around 20 or 22 is the default font size.
So now you could go ahead and change a bunch more settings here.
The font family, the font style and so forth.
But for now, what was important to display in this video is how to change the preview and how to work
with composable and and the text composable.