App Title Bar

[00:00:00]
>> But at this point, I think that with the OffersPage, we are good. But it doesn't look like an app, okay? So we actually need to make this look like an app. That's the next step. But what's an app? I mean, from a material design point of view, an app typically has a top bar.

[00:00:22]
And sometimes a bottom bar and sometimes other elements, but at least a top bar with a title, okay? So we wanna make that part right now. So within the lessons in the companion website, now we are in creating an app look. That's the one, okay? So to make this work, I'm going to create another composable.

[00:00:52]
And we can work in the activity, so within the main activity, or we can create a new file. So let's create a new file. So new Kotlin Class/File, and we can call this app. It will be like a wrapper to create the app look and feel, okay? It's a file in Kotlin, and I'm going to create a pre-viewable composable called App.

[00:01:24]
Okay, does it make sense? Within the app, what I want also is another preview of our composable called the AppTitle, that will render the title. Okay, make sense? And for the title, I have a logo. So I want to use a logo, it's the logo of our app, that is also an SVG.

[00:01:45]
And we know how to import an SVG, right? So we go to res > drawable, right-click, and we use New >, Vector Asset, okay? We take an SVG and the file is logo.SVG, from the assets that you have downloaded. And I don't like to use the prefix ic unless it's an icon.

[00:02:17]
So I'm typically deleting the prefix ic, okay? Because that's for icons. If it's an icon, it's fine, but yeah, I don't know. So next, finish. Okay, so the idea is that here I wanna see an icon, the icon of our app has a title, okay? That's kind of the idea, it's not actually a big deal.

[00:02:41]
And then we will see how to make this actually like a title. Because we can add it manually, but actually we do have something special, like a composable special that's called scaffold. A scaffold will actually make an app looks like an app in material design, where we can, as the properties of the function, we can define the topBar.

[00:03:06]
We can define the bottomBar, and it will just be placed wherever it needs. By the way, do you see at this point, because it takes some time, why do we have parenthesis and then we have a code block? It's kinda weird, and both are for the scaffold. For example, here, I can say, this is my App's content.

[00:03:33]
It's a text. So, in this code block, we put the contents of the scaffold. And these are arguments of the call. And these are the argument names. It get time to get used to the syntax, okay, of what's going on here. So for example, in the topBar, I can render my AppTitle, it's empty right now, okay, but we're going to put something there.

[00:04:04]
Okay, make sense? So, what do I need to do here? We are going to use an image. But the image alone by itself, it's just the logo. So we have already done that. So it's an image that receives a painter, and we're going to use a painterResource. Do you remember how to get resources from the res > drawable folder?

[00:04:32]
>> [INAUDIBLE]
>> R.drawable.logo. And then contentDescription is just text for accessibility, Coffee Masters Logo, okay? So now I'm not seeing the preview, that's because I mean code mode, so I need to enable split. Refresh. And if you see at the bottom, well, this is actually, well, this is kind of what my app looks like.

[00:05:09]
It's like [SOUND] it doesn't look so nice, right? Well, because the image, I want the background color to the image. And I also want like a box, like a bar, okay? So for that we are going to use, as I mentioned before, the box, Composable with the image inside.

[00:05:31]
And the box, it's acting like a frame, make sense? So the box is, again, like a container to the image. And the box can have some properties such as, for example, the background color, okay, for example. So did I use the topBar here? Yes. And before doing that, for the topBar, I'm going to do this.

[00:05:56]
There is also another composable. How will you remember all the composables? It takes time, okay? There is a composable known as TopAppBar that automatically applies the background color and the initial heights that we need at the bar. So if we put my AppTitle within the TopAppBar, it will look a little better.

[00:06:24]
Let's see, okay? It's like, okay, it looks a little better, okay? I still wanna change this, but it's better. You can see it has the minimum height. It's just applying this as a container, okay, the TopAppBar as a container. So, now, working about the box. One of the problems is that by default, the box is using the space available, not 100% of the space.

[00:06:54]
It's using what is known as wrap content. The content, the image, is using that little space, so it's box, it's also using that little space. But I want the box to take the whole width, so then I can center the image within the box. Does it makes sense?

[00:07:12]
So for that, I'm going to apply a modifier to the box. Modifier like fillMaxWidth, like that, and then I'm gonna add a property, another property of the box. So not the modifier, a property of the box. We say property but it's actually an argument, okay? It's not actually a property, it's an argument of the function.

[00:07:40]
So, that is contentAlignment. And we're going to apply here Alignment.center. If we do that, build and refresh. Now my logo appears center, okay? So where is this color coming from? That's a purple color. I didn't set that actually. Remember that we do have a material theme. What is the material theme?

[00:08:15]
We have already defined here in the theme the colors that I want. We have a primary color. But this theme is not being applied in the preview automatically. So the preview is taking the default colors from Android, which is kind of weird, okay? This is weird, I know.

[00:08:36]
So something that I can do, for the preview only, I could remove the previews that I have. And as I did before, I'm going to create another composable, That I will call App_Preview, okay? So in this preview function, I need to use my own theme. What's the name of my theme?

[00:09:03]
The name of my project, CofffeeMastersTheme, okay? And within that, I'm going to put my app. So I'm taking my app that is my composable and I'm wrapping that into my own theme. And now I'm seeing my colors. Now it's taking my theme, okay? Does it make sense? Finally, I don't want that text, this is my app's content.

[00:09:32]
What if instead of this, I put the OffersPage? The one that we did before. Now, it just start looking like an app. Okay, does it make sense? Any question?
>> Did that AppTitle get the theme? Again, I'm sorry to-
>> The AppTitle will get the theme because, first, in the real app, if I run this, it will take the theme automatically, but in the preview, it's not taking the theme.

[00:10:00]
So I have created another composable for the preview, wrapping the app within my own theme. The thing is that by default, the previews are like isolated composables. So they don't know about your theme unless you say so.
>> It's like passing the contents down [INAUDIBLE].
>> Okay, right, yeah, something like that.

[00:10:22]
But if I run this in the real emulator, what is it rendering? I don't know, at this point, because I'm just checking the previews, right? So if I run this, let's see what happens. I'm still seeing the old code, why? Well, my entry point is the main activity, okay?

[00:10:45]
And here, I have this FirstComposable. I'm rendering the FirstComposable. So I need to change these with app. And now if I run my app again, well, if you run this in the emulator, It actually looks like an app. So we have a title bar at least for now.