Composables Layout

[00:00:00]
>> Okay, so now that we know some basics, or some ideas, let's look here again of what we have. First, main activity is something that we need that because we are an Android application, and we won't have anything on the screen on an Android application without an activity.

[00:00:21]
But we don't wanna touch this a lot, but that's a class, and I promise you that we're not going to use OOP yellow to check back and forth. So this is the class is there, we're going to change what we wanna run there, and everything will be greater in a different place with a different idea, okay?

[00:00:42]
And everything that we're going to create it's called a composable. So actually, I'm going to delete this for a minute, the greeting and everything. And now, I don't have a preview. It says, No Preview found, okay? Which is okay, for now, I'm okay. I'm going to just clean this file.

[00:01:00]
I'm still in the same main activity calling file. But I'm going to show you, what's a composable. So a composable as I mentioned before, it's actually a UI component. Something that we put on the screen. That's called a composable, in jetpack compose. What is a composable function? So fun, and the name of the composable, this is going to be my first composable.

[00:01:27]
A composable we use title case. Okay, we use title case. So how does it know that is a composer and not just a normal function, so that we're going to compose UI with this function. We need to annotate this function without composable. So we are @composable before the function declaration, typically this can go on the same line as well but the most common situation is to use two lines.

[00:01:55]
Okay, but it's actually decorating or annotating the function declaration okay, does it makes sense. So, if you have a function, so this is that when we were saying that this is similar to react, this is similar to function based components in react when we are doing functions in react these days.

[00:02:15]
So, here we have the same idea, in UI component, a composable is a function, that function inside will emit other composers. For example, the one that I put before a text is a composable. How do I know if it's a composable? Because you can see here that it says that text is a function with @composable, okay.

[00:02:40]
So the text is a built in composable in the framework, that will receive a text as a string, okay. Hello, jetpack composer, like so. So, look at this, I already used a text before. Here, I have another version. Why do you feel that, here it says text equals and I didn't have text equals before?

[00:03:09]
Does anyone know? Because of the label. So here I didn't name the argument and here when I picked from the order complete, I press Return or Enter it order completes the name. But if you don't want the name, you can remove it. This is just your decision I remember it, it changes to the hint, is your decision if you wanna name or not the arguments because these are just functions.

[00:03:40]
Okay, it makes sense. So now I'm not seeing any preview can I preview this composable, I need to add another annotation it's add preview, if you add another annotation now, the preview will appear I need to build on refresh. So it's building and now I can see Hello jetpack compose, if it's too large, you can scroll also it's actually pretty bad but anyway, you can hit fit.

[00:04:08]
And by default, the preview does not paint the background. So here's a transparent background, if you want the preview annotation has some properties that I can pass. It's a function actually and I can say show background true, so now I have the background in the preview okay, make sense?

[00:04:34]
So can I make other composable? Yeah, as many as I want in the same file. And that's a UI component that I can put anywhere in my app. So as you can see, this is pretty simple functions. That are publishing content, what if I add another one here?

[00:04:53]
What if I copy this and paste it like this and this is my second composable? What if I have two previews? If I build and refresh, I will see both, I have two previews, just separate previews. In fact, the preview and shine is really powerful, I can have more than one preview to the same composable.

[00:05:19]
And for example, in this one, I can change some other property of the preview, such as the width of the canvas. So I wanna see how it looks like if it's 200, so I have the both. The same component but rendered in a 200 DP container. Remember DP is like pixels, but independent from the resolution.

[00:05:46]
It's similar to PXs and CSs actually. Okay, so you pick what do you wanna preview? Every time you have a preview, this is new. We have that little icon there, can you see that one? It's a phone with a with a play button. If you click there, it's going to run only this composable in the emulator, or on your real phone if you have a real phone connected and we will talk about that later.

[00:06:14]
So if I run this, is not going to run the whole app on the phone. Just that composable, okay? So you think I do have the emulator here, and it's not running so I need to wait for it to run. Waiting, you can see at the bottom it says waiting for targets to come online.

[00:06:37]
If it's not becoming automatically in sometimes it happens. Maybe it's a good idea to just run the whole app. So the emulator appears, and then run the composable again. Let's try again. I know what's going on, look at this, interesting that it happened. So it says running devices, it's actually running.

[00:07:16]
It's actually running this in my real phone. In my real pixel that I don't even have with me it's in my backpack. But because it's in the same WI-FI, I have a Wireless Connector. Well this connection with my phone and that way it was actually running there. Okay, so what I'm going to change that here from the selector to one of the emulators And run it again, stop and rerun.

[00:07:44]
Now the emulator is coming. It goes through the whole OS as you can see. So the emulator is running now, see if I can run composable. So if I try to run the composable, It's a start in the emulator from the scratch. And now we can see only that widget.

[00:08:30]
So then I can test on real devices on or emulators each composable individually.