This article 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
GitHub
Code labs
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 inspiration.
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 a solid foundation for testing in Compose. To learn more about 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.