Offers Page

[00:00:00]
>> So we have our app running. It's still empty or just with one quick composable that we have just created. Right now, the operation is on GitHub. So in case you wanna follow my code, it's available on github.com firtman/coffeemasters-android. So I'm going to be pushing all the changes here.

[00:00:25]
Also, if you have the companion website in the introduction, you have actually the link to that repository, the last one. So let's quickly review the main concepts that we have here. Of course, we have Kotlin. We've reviewed the basics of the language. But also we have a composable that has to do with a chatbot compose framework.

[00:00:54]
A composable, remember, is a function that is annotated, it's decorated with @Composable. That makes actually a composable in this framework just a function. Within the function, if you see, the function is not returning anything. There is no return declaration here. So it's not returning a composable or a view or a component, no.

[00:01:19]
The composable inside, it's calling and meeting other composables just by calling them. That's how the system works. Right now we have a column that is a composable accepting other composables with two texts, in fact, one Text and one TextField. And we have used this idea of mutable state that we use this to change the state of this composable based on a user interaction or any other thing that might change over time.

[00:01:54]
And that triggers within the composition of our app the renderings that are needed. The framework is optimized to make this in the best possible way. So we don't need to think about performance initially, okay? So we are just working with functions and simple structures in memory that then are being rendered on the screen.

[00:02:18]
Do you have any question on this point? So the question is what about those AndroidX import that we have? Sometimes we have something that are on Android, Android dot or AndroidX. Everything that starts with Android, it's actually part of the SDK. So that means it's part of the operating system.

[00:02:38]
Everything that says AndroidX is part of shared pack. So it's part of the library created by the same Android team, but it's not part of the OS. So everything that is on AndroidX, it's actually going to be shipped with our app. So the binaries will ship with our app.

[00:02:57]
So that's the main difference. So now you can follow along with the GitHub repository, or if you want, following the steps that we have here. We are right now on section 3, lesson 1, creating the offers section. So I'm going to do this manually first, but then if you want the final code, you have the final code here, okay?

[00:03:26]
So I'm going to leave main activity for now for a minute. We're going to create a new file, where? In the same place where main activity Kotlin file resides. So in this folder, right-click New. There are a lot of things we can create, so many things that we will ignore.

[00:03:48]
Because with chatbot compose, we just need Kotlin functions, nothing else. So we're actually going to create a Kotlin class file. 99% of the time while doing chatbot compose applications, we are going to use that template. And then we put the name, so we're going to create an offers page.

[00:04:09]
So our app will have a page section for rendering offers like discounts and special promotions that we have at our coffee store. So let's call that offers page. It's just a file, not a Kotlin class. But anyway, anything that you select here will just change the basic template.

[00:04:31]
If you don't like it, you just need to delete the code that you have, and that's all. Because I'm now on Git, I will just say that I don't want to be asked again about adding these to my repositories. I will say add, and I don't need this interface.

[00:04:48]
So I was just playing with that. So it's just an empty file. So I'm going to create a composable. So we know a composable is a function annotated with that composable. But I'm going to show you an even faster way to create a composable. There is a shortcut or a snippet available.

[00:05:04]
You type comp and you press Tab, not Enter, Tab, and it just creates a composable with a function. And the cursor is on the right place, you just write the name. So I will just create an offer. It's just that, not a big deal, okay, but yeah, it will save a couple of seconds.

[00:05:25]
Another shortcut that we have instead of comp, it's prev that will create a composable also with a preview. Again, if you forgot about that, no worries, you go and add at preview, and that's all, okay? Well, the offer will actually be something that we are going to put on the screen that will render an offer.

[00:05:47]
So I'm going to start with two pieces of text. So I will need two text. Now because I'm going to render two elements, I need a container, as we did before. I want the title and the description below. So I want to create a column-based design. So I'm going to add column and then two text composables.

[00:06:13]
The one was first my title, and then a description. And we're going to now work with the design of this offer. So I'm going to hide the operation for a second so I have more space for the preview. So I can do something like this, and then that.

[00:06:34]
Remember that by default, mostly if you're in dark theme in your computer, something looks wrong there, and that is that the preview has no background. So it's transparent to your canvas of your IDE. So if you wanna add that, you open parenthesis in the preview declaration. And here, you see all the possibilities that you have, and one is showBackground = true.

[00:07:00]
And now you will have, by default, a white background. At least we can see the contrast of the content. What about font size, font styles? Remember that we mentioned that every composable has modifier. However, modifiers are typically applied to layout definitions, layout declarations, and also event handling. So for example, text size, font size are not typically modifiers.

[00:07:34]
They are just properties that I can call in the function. So actually, they're not properties, they are technically arguments to the function. Remember, composables are just functions. So instead of text, I can search for font, and we have fontSize, fontWeight, fontFamily, fontStyle. So if I wanna change the size, I can say fontSize =, and then the value such as 16 dot.

[00:08:06]
And here we need to specify the unit. For font sizes, we use sp, not dp. If you see red there, Alt+Enter or Option+Return to add the import. And by the way, if you go to the preferences on Android Studio, you have a way where you can actually in the editor, there are many things that you can change, right?

[00:08:30]
You can personalize the IDE. And one of the things that you can do is work with autoimports. So if you search for import here, you have autoimport in Kotlin. So go down and you can add or you can even optimize imports on the fly. So in this case, when you add an import and then you delete the object from that import, it will also delete the import, okay?

[00:08:55]
So if you wanna play with that and be more efficient with imports, you can play with those options in Android Studio. Okay, so what's sp? sp, the s is for scalable. Actually, on Android, the same on other devices, you can increase or decrease the display font size. I mean, if the user needs bigger font, the user goes to settings and increase the font size.

[00:09:26]
When we use sp, we're actually honoring that user decision. So actually, if the user needs a bigger font, our font will also be bigger. When we use dp's, they're actually being strict or fixed with our unit. If we say 16 dp, it's always 16. If we say sp, it's going to be multiplied by a number defined by the user.

[00:09:53]
On normal situations, it's 1, but it can be 1/10, 1/25, or even it can be 0/9 if the user goes and decrease or increase the default font size. There are many properties, okay, that we can use. One of those is fontStyle, okay? That fontStyle will give you some options like normal, italic, and we can create your own style.

[00:10:18]
But instead of fontStyle, okay, we're just going to play with style, that is, a TextStyle and not a FontStyle. So have in mind that it seems the same, but it's not. The FontStyle, if we want italic or normal, and the TextStyle is something that we can define. And there are many text styles available by default that you will see as something interesting, such as body.

[00:10:47]
We have H1, as well H2. So these are text styles that you can define where in the theme. In fact, if we go to the UI.theme subfolder, there is a section for type. This is for typography. And here you're going to see a couple of styles already there.

[00:11:09]
And even we can override, we can uncomment this, oops. And create more styles or override these styles. There is a missing comma here, like that. So the idea is that this is body1, button, caption, but there are more. We have h1, h2, like HTML. So these are semantic styles that we can define here.

[00:11:34]
This is like or similar to CSS class, if you want, but only for text styling. So how can I access these text styles? Of course, I can create my own text style. You can see this is a constructor, right? So I can create my own text style and put it here.

[00:11:54]
Can I create variables in my function? It's a function, so yes, I can. So I can create an immutable variable and I can say that this is my style. So I can actually use that style. So I can create the style. Again, this is like a CSS class declaration, but only for text.