Is Jetpack Compose Ready for You?
Exploring updates a year after its release
Android’s Jetpack Compose version 1.0 was released nearly a year ago on July 28th. It promised a new way to build UI in our Android applications and was met with much enthusiasm. It has been regularly updated and maintained since then, and the latest release happened at the end of June (the 29th). While only a year has passed since its release, a year is a good enough time frame to inspect things from a better perspective.
I’m sure many of you have contemplated whether it might be a good time to jump on the Jetpack Compose bandwagon. There is always an undeniable desire to try and embrace new technology and see what we can do with it. But in the back of our minds, we all have a little voice that tells us that it might be too soon. Sort of like wanting to take a bite out of a pizza that just came out of the oven.
Sometimes, we have to wait until we can take that first bite.
Engines Hot
Jetpack Compose is Android’s newest toolkit for building UI natively. If you have developed applications in the past, you might be familiar with these two options when creating a layout:
- Creating an XML file
- Building the UI inside of your class by code
These ways of building UI have been with Android developers for a long time, so they are tried and true. By now, we have gotten used to them, but that doesn’t necessarily mean they are without flaws.
Developers are aware of the hassle we face when creating layouts via XML. Making sure everything is aligned properly, the need to add ids and various other attributes, the fact that you need to connect the UI in the XML with logic in your activity/fragment, the design view vs the text editor.
It can get cumbersome.
It can get messy.
It can get repetitive.
It can get frustrating.
On the other hand, it was always good to see how your UI stacks up without needing to build and run your application. The attributes themselves were pretty self-explanatory, and the variety of UI elements was large.
So why even consider moving to Jetpack Compose?
The major appeal of Jetpack Compose is the simplicity of having to write code in Kotlin that defines your UI. No more fussing about choosing relative layout over the linear layout. No more defining constraints in constraint layout. Just a simple system to lay out your design and make it come to life.
After spending considerable time with Jetpack Compose and converting one of my applications to layouts based solely on it, It has been an uphill battle, but in the end, I am pleased with the result.
This isn’t a piece that will try and dismiss Jetpack Compose. It intends to show the state of Jetpack Compose as of writing this article. Because it is better to go into something with eyes wide open.
Where Is My Jetpack?
Jetpack Compose offers a straightforward lineup of components to build your layout. But even if the offering seems simplistic and easy to navigate, there are some noticeable hiccups.
We are all familiar with GridLayout, and it makes sense that Jetpack Compose will also have some implementation of it. And it does. It’s named LazyVerticalGrid(or LazyHorizontalGrid). But if you have an application with a grid layout and want to switch to Jetpack Compose, you need to be aware that this component is currently still experimental.
As you can see above, the class is annotated with @ExpirimentalFoundationApi that reads:
This foundation API is experimental and is likely to change or be removed in the future.
and the comments above the class declaration state that:
The DSL implementation of a lazy grid layout. It composes only visible rows of the grid. This API is not stable, please consider using stable components like LazyColumn and Row to achieve the same result.
Meaning you are better off creating a grid layout using columns and rows, not this class. And when you are using an experimental API, you might get weird bugs or crashes that you have no idea how to fix and might not have a solution (link to a related issue):
The @ExperimentalFoundationApi can be found in other quite common use cases:
- Allowing an item to be clicked and long clicked (
combinedClickable), - Making an element swipeable
- Animating items in lazy lists (Jetpack Compose’s RecyclerView)
Apart from Grid, some UI elements are not yet available in Jetpack Compose. To bypass this problem, the proposed solution is to use the AndroidView composable. Think of it as a wrapper for the View object. You might be thinking that this solution fits for edge cases dealing with sophisticated views, but in reality, Google acknowledges Jetpack Composes’ shortcomings, saying:
AndroidViewis commonly needed for using Views that are infeasible to be reimplemented in Compose and there is no corresponding Compose API. Common examples for the moment areWebView,SurfaceView,AdView, etc.
So it is important to be aware of this component and your (very probable) need to use it.
Preflight Check List
Jetpack Compose has a lot to offer. No doubt about it. But once you start working with it, you realize that even though, as a whole, it might appear as a complete package, things are missing. And those things don’t necessarily have to be something special. For example, tooltips.
As of the latest version of Jetpack Compose, there is no built-in support for tooltips. Yes, there is a workaround someone has drafted that you can apply. But this isn’t an official part of Jetpack Compose, so you will always have to make sure this solution works. And in my eyes, I figured that if Jetpack Compose supports Grids, it will surely have support for Tooltips.
You might be thinking that I am exaggerating this, but as it stands, there is an issue open that is requesting Tooltips to be added, so there is a need from the community for this.
Testing… 3 2 1
Jetpack Compose allows you to do instrumentation tests only, meaning you will need a device or an emulator to run them. Also, as part of creating a test, you need to create a test rule. This allows you to test and control composables and applications in your tests. There are two types of test rules:
The difference between the two is that the latter is used to access system-related components and logic (i.e., activity, resources).
While the supplied APIs are self-explanatory, you may find yourself puzzled when you have to do something that seems very simple.
For example, if you want to perform a test that clicks on an image, there is an option to do this with onNodeWithContentDescription. But it’s not as immediately understandable as when trying to locate a button with onNodeWithText. It also assumes that you add a content description to your Image element.
Sometimes, you will find yourself in cases where none of the available API methods meet your demands, and you might end up adding test tags to your elements using testTag. Then you can use onNodeWithTag so you can target your UI correctly. This might make your code a bit less unattractive as there will be .tesTag lines spread around in your layout.
In a hybrid application (one that mixes views and Compose composables) you will need to use Espresso with the Jetpack Compose testing module. This is because, while Espresso can target views by searching via text (for example), it does not have access to Composables’ semantics. While this isn’t a bad thing per se, it is just another dependency and framework you will need to manage and handle.
Grounded
This article’s aim is not to dissuade you from using Jetpack Compose or paint it as something you should avoid altogether. In its own right, Jetpack Compose has plenty new to offer and is only in its infancy.
Nothing is perfect right out of the gate, and with time and continued efforts from Google, I am sure Jetpack Compose will be how the way we all will build our UI.
You can even look back at the year since its release and see where the progression has led. Knowing the capabilities of the technology you will use is always a good idea. That way, you can assess if it is the right tool for you to use.
As mentioned at the beginning of this article, I recently jumped on the Jetpack Compose bandwagon and converted one of my applications to use it.
You can see my application on Google Play Store with accompanying source code here.
