UI Theming

[00:00:00]
>> The idea is that we can set these styles directly in the theme. So what we do have available as some kind of, let's say for now global object within composable. It's something known as material theme. Material theme will let you access for a couple of things, such as color shapes and typography, and in typography, we have these options.

[00:00:28]
So, I can say that this is h5 and this is h4 chance to play with this MaterialTheme.typography. It's always called MaterialTheme. And then you can go to the preview file and customize. What's h6 or h5 for you. In fact, let me swap this. So that's the default behavior in terms of FontSize, FontFamily, FontWeight of h5 and h6.

[00:01:04]
Does it make sense? So the idea is that we can go and use all the semantic styles in the theme and try to keep working there instead of hard coding. Text directly in each text declaration, okay? Does it make sense? So, let's say that here, I wanna add some padding.

[00:01:27]
So actually, as we, so before we need to add to the function, call another argument, modifier. And we're going to add a padding modifier. Typically, we are going to use a lot multipliers of eight, in material design like 8, 16 paddings, but it's up to you. Do you remember how to get rid of that red finger, they have there, I have a red.

[00:01:56]
Never. I need to import. So Alt Enter or option return on the Mac import. So that's my modifier for the text. If I want the same for the other one. I need to add the modifier here, padding, (16 dp). So now we will see it's getting better in that way.

[00:02:26]
Maybe you're thinking, maybe to be in terms of the font size. Be careful here, because the preview has its own zoom level, that might not be the default zoom level in the real form. So, for that you have the one one icon there. Okay, that will actually show you exactly how it will look like in inches or centimeters in your screen.

[00:02:52]
Okay, so if you wanna see if it's too big or not go to one one, okay? Because that's this is not actually the size of a real phone. What if I want to see the preview in the size of real phone? Well, first we have different phones, okay?

[00:03:08]
But let's say that on Android in average, we can say that a normal width it's around 400 dp. So if I say this now you will see roughly how this will look like in a hairbrush of a real Android device, of course we have wider devices, a narrower device.

[00:03:31]
So it depends on the device but at least we have an idea of how it will look like. Okay, that's it makes sense? So when a while if you want this to be center. So if you want to center if you want to align the elements, how did he sign word?

[00:03:47]
What actually in this case we shouldn't work with the container, the column. The column is another function, right? So that means that it receives its own modifiers. Okay, so I can have for example, padding to the whole column as well. I'm not sure if I'm going to keep this one but for now, let's say just to show you that you can also apply buttons here.

[00:04:15]
You typically can apply the same modifiers to all the built in composables. If you're making your own composable it's up to you actually, if you allow the consumer of your composable to modify or not the rendering. And column has another property. It's called horizontal alignment. And for the alignment, we have a couple of options.

[00:04:45]
For example, I can say center or center horizontally. But if you look here, it says Rev, it cannot find a parameter without name. Its Rev, and also I have an something here. So what's going on with this? So why sometimes you will find, first I have a typo, so let's solve the problem like that, okay?

[00:05:11]
But sometimes you will find that there are some properties in red or some arguments in red and you don't know what's going on. Sometimes it's because there is a missing import. And at this point is finished where that an argument in a function needs an import, okay? Does it make sense?.

[00:05:34]
Well, that's because that import, it's adding another, let's say another version of that function with your arguments. Okay, so you're going to see these a lot, okay? Anyway, we'll refresh and now it's center. Okay, so we're kind of getting there, what about colors? Okay, well I can change typically colors the background colour because it has to do with the layout.

[00:06:06]
The background color is typically a modifier. So for example if I wanna change the background color of my text It's a modifier. They remember how to apply to modifiers to the same composable? Chaining. Chaining, so after the padding or before it depends on what I want. I need to add another dot.

[00:06:30]
Okay, and typically we do this. We go to a new line, okay, like so and then we can apply the background color. For now I'm going to just use any color and then we're going to work with real colors for our project. So, Build & Refresh. That's how my app looks like but now I need some separation, right, between the title and the description.

[00:06:56]
Well, for that there are two things I can do. I can add another padding. Can you add padding only, like bottom padding? Actually, you can apply, there are several versions of padding. One value for all two values the first one for horizontal, the second one for vertical or four values.

[00:07:18]
Be careful if you came from CSS, when you're in CSS when you declare four values the first one is stop and then he goes clockwise. Here it goes clockwise but the first one is left that. Now, that here is going to start. So it's different anyway. The other way that you have is there is a composer will known as a spacer.

[00:07:43]
The spacer needs a modifier. Well, first let's import the spacer. So Alt Enter, import and there is a modifier for size or for width, over height. So we have one full size where we can express width and height or just the height. So I in DPS, so I can actually say I want 16 dp.

[00:08:12]
So this is actually, so what's the difference between using a margin here? I'm not touching. I'm not modifying the text composables just for that margin that I want in between. There is some special composer for that known as a spacer. Okay, that's it make sense? It's up to you.

