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

At ADS ’22, I shared a migration technique from current View-based apps to Compose. On this weblog submit, we check out the best way to apply that technique in follow by finishing the migration of the Sunflower pattern app to Compose.

Earlier than leaping into how we went about migrating the app, it’s useful to “set the scene” and see what the place to begin was for Sunflower earlier than we began the migration.

Sunflower initially was began as a pattern app to showcase finest practices for a number of Jetpack libraries reminiscent of Jetpack Navigation, Room, ViewPager2, and extra. It makes use of Materials Design 2 because the design language and has 5 distinct screens whereby every display is represented as a Fragment. Sunflower was really already partly written in Compose — the plant particulars display was reimplemented in Compose.

Given this place to begin, the subsequent step is to plot a plan emigrate the remainder of the app. Observe that the main target of this weblog submit is emigrate Sunflower to Compose — migrating to Materials 3 is left as a separate activity.

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

1. Construct new options with Compose
2. Construct a library of frequent UI parts
3. Change current options with Compose one display at a time
4. Take away Fragments and Navigation element and migrate to Navigation Compose

Since we gained’t be including new options to Sunflower, to finish the migration of Sunflower we will probably be specializing in steps 2–4. Particularly, we will probably be migrating the contents of every display within the app to Compose whereas creating frequent reusable UI components. When all screens are in Compose, we are able to then migrate to Navigation Compose and take away all Fragments (!!) from the app.

Observe that this weblog submit builds on high of the Migrating to Jetpack Compose codelab so in case you are new to migrating to Compose, I encourage you to verify that out first. The codelab walks you thru:

• the best way to add Compose to an current codebase
• the best way to strategy migrating current UI components to Compose separately
• the best way to reuse your app’s XML-based theming in Compose by way of Accompanist Materials 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 assist inform the place we are able to get began.

The entry level to the app is HomeViewPagerFragment which is carried out as a view pager containing two pages/Fragments — GardenFragment and PlantListFragment. If we had been emigrate HomeViewPagerFragment first, that will contain having to make use of Fragments inside Compose. We might then later should refactor our work as soon as the contained Fragments are transformed to Compose. To avoid wasting us from this problem, ideally every web page must be migrated first earlier than migrating HomeViewPagerFragment.

Given this construction, we’ll migrate all the opposite screens first (the order doesn’t matter), adopted by migrating HomeViewPagerFragment final.

I’ll spare you the nitty gritty particulars of migrating every display, although usually the migration course of for every display will be summarized by the next steps outlined beneath. As a result of Sunflower already adopted our structure finest practices and guidances, migrating screens separately was remoted to the UI layer and we didn’t should make modifications to the information layer in any respect.

1. Create a screen-level composable (e.g. PlantListScreen).
2. Begin migrating UI components from the corresponding XML by utilizing a “backside up” strategy (i.e. beginning on the leaves of the UI tree and dealing your means up). For easy screens, you are able to do this multi functional change/pull request. However for extra complicated screens, the underside up strategy means that you can make enhancements in smaller increments which will be safer to do.
3. Determine if any parts will be reused from earlier screens. For instance, each GalleryFragment and PlantListFragment have comparable checklist merchandise views however with completely different information varieties.
4. As soon as the display has been created, replace the implementation of the containing Fragment to return a ComposeView containing the newly created display wrapped round a MdcTheme so Sunflower’s current XML theming is utilized to the display.

As well as, for every screen-level composable:

1. Create a corresponding composable preview for the display. This allows us to shortly iterate by means of the display being constructed with out having to deploy the whole app to an emulator or machine.
2. For posterity, every migrated display has a corresponding UI take a look at that checks fundamental performance for the display.

To see this in motion for every display, discuss with the linked pull requests beneath:

…and now, shifting onto 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 Fragments offer you at that time. In order the final step for the migration course of, we are able to delete Fragments, their related XML information, and any associated dependencies from the app, and use Navigation Compose to route between every display.

The brand new navigation graph in Compose seems like this: