A Glimse Into Jetpack Compose By Building an App

Learn the concepts of Jetpack Compose through this tutorial

Photo by Pathum Danthanarayana on Unsplash

Ever heard of Jetpack Compose? Jetpack Compose has been around for quite some time and most of the Android Developers today are loving it. Rest assured if you don’t know or never heard about it before, this article will explain what we need to know.

Before Jetpack Compose exists, we have to use XML to build native UI in Android, That’s why we have to go back and forth between Kotlin/Java file and XML which going to be quite bothersome when our app grows. With Jetpack Compose, our code become much less than before and we don’t have to build XML again. Instead, we put our UI in Kotlin/Java file because Jetpack Compose use declarative API for reducing the boilerplate code, making our life easier. In addition, Jetpack Compose is intuitive because it let you tell them what you want to show to user.

Google released Jetpack Compose last year, and safe to say the Android community love it

In summary, Jetpack Compose can be viewed as modern toolkit for building native UI, similar to Flutter’s widget composition or iOS’s SwiftUI.

Let’s Get Started

Photo by Duncan Meyer on Unsplash

Let’s create a simple project for us to understand more about Jetpack Compose. Open your Android Studio. You should see something like this when you click Create Project.

There are two choices: with basic implementation Jetpack Compose, or with the addition of Material3 Theme. We want to learn from the basics, so we choose Empty Compose Activity.

If you want to implement Jetpack Compose from existing project, refer this link here.

For now, I will create a project using Empty Compose Activity and I named it JetpackCompose

Now let’s dive deep into the content.

Project pane Android Studio

In Android Studio, if you look at the project pane, We have several file which is :

• Color: Here you can add or edit color for your app or its component
• Shape: Here you can add or edit shape, for shaping component native UI
• Theme: Here you can add or edit your theme for light or dark mode in your app
• Type: Here you can add or edit typography of text such as font weight, fontsize, or fontfamily
• MainActivity is your main class activity that control your application with the lifecycle. We will use it a lot.

For now, I will ignore the Color, Shape, Theme, or Type there. We won’t need it a lot, since this is a simple application that I will make to implement Jetpack Compose, but for the sake of clean code, you may use this to your advantage.

Now let’s open MainActivity.kt. For starter, your code should be like this:

Let me just explain it.

In class MainActivity, you decide the lifecycle in activity. Currently, this has function onCreate which call function onCreate from ComponentActivity class, create content that include JetpackComposeTheme.

JetpackComposeTheme is actually a function that defined it Theme.kt. Basically, it let you have a theme based on what you code in Theme.kt. The content of JetpackComposeTheme is Surface which is a composable made by Material, the content of Surface is designed as Material Surface. For now, we will use this as our base Screen for the following Material Design.

In addition, you have function Greeting with annotated Composable, which means this function is part of composable that can be called with other composable. You have to declare this function composable to let Text go into your function because Text is part of the composable function defined in Jetpack Compose.

As Surface too is part of composable function, you can add other composable function into Surface.

In addition, in Android Studio, you can view your composable function live. You just have to make a function just for a preview, and add annotation Preview and Composable in that function.

Now you have it. Nice and convenient.

Every function composable have parameter called modifier, so in case we want to view in device size, you have to add Modifier.fillMaxSize() to modifier in Text.

The result would be in this below.

You can even view this in dark mode, just add uiMode = UI_MODE_NIGHT_YES in DefaultPreview .

The DefaultPreview function should look like this.

And look at the preview.

Congratulations, you just learn Jetpack Compose.

For more information about Jetpack Compose, you can refer it here.

What’s Next?

Now that we understand the basics of composable in Jetpack Compose, let’s try to use it to code an android app.

We will create a simple app with architecture as follows :

The nodes within the image can be explained as :

• Activity: This class controls the lifecycle of activity in the application. This class will go to which fragment, depending of the screen navigation based by user.
• Fragment: This class control many screen and decide which screen should be shown based on API status. Such as if API return loading status, show Screen1, if API return success status, show Screen2.
• Screen: This class contains composable functions to be shown to user. For example in Screen1 from Fragment1, they show Text, Image, or maybe both.

So based on that, for starter, I will make this architecture right now in my code. Feel free to follow my guide.

Open MainActivity.kt, change the existing code into this:

Now my MainActivity.kt use HomeFragment, so I create HomeFragment.kt.

I use preview just in case. I applied that to every UI class except activity.

My HomeFragment.kt use HomeScreen, so I create HomeScreen.kt.

Alright, now we applied that architecture to my UI Screen in my application

Feel free to copy this. If you have another idea of how to construct this. feel free to let me know.

Conclusion

Jetpack Compose allows us to program our UI by code. By now, you know the concept of Jetpack Compose as well as how to implement it in your app.

You may view my code in my GitHub link for the complete version.

GitHub - SkyairOnline/Jetpack-Compose

In the next article, I will show you how to construct Basic Layout Jetpack Compose that involves Column and Row.

You can view my next article in here.

Layouting in Jetpack Compose