Jetpack Compose

[00:00:00]
>> We're using Jetpack Compose, not the classic Android XML development. And by the way, that's good news. So I've been an Android developer for ten years and I've created several apps, and the XML system was always painful. Okay, I'm not saying this is not painful, but it's less painful for at least a lot of situations.

[00:00:22]
Okay, the Android XML world was always kind of heavy compared with iOS or or other platforms. So main concepts of Jetpack Compose, first, Android activity. Actually the activity is not a Jetpack Compose concept, but we need to understand quickly what that is. In classic Android development, every screen of your app was actually an activity, okay?

[00:00:49]
An activity is something that we register into the OS. So we as developers, we register activities. Activities are like user interfaces that are known by the OS. Today, we can have an app with only one activity. And then we navigate between different views or different screens in that same activity.

[00:01:15]
That's what we're going to do with Jetpack Compose today. So we will have only one activity, okay? Then the app has a theme. A theme is a set of colors. It's a color palette. It's also a set of typography settings. It can also contain dimensions and things about your current theme, okay?

[00:01:39]
In fact, in our project, we do have a theme. If you look at the source code in the Java folder, there is a UI theme sub-folder there with some Kotlin files for the find colors, shapes, theme, and the type. And if you're getting your color, you'll see some declarations.

[00:01:58]
The most important concept that we are going to use here is a composable. A composable is actually a UI component. What we typically know as a component, a view, a widget, in other platforms. Here, it's called composable, okay? So we're going to be building composable. It's like an HTML element, if you want, or a web component.

[00:02:26]
So composables will have properties and modifiers, but we'll get into that in a minute. And modifier, it's a function that will return another composable. It will take a composable. It will modify the composable and will return another composable, okay? Typically in Jetpack Compose, modifiers are being used for layout changes, for defining width, height, borders, paddings, margins for layout, that sort of things.

[00:03:04]
And also for events when something is clickable, scrollable, and so on. That's a modifier. Composition is actually the name of, I'm simplifying this a little bit at this point, but a composition is the tree structure of what you have on the screen of your composable. So we have a composition of composables.

[00:03:29]
And a composable is being composed by the framework, that's kind of idea, okay? We have Mutable State & Remember. These are things that we will see in action in a minute, okay? So a composable by default is read only. But we can have mutable state. So things that will make our composable re-render on the screen.

[00:03:58]
We have composition local that we're not going to see today, but composition local will let you do some kind of global injection of services. It doesn't matter for now. Side effects, Side effects are for example things that are not part of the composable. For example, going to the network, that's a side effect.

[00:04:22]
We have different dimension units in Android and we're going to use two. We have px, that stands for pixel, but we are not going to use pixel. Pixel, it's a physical pixel, which means that the higher the resolution, the smaller the pixel, and we don't wanna design like that.

[00:04:44]
We're going to use most of the time dp's. dp means device independent pixel, that is unit. We will see that in action. And sp, s for scalable, we're going to use s for font sizes, okay? And I will explain what that is in a minute. I think we have a question there.

[00:05:03]
>> Yeah, is there something like hooks, such as React, or what's the concept?
>> So Jetpack Compose is actually pretty similar to React. I don't wanna say that it's a copy, but it's kind of, I mean, compared with other frameworks that are part of the same deal, like Flutter or Swift UI, Jetpack Compose is the one that is actually closer to React.

[00:05:29]
We're going to see that the mutable state is being defined in a very similar way as a React hook. So it's very similar to use a state in React. We're going to see that in action in a minute, okay? So it's pretty similar. Okay, and for graphical assets, we are going to use PNG files and SVG for vector-based graphics.

[00:05:54]
Have in mind, Android does not support SVGs. You lied to us, well, Android Studio will convert the SVG into an Android vector format, XML based. So we are going to take the SVG, but actually Android Studio will convert that into another vector-based format that is compatible with Android, okay?

[00:06:17]
So from your designers, you will probably need SVG files, okay, or PNG. Make sense?
>> What is it? I'm sorry, did you say it automatically convert to PNG?
>> Not automatically, we are going to do that, you need to convert SVGs into XML. And Android Studio will have the tool to do that, okay?

[00:06:39]
We're going to do that.