Jetpack Compose Hands-on Practice: My Journey Part 2

In this article, I will explain my first hands-on experience with Jetpack Compose. It builds on my previous article where I explored the theory behind Compose.

The hands-on practice has three parts

1. GitHub
2. Code labs
3. Project

GitHub

I read through tons of code to see whether I understood and could pick the patterns. I have been building on Android with Kotlin, and I could understand most parts, though I could not replicate them. Reading code samples helps me see how other developers implement features, and I also understand the common patterns I need to focus on.

Google learn Github has code samples where you learn the recommended way of building apps. https://github.com/android/compose-samples

Codelabs

Codelabs are short guided tutorials on implementing a feature, library, or concept. They have a step-by-step, hands-on guide coding experience where you are guided to implement the feature. I have been using codelabs for foundational knowledge of new features.

Below are the codelabs I used to gain practical hands-on experience with Compose.

Jetpack Compose basics

In this codelab, I had my first real hands-on experience with Compose. I also had a broader overview of Compose. It has basic concepts such as

• Setting up a Compose application - here, you start a new compose application, set up the dependencies and build your application. I recommend using Bill of Materials since it makes dependencies easily manageable. Also, do not download the solution code yet. It is better to follow the step-by-step guide. When you encounter a blocker, check the cause and find a solution online.
• Declaring and calling composable functions
• Using the default app theme and creating a design preview.
• Hands-on with basic building blogs like text, images, row, column, box, list and modifier.
• Grasp of state, state hoisting and persistence.
• Animations and theme - In this section, you change the default theme to your desired theme.

There is no catch in this codelab. It was my first hands-on, and I enjoyed seeing the design come to life.

Basic layouts in Compose

In this codelab, I learned more about designing UI elements. A deep understanding of layouts is critical in Compose. They help you replicate UI designs, foundational to a great user experience. You also learn how to follow the material design recommendations in Compose.

In this article, I learned the designing process using Compose. I took time to work with the common UI elements. One way to gain from this codelab is to take time and explore how to design other components. I use dribbble.com and behance.net for design inspirations.

Some of the components I learned through the codelab are

• TextField and associated TextFieldDefaults.
• Designing normal text.
• Importing and using Icons.
• Aligning content in row, column and box.
• Handling collections and scrolling through them.
• Slot API - handles different sections with a similar pattern.

State in Jetpack Compose

In this codelab, I learned how to handle dynamic data and behavior in Compose. Compose uses state and events extensively to display elements on the screen. In this codelab, I learned

• How to think about state and events.
• The practical difference between stateless and stateful composables.
• How to hoist state and the recommended practice in hoisting
• Persisting state using remember and rememberSaveable
• Using ViewModel as state holder for Compose

I had to refresh on some concepts of state, lifecycle, and state hoisting theory. State is another important concept in Compose. You need to spend time and ensure you understand how to handle state and events as other concepts in android build on them.

Advanced State and Side Effects in Jetpack Compose

After the first state codelab, I found this codelab useful. It builds upon knowledge from the first state codelab. In this codelab, you will learn advanced concepts in handling state in Compose.

Some of the concepts I learned in this codelab are

• Create state holders beyond ViewModels.
• Streaming data from state holders like ViewModel using Livedata, RxJava2, and Flow
• Side effects using rememberUpdatedState, productState, LaunchedEffect and DisposableEffect
• Using Coroutines in Compose.

The concepts in this codelab are quite advanced. I was frequently searching for how to implement most parts. I prefer reading over watching, so I read several articles, especially at https://proandroiddev.com/ and https://www.kodeco.com/. Like many concepts in programming, it gets better with practice.

Jetpack Compose Navigation

Navigation was my next challenge after state.

The key concepts I learned from the codelab are

• Creating routes for navigation destinations
• Creating a navigation graph and connecting it with NavHost
• Enabling common navigation host
• Building, triggering, and verifying deep links
• Navigation with arguments.

Testing in Jetpack Compose

In this codelab, I learned how to test UIs created using Compose. I combined this codelab with the last part of Compose Navigation which tests navigation. I learned

• Unit testing UI elements
• Using Test Driven Development in Compose
• Using semantics tree in Compose tests
• Merging semantics trees
• Synchronizing tests and subjects under test
• Testing Navigation components

The codelab is not exhaustive on all tests you can perform in compose. However, it offers solid foundation on testing in Compose. To learn more on Compose test, kindly check Compose cheat sheet https://developer.android.com/jetpack/compose/testing-cheatsheet

Project

The end goal of learning Compose was to build projects. With practical knowledge in layouts, state, navigation, and testing, I had a foundation to build a project with Compose. I could learn other concepts like animations, theming, and accessibility as I built the project.

I chose to rebuild one of my side projects in Compose. You can get design inspirations at behance.net and dribbble.com.

Conclusion

Learning a new technology can be boring and time intensive. Learning Compose is an iterative process and some concepts like state management may not come easy. However, concepts will become clearer and you will be building faster.