Migrating Sunflower to Jetpack Compose | by Chris Arriola | Android Builders | Feb, 2023 | Tech Vio

At ADS ’22, I shared a technique for migrating current View-based purposes to Compose. On this weblog put up, we talk about methods to apply that technique in follow by finishing the migration of the Sunflower pattern app to Compose.

Earlier than starting the appliance migration, it is useful to “set the stage” and see what the start line was for Sunflower earlier than we began the migration.

Sunflower was initially began as a pattern utility to reveal greatest practices for varied Jetpack libraries similar to Jetpack Navigation, Room, ViewPager2, and extra. It makes use of Materials Design 2 as its design language and has 5 totally different screens the place every display is rendered as a Fragment. Truly, Sunflower was already partially written in Compose: the plant particulars display was re-implemented in Compose.

Given this place to begin, the subsequent step is to design a plan emigrate the remainder of the appliance. Please notice that the main focus of this weblog put up is migrating Sunflower to Compose; migration to Materials 3 is left as a separate activity.

The migration technique to Compose may be summarized in these steps:

1. Create new options with Compose
2. Create a library of widespread UI elements
3. Change current options with Compose one display at a time
4. Take away the Fragments and Navigation element and migrate to Compose Navigation

Since we cannot be including any new options to Sunflower, to finish the Sunflower migration, we’ll give attention to steps 2-4. Particularly, we’ll migrate the content material of every app display to Compose whereas creating widespread reusable UI components. When all screens are in Compose, we are able to migrate to Navigation Compose and take away all fragments (!!) of the app.

Word that this weblog put up relies on the Migrating to Jetpack Compose code lab, so for those who’re new to migrating to Compose, I encourage you to evaluation it first. The codelab guides you thru:

• methods to add Compose to an current code base
• methods to strategy migrating current UI components to Compose one after the other
• methods to reuse your app’s XML-based theme in Compose by way of the Companion Theme Adapter.

With our technique in place, the subsequent query is: which display ought to we migrate first? Let’s check out Sunflower’s screens and navigation construction to see the place to start out.

The entry level to the appliance is HomeViewPagerFragment Which is carried out as a pager containing two pages/Fragments: GardenFragment and PlantListFragment. if we needed to migrate HomeViewPagerFragment First, that may imply having to make use of Fragments within Compose. We’d then must refactor our work as soon as the contained Fragments are transformed to Compose. To avoid wasting us from this problem, ideally every web page ought to be migrated first earlier than migrating HomeViewPagerFragment.

Given this construction, we’ll first migrate all different screens (the order does not matter), after which we’ll migrate HomeViewPagerFragment final.

I’ll spare you the important particulars of migrating every display, however generally the migration course of for every display may be summarized within the following steps beneath. As a result of Sunflower already adopted our architectural greatest practices and guides, migrating one display at a time was remoted to the UI layer and we did not should make any adjustments to the information layer.

1. Create a composable on the display degree (eg. PlantListScreen).
2. Begin migrating UI components from the corresponding XML utilizing a “bottom-up” strategy (that’s, beginning on the leaves of the UI tree and dealing your method up). For easy screens, you are able to do all of this in a single change/pull request. However for extra complicated shows, the bottom-up strategy lets you make enhancements in smaller increments which may be safer.
3. Determine if any element from earlier screens may be reused. For instance, each GalleryFragment and PlantListFragment they’ve comparable record merchandise views however with totally different knowledge sorts.
4. As soon as the display has been created, replace the implementation of the wrapper Fragment to return a ComposeView containing the newly created display wrapped round a MdcTheme so the present Sunflower XML theme is utilized to the display.

Additionally, for every composable on the display degree:

1. Create a corresponding composite preview for the display. This enables us to rapidly iterate by means of the display being created with out having to deploy the whole app to an emulator or system.
2. For posterity, every migrated display has a corresponding UI check that exams the essential performance of the display.

To see this in motion for every display, take a look at the pull requests linked beneath:

…and now shifting on to the final (and most satisfying) step of the migration course of 🥁

As soon as all screens have been migrated to Compose, there’s little or no profit that snippets present you at that time. So, because the final step to the migration course of, we are able to take away the fragments, their related XML information, and any associated app dependencies, and use Navigation Compose to route between every display.

The brand new navigation chart in Compose appears like this:

The pull request for this variation may be seen right here.

Word that eradicating fragments and related assets doesn’t essentially should be the final step. In reality, each GardenFragment and PlantListFragment have been deleted when HomeViewPagerFragment migrated to Compose as each snippets have been used inside a ViewPager2 and weren’t a part of the navigation element graphic.

The migration from Sunflower to Compose was not with out its challenges. These weren’t essentially roadblocks that prevented Compose adoption, however slightly points to think about throughout migration.

As of this writing, Sunflower is constructed with Materials 2, and implementing the collapsed toolbar conduct requires both a guide implementation or using ComposeView inside view primarily based CoordinatorLayout. You’ll be able to then talk the nested scroll state again to CoordinatorLayout by means of Modifier.nestedScroll and rememberNestedScrollInteropConnection(). That is exactly what was accomplished in HomeViewPagerFragment (see HomeScreen.kt for a code instance).

Nevertheless, a counterpoint to that is that collapsible toolbars are nicely supported in Compose with Materials 3, the subsequent technology of Materials Design. Migrating Sunflower to Materials 3 would keep away from this drawback completely.

In Compose, state controls the UI, so stateful drawables like StateListDrawable they’re inherently incompatible with how Compose works. The answer for that is to make use of a single VectorDrawable (one of many states of the StateListDrawables) and depends on tinting the drawable for various states (see HomeScreen.kt for a code pattern).

For a full record of drawables supported in Compose, see Drawable assist.

The final step of the migration course of, which is migrating to Navigation Compose, was fairly simple to do with Sunflower. This is because of the truth that Sunflower solely has 5 screens to work with, so the migration course of was comparatively simple. Nevertheless, for purposes which have many extra screens, the lack to steadily migrate to Navigation Compose may be difficult, as that change may be fairly giant to do it all of sudden.

There’s an current characteristic request to enhance this to permit for an incremental migration in order that Navigation Compose may be introduced in earlier within the migration course of. If this impacts you, you may monitor the problem right here: https://issuetracker.google.com/points/265480755

Total, the method of migrating to Compose was easy. It was very satisfying to take away loads of code and usually simplify the deployment, which helps with future upkeep of the app.

That you simply thought? Let me know within the feedback beneath in case you have any questions or learnings to share in your utility migration journey to Compose. If you need a extra hands-on, guided expertise with migrating to Compose, you should definitely take a look at our code lab.

Blissful migration!

P.S.

The migration journey can be documented on GitHub on this doc.