Rendering Data & Images

[00:00:00]
>> So, the next step is to start rendering products on the screen, okay? So, for that we will start working on the menu patient that right now is empty, okay? So, in this case, we also need to render a product, and again, this is just an image, a text and a button.

[00:00:24]
The only new thing that we are going to have here is a button, to speed up the process because we have already seen how to do that. We can just take from the companion website, we are here in designing the menu. This is 5, 2, and I have here a ProductItem dummy, okay, that am going to copy and paste.

[00:00:53]
And this is something that we have already done, there are just two things that are kind of new. Every time that you base remember you have to go over your imports. Okay, have that in mind. Sometimes when you add one import, you need to add more imports, it's weird.

[00:01:17]
That's how Kotlin works with extension function. So, dp, Row, padding, everything is actually something that you need to import. Okay, By the way look at this, I have imported Color from the wrong place, actually it was the one that imported. So, now white is not actually there, but if I try to import white, it doesn't exist.

[00:01:58]
So, the thing is that when we look at the import here, Color is not important from androidx but from android. So, sometimes you need to be careful when you're importing to pick the one from androidx, okay, cool. So, we still have two errors to solve, one is that it's expecting an image in the drawable folder, okay?

[00:02:31]
This is called black coffee and I don't have that image. This is a dummy image that later we will replace with a real image from the server. So, I'm going to import that image, but I wanna show you something on purpose. In the drawable folder, I can also drag png files, so if I'm going here, there is a black coffee png file.

[00:02:54]
But if you look at the name of the file, it's BlackCoffee using title case. Android is not supporting that notation for resources, so I need to actually change the name. You must use underscore, nothing else, if not, it's not gonna work, okay? So, be careful when you're importing assets in the rest folder, they must follow a snake case, that's the name of that notation.

[00:03:25]
So, now I can drag because it's a png there is no need for converting this. So, I can drag it into the drawable folder, it's just that image, okay, like that. And then it's complaining, you have the product, doesn't contain a price. So, let me check on my model, my DataModel, the product has a price, look at this, that's why it's not working.

[00:04:04]
What's missing here, in the price? Bar, so, it was receiving the price in the constructor but it wasn't creating it property, okay? Be careful, bar or bowel must be added there, okay? So, now let's try to see a preview of that, it's just a Row, so pages, I have now within my MenuPage.

[00:04:34]
Look at that, what is this? Does anyone know what is that, how do you call that thing in Kotlin? It's a function, but not just any function, it's extending double. Okay, makes sense? So, it's actually adding a function to every double receiving digits and is actually converting that to for example two digits, the string which is formatting the double.

[00:05:09]
Doesn't make sense? So, we have a Column with an image, and then a Row, you will see it in action in a minute. The only thing that we haven't seen yet is the button. The button is actually pretty simple, you have an Onclick, and the content. So, a button can have emashes or anything inside.

[00:05:33]
Let's preview this, this is compostable, doesn't have a preview. So, it needs some arguments, it receives a Product and onAdd, because it has a button, so we can add items to the cart, okay? So, I'm going to create another function, another composable to preview the item as we saw before, okay?

[00:05:57]
So, inside here I'm going to call ProductItem and I'm going to pass a product, a dummy product with an ID, and name, price and an image, empty image it doesn't matter. And onAdd, it's actually a function, for now I'm doing nothing. But at least I wanna see if I can see how this looks like.

[00:06:24]
And this is how it looks like. I think it looks pretty good, right? So, we have what we want, name, the title, the price, a button and the image. It's just organizing elements, okay, nothing so fancy. Do you have any question on this? This is the ProductItem. Now we need to repeat this, right?

[00:06:52]
So, our product page that is right now here empty, my MenuPage, we need to repeat that. So far we were using Column, remember Column actually repeat elements. But there is another one that is more suitable for these cases, that includes automatically scroll and some other behaviors. It's called LazyColumn, and why it's called lazy, okay?

[00:07:22]
Because it's using, by default we can actually do this, it's using the idea of lazy loading. So, actually when you're rendering let's say you have 1000 elements here. It's going to render only the ones that appears on the screen. When you start scrolling, it's lazily rolling the rest of the elements.

[00:07:45]
This is similar to list, or tables on other UI toolkits, or if you're an Android classic developer, this is like RecyclerView if you have ever played with that. So, LazyColum works pretty similar with one different. We have a special item or items way to actually say, for example, that if I want 5 product items.

[00:08:14]
So, let me show you these, I have 5 of this ProductItem, so now I don't think I need my preview. I can just preview the MenuPage, but we have 5 of product items, okay? Thant looks fine, right? Maybe what I need is some kind of rapper, by the way, can I just scroll?

[00:08:39]
Remember if you wanna scroll, you can use that icon that is interactive mode. So, now I can actually scroll over my five items, okay, cool. I can stop interactive mode, and when I'm here what I need now is to maybe create some kind of container that will separate all the elements a little bit.

[00:09:05]
And for that I'm going to use a Card, something that we haven't seen yet. It's a composable in material design that represents some kind of content. That it's like a box, a baseball box, okay? So, I'm inserting the ProductItem within a Card. If I build a refresh, I won't see too much of a difference at this point, but the Card has some properties.

[00:09:31]
For example, I can change the elevation, the elevation, what's that? So, elevation is creating some kind of a shadow that makes the element like pop up from the surface. It grates on kind of a 3D effect with the shadows, okay? I can also have a shape to the Card, and for example we have a RoundedCornerShape, where I can say that they want rounded corners over the item.

[00:10:00]
So, if I wanna refresh, Now, can you see that, can you spot that we have now rounded corners there? It's getting better, we can add some padding as well, how to add paddings modifier, it's always the same. So, I've created a modifier, Modifier I am having missing comma here, padding (12.dp) like so.

[00:10:31]
And just because I'm here you can change also the background color, and I think I do have a color known as CardBackground that I prepared for this situation. So, it's getting better. Any question to this point? Nope, of course this is dummy data, okay, but we are getting there, okay?

[00:11:05]
Any question? Didn't work, well, first, let's seem if I run this on the real thing, yeah, it's there. So, I have now my list of offers as the working, the Button is doing nothing, and of course, this is dummy data. But, yeah, it starts looking like an app.