Android Programming – Part 12: Intro to Jetpack Compose

Since we’ve finished our Kotlin fundamental series, let’s take a deeper dive into the latest industry trend in Android app development – Jetpack compose. If you’ve ever coded an Android app with Java or a traditional form of Kotlin, Jetpack compose is a whole different approach. It’s more intuitive and is defined to focus on efficiency and mind.

Here are three core philosophies of Jetpack compose:

Reduce boilerplate code:

In the traditional form of Java/Kotlin coding, there are plenty of duplicated classes and codes – such as adapters, lists, and many other composers. But in Jetpack compose, the whole app development process is streamlined and got rid of duplicated codes.

Consistency across Android versions:

Android is a very fragmented platform – multiple versions, OEM manufacturers, and millions of different models. Jetpack compose offers a cross-generational experience regardless of different OS versions, manufacturers, and models with its flexible UI design in mind.

Follow best practices:

When you code, you might realize there are multiple methods to implement your ideas into actual code. In Jetpack compose, there are always the best solutions and practices you may need to follow to achieve your goal in an efficient way to boost your coding productivity.

And in image 02, you can visually see the core essences of Jetpack compose.

Unlike traditional Java or Kotlin, as I mentioned earlier, Jetpack compose values less and clean codes by accessing not only its APIs but also traditional Kotlin’s APIs as well, accelerating your productivity.

Declarative UI vs Imperative approach:

Here are the key differences between the new declarative UI and the traditional imperative approach.

Imperative approach:

In the traditional approach, the XML-written UI and Java-Kotlin logic were deeply coupled, and the workflow and user interface were quite restricted and less flexible.

To build and make it work, you needed several components, such as ListView, Adapter, and Holder.

Declarative UI:

Simple and efficient, no more boilerplate code is required in declarative UI. You declare/describe in code what you want to see, and not describe what you want to see – and in the big picture, this is the whole industry’s trend.

For instance, when you want to render a list with a few items, you need LazyColumn (the equivalent of ListView/ReceyclerView).

Take a look at image 06.

From here, let’s break down the code in image 06, and take a deeper look into what’s going on there. First, you will pass some items to the card.

Card {
}

The card has a column.

And this column is clickable and has an image inside.

The text is animated at some point during the process.

 Column(Modifier.clickable {expanded = !expanded}) {
            Image(painterResource(R.drawable.jetpack_compose))
            AnimatedVisibility(expanded) {
                Text(
                    text = "Jetpack Compose",
                    style = MaterialTHeme.typograpjy.h2
                )
            }
        }

As you see, everything makes sense and implements a high level of human readability, isn’t it?

Afterthoughts:

During the last year, I spent plenty of time building my first-ever Java-powered Android app. But this year, I need to catch up with the latest Android development trend the whole industry is moving toward. And I’ll keep updating my e-learning journey through this series. So, stay tuned, folks!