[00:08:35]
Which option do you wanna use, okay? If I want for example, the title to be bold and so I'm one I like, override the style. It's font weight. Some times the ad gets a little weird. It's FontWeight.Bold for example, something like that. So now my title shall be bold.

[00:09:01]
Okay, it works. Okay, so at this point, I think that you get the idea on how to start designing quickly your app. So let's start adding some new stuff first, regarding colors. So we are going to create a real app. So I already have some color for you.

[00:09:20]
So we didn't here in the companion website. There is a section setting up theme colors, okay? Where I have some color to copy and paste. So I'm going to do this, again, I'm in the companion website. So and these are colors that I have already defined where to put these colors.

[00:09:44]
Sorry, under Studio. You go to Color Kotlin file in your theme. And we add these colors. You have a nice color preview there. And if you click there, you can also change the color with the color picker. If you pay attention to the color of declaration, it's RGB with asteroids.

[00:10:13]
So this is actually instead of, if you have a color like this one, In the color that you're used to. Here it's, first, instead of the pound, we use 0x. 0x and the number because it's actually a long, it's an a long integer, okay? And also, we need to be very careful here because this is ARGV.

[00:10:40]
Is not RGV, a for alpha. And because it is an integer, if you don't provide the alpha, so the upper number, actually alpha will be 0. Alpha 0, it fully transparent, so you won't see the color. That's why, if you don't want that, you start with FF. So you take the normal color that you're used to and you prefix that with 0x FF.

[00:11:08]
Does that make sense? And then RGV. Yeah, so be careful with that. So the searchers color Global variables that we are creating. But if we want we can also go to the theme declaration and select for the dark theme and the light thing, which colors do we want to use?

[00:11:36]
So then, several composer levels will take the color from the theme automatically. In our compose ours we can use the color names that I have just selected. But if I want the buttons and many other composables to use these colors automatically, I can just use them here. So for example, I can say that my primary color is not purple 500.

[00:12:05]
It's the primary color that I selected here. I can change the name, it can be any name, okay? So then I go to the theme, I say this is the color I want. For a variant, I want the secondary color. Well, actually, there is a secondary here. We'll choose the secondary here, of course you can change this and we have an alternative version.

[00:12:29]
These are just variables that I have created. Makes sense? This is like doing CSS variables if you want with your colors. So we can set colors at the app level in the color Kotlin file. And then we can go to the theme and set your theme. Hey theme, I want your primary color to be that color.

[00:12:55]
When you are using these colors, you have two options later. You can take the color from the theme or take the color directly as a global variable. What's the advantage of using the theme that we have two sets for dark and light mode? So then based on that, it will take the right color and if you are using the global color, it's just that color and always that color, doesn't make sense, I'm saying?

[00:13:23]
So if you wanna support dark theme, then you have to use the theme colors and not directly the colors that you create a global variables. So meaning that going back to my offer, instead of using this color that we have. We can use any of my the colors that I have like Alternative1, Alternative2.

[00:13:47]
So, background Alternative1, Alternative2, and I will take that color, its way for it. See render problem. So sometimes we can go to the build menu and select clean project. Sometimes it's necessary. They come back here. By the way, let's use the same color on both alternative 1. And now it's taking my color.

[00:14:28]
So what happened? No one knows, that it's actually something in the cache of Android Studio because there are so many components here working, that sometimes the cache messed up. And you need to go to Bill and clean the pressure. It's necessary. So you need to turn off and turn on again, yeah.

[00:14:48]
Max, how did the alternative 1, how did that get to the theme? Actually, right now, I'm not using the theme. So, if you look at my code right now, I'm actually accessing alternative 1 directly. If you wanna use the theme, you need to use material theme and then access the colors.

[00:15:05]
And here you have all the colors define in the material theme. But how did that alternative 1 get associated? You need to go, if you wanna associate one of those you go to the theme. Or you make a manual. A manual you say okay, for the dark color and here you have some options like, where are the options?

[00:15:24]
Well, if you look at these dark colors, the light colors, declaration, you see they're all the possibilities that you have. For the surface, for the primary. These are just variable names that someone said on the material design. But so you can use the the color from the theme or you can use your own colors directly.

[00:15:49]
It's just funny that it says private [LAUGH]. Yeah, this variable is private. Okay, the variable, DarkColorPalette because they want you to get this color from the theme and the theme will pick dark or light based on the context. They don't want you to take the color from there directly, they want you to ask the theme for the color that's why it's private.

[00:16:16]
Okay, that's make sense? Cool, well. You don't have to defy, you can have like a system, you usually want to find your own maybe right but, there's a system like. If you wanna use the system colors? Yeah, it's fine. So I think I have a missing something here.

[00:16:33]
Yeah, because I have a dot here doing nothing. So let me go back to alternative 1. I think alternative 2 is a little brighter, lighter. So it will work better with black, like so.