Jetpack Compose 101 | The Ultimate Guide To Jetpack Compose

In July, 2021, Google announced the first version of Stable JetPack Compose, which is Android's modern UI toolkit to build better apps faster.

JetPack compose has made creating the native Android UIs an absolute breeze. So if you'd like to learn that, how do we do that?

Stay until the end of this video where we will discover exactly that.

Let's start by the first and most important question. Why do we need JetPack compose in the first place?

1. Less Code and Kotlin First

The first benefit that JetPack Compose provides us is that it uses less code, and it is Kotlin first. It's much easier to trace through code when all of it is written in the same language and often the same file, rather than jumping back and forth between Kotlin and xml.

Being Kotlin first has its own benefit, not only in the amount of code that is reduced, but also in the maintainability and review of the project. For much larger legacy projects, this affects even more. Having two different sets of codes that are Java and Kotlin becomes cumbersome. For large projects to maintain and review, having the entire code base into a single set affects the maintainability of the code by a lot.

2. Intuitiveness

The second benefit that Jetpack Compose provides us is its intuitiveness. Jetpack Compose is much more intuitive than xml.

The code in Jetpack Compose feels much more natural when compared to the XML code. With compose, you build small stateless components that are not tied to a specific activity of fragment that makes them easy to reuse and test In composed state is explicit and passed to the composable. That way there's only one single source of truth for the state, making it encapsulated and decoupled.

3. Interoperability

The third benefit that Jetpack Compose provides us is its interoperability with the existing Android system.

Compose is interoperable with all our existing code. It makes it much easier to implement Jetpack Compose into our existing projects. One of the added benefits of Jetpack Compose is that since it is interoperable, we can also create custom views in Jetpack Compose, and then simply use them in our XML projects.

Since creating custom views in XML projects was not as easy as Jetpack Compose has made.

4. Integration with Jetpack Libraries

 The fourth benefit that Jetpack Compose provides us is its integration with the JetPack libraries. Using the JetPack libraries are considered best practices for Android Jetpack Compose. Being a part of the JetPack libraries integrates pretty well with all of them.

5. Multiplatform Support

The fifth benefit that Jetpack Compose provides us is its multiplatform support Compose, Unlike XML is not only limited to creating the UIs for Android only, we can use Compose to create true multi-platform native apps using the same UI library Application for desktop and browser apps for Android are supported using declarative APIs. JVM uses Kotlin and Jetpack Compose browsers, the Kotlin js,

6. Improved build times and performance and reduced APK sizes.

the sixth and most important point that Jetpack Compose provides us is the improved performance, improved build times, and reduced APK sizes? Google confirmed that it saves time and gives better performance than other Android view systems.

Some notable Android mobile applications were tested by Google to confirm how powerful Jetpack Compose is and the benefits it would bring to the business market. If you'd like to learn more about the performance differences in detail, I link to an article in the description box below, we can find more details about it.

---

 Now that we are aware of the benefits that Jet Pack Compose provides us, let us head onto the screen and see how do we set up the project. So to start a new compose project, first thing you need to do is download the latest Android studio

.Once that is done, You can either select the empty compose activity or the compose activity with material components. I'm going to select the simple jetpack compose activity.

Now you can name the project, select the location, and hit the okay button. So for the name, I'm just going to name it, test, and let's give the location as it is and hit finish.

 Now that we have created out our starting project, we'll see a few things that are different from XML views here. Since we create the UI inside of the views themselves, we have composable functions. Composable functions for those coming from the React world might already be aware of. Similar to React components, Jetpack Compose uses composable, which basically are just independent components, which can be reused

just like the set content view function in activities with XM layouts, we have set content function inside jetpack compose, which is a composable fu

nction in itself. That means composable functions can be called by other composable functions only. If you notice, we have a preview annotation attached with a composable function, which allows jetpack compose to preview the function component without deploying it to the app. also. We have the option to split the screen here only as opposed to XML layouts.

If we split the screen, we'll see that the preview of the function is shown right here without even deploying it to the app. It is a fast way to preview the UI without building and deploying it to the actual simulator or a real device. We can even create our own functions to preview.

So let's create one.

Here I have created my own function, and in the default preview method, instead of the greeting function, I am calling out my function to get previewed onto the screen.

  Hey everyone. Thank you so much for your time. So let's keep it until this point, and in the next blog let's talk all about the basics of JetPack Compose. Until then, keep contributing Code to humanity.

---

Course Promo

 Hey guys, just a quick pause here. Just want to tell you that if you're interested in learning about the advanced concepts of Jetpack Compose such as creating our own animations, views, layouts, and all those little intricate details, do check out my course.

---