Android Adventure: Flow of Views to Composable Flow
My previous post titled “Constraint Views with Flow” shows the usage of Flow as a helper widget for ConstraintLayout to layout flexible UI. It was useful for the implementation of a schedule board in our example use case. However, this View system requires the usage of RecyclerView, Adapter, xml layouts and some custom performance handling. This post will show you an enhanced implementation of the same schedule board using Jetpack Compose 🚀: a toolkit API developed by Google to build the UI of apps on Android with Kotlin functions annotated as Composable. If you are not yet familiar with it, the official documentation is the right place to get started.
As UI App Development toolkits go on the Android Platform, Jetpack Compose is now the best way to implement user interface for Android apps. One of the main advantages is the implementation of complex UI with less code, which makes it faster to implement and smaller to maintain over time! If we take the schedule board screen as our example: RecyclerView, RecyclerView’s Adapter and UI xml definition for each item of date/hours in the list are not required anymore.
With Compose, the schedule board item looks like:
With provided data, the above block of code renders like:
The same functionality of androidx.constraint.layout.helper.widget.Flow in the View system is done by the composable FlowRow. Between lines 11 and 22, a forEach displays the list of hours into composable Buttons. And when the container runs out of horizontal space, these hour items flow into the next line as seen in the previous screenshot.
Note: ConstraintLayout still exists in Jetpack Compose but it is no longer useful here.
To use the composable ScheduleBoardItem, instead of RecyclerView and its adapter, the composable LazyColumn (between lines 5 and 17) displays each item vertically with better performance (only visible item will be composed and laid out):
For the sake of brevity, the theme colors implementation is not in these snippets and data is dummy values.
In a production app, a ViewModel should be used to provide real data: when it changes, UI would update accordingly. This is known as State.
The screenshot below showcases the main Composables that compose the ScheduleBoardScreen:
It’s done ! As you noticed, using Jetpack Compose reduces the amount of code considerably, especially in cases of complex UI layout such as the one we used as an example. Nowadays famous apps in Play Store are continuously migrated to Jetpack Compose, a sufficient proof that it is stable and it has become the new golden standard of UI development on Android, pushing the verbose Android View system to retirement. At frog, our Android app developers are now convinced of the benefit of migrating older apps to Jetpack Compose. Of course, new apps starting from scratch should also select it by default!
See you soon and happy coding! 🎉
