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

At ADS ’22, I shared a technique for migrating current View-based purposes to Compose. On this weblog put up, we talk about how you can apply that technique in observe 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 display finest practices for numerous Jetpack libraries corresponding 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 screen is rendered as a Fragment. Truly, Sunflower was already partially written in Compose: the plant particulars display screen was re-implemented in Compose.

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

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

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

Since we can’t be including any new options to Sunflower, to finish the Sunflower migration, we’ll concentrate on steps 2-4. Particularly, we’ll migrate the content material of every app display screen to Compose whereas creating frequent reusable UI components. When all screens are in Compose, we will migrate to Navigation Compose and take away all fragments (!!) of the app.

Notice 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 evaluate it first. The codelab guides you thru:

• how you can add Compose to an current code base
• how you can method migrating current UI components to Compose one after the other
• how you can 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 screen ought to we migrate first? Let’s check out Sunflower’s screens and navigation construction to see the place to begin.

The entry level to the appliance is HomeViewPagerFragment Which is applied 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 inside Compose. We’d then have to refactor our work as soon as the contained Fragments are transformed to Compose. To avoid wasting us from this trouble, 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 would not matter), after which we’ll migrate HomeViewPagerFragment final.

I’ll spare you the important particulars of migrating every display screen, however on the whole the migration course of for every display screen may be summarized within the following steps under. As a result of Sunflower already adopted our architectural finest practices and guides, migrating one display screen at a time was remoted to the UI layer and we did not must make any modifications to the info layer.

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

Additionally, for every composable on the display screen degree:

1. Create a corresponding composite preview for the display screen. This permits us to shortly iterate via the display screen being created with out having to deploy all the app to an emulator or system.
2. For posterity, every migrated display screen has a corresponding UI take a look at that checks the essential performance of the display screen.

To see this in motion for every display screen, try the pull requests linked under:

…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 may be little or no profit that snippets present you at that time. So, because the final step to the migration course of, we will take away the fragments, their related XML information, and any associated app dependencies, and use Navigation Compose to route between every display screen.

The brand new navigation chart in Compose seems to be like this:

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

Notice that eradicating fragments and related assets doesn’t essentially must be the final step. Actually, 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 somewhat points to contemplate throughout migration.

As of this writing, Sunflower is constructed with Materials 2, and implementing the collapsed toolbar habits requires both a handbook implementation or using ComposeView inside view primarily based CoordinatorLayout. You may then talk the nested scroll state again to CoordinatorLayout via 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 properly 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 listing 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 progressively migrate to Navigation Compose may be difficult, as that change may be fairly massive to do it .

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’ll be able to observe the difficulty right here: https://issuetracker.google.com/points/265480755

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

That you just thought? Let me know within the feedback under you probably have any questions or learnings to share in your utility migration journey to Compose. If you would like a extra hands-on, guided expertise with migrating to Compose, you should definitely try our code lab.

Completely happy migration!

P.S.

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