Scrumskipper: Running Apple's SwiftUI sample app on Android
Scrumdinger ↗ is Apple’s canonical SwiftUI iPhone app. In this post, we’ll use Skip ↗ to run Scrumdinger as a native Android app as well!
Overview
Section titled “Overview”Honed and updated over the years, Apple’s Scrumdinger tutorial ↗ is an hours-long step-by-step guide to building a complete, modern SwiftUI app. It exercises both built-in UI components and custom drawing, and it takes advantage of Swift language features like Codable for persistence. As its rather unique name implies, the Scrumdinger app allows users to create and manage agile programming scrums ↗ on their phones.
This blog post begins where Apple’s tutorial ends. We’ll start with the final Scrumdinger source code and walk you through the process of bringing the full app to Android using Skip. You’ll learn the general steps involved in bringing an existing app to Android, and you’ll become familiar with the types of issues you may encounter and how to overcome them. Let’s get started!
Scrumdinger for iPhone
Section titled “Scrumdinger for iPhone”You can get the full Scrumdinger source code from the last page ↗ of Apple’s SwiftUI tutorial. Here’s a direct link to the zipped Xcode project:
Download and expand the zip file. Assuming you have the latest Xcode ↗ installed, you can run the iPhone app by opening TranscribingSpeechToText/Complete/Scrumdinger.xcodeproj. The first time you attempt to open it, you may need to confirm that you trust the download. Once Xcode has loaded the project, select the iOS Simulator you’d like to use and hit the Run button!
Play around with the app - this is what we’re going to bring to Android. First, however, we need to install Skip.
Skip ↗ is a tool for building fully native iOS and Android apps from a single Swift and SwiftUI codebase. It works by transpiling your Swift into Android’s Kotlin ↗ development language and adapting your SwiftUI to Android’s native Jetpack Compose ↗ UI framework.
Skip’s Android version of Scrumdinger won’t be pixel-identical to the iOS version, and it shouldn’t be. Rather, we believe in using the native UI framework and controls on each platform. This gives the best possible user experience, avoiding the uncanny-valley feel of non-native solutions.
Follow the Getting Started guide to install Skip and your Android environment, including Android Studio ↗. Next, launch Android Studio and open the Virtual Device Manager from the ellipsis menu of the Welcome dialog. From there, Create Device (e.g., “Pixel 6”) and then start the Emulator. Skip needs a connected Android device or Emulator to run the Android version of your app.
Now we’re ready to turn Scrumdinger into a dual-platform Skip app.
Scrumskipper
Section titled “Scrumskipper”It isn’t too hard to update an existing Swift Package Manager package to use Skip. Updating an existing app, however, is a different story. Building for Android requires a specific folder structure and xcodeproj configuration. We recommend creating a new Skip Xcode project, then importing the old project’s code and resources.
Enter the following command in Terminal to initialize Scrumskipper, your dual-platform version of the Scrumdinger app.
skip init --open-xcode --appid=com.xyz.Scrumskipper scrum-skipper ScrumskipperThis will create a template SwiftUI app and open it in Xcode. Let’s run the template as-is to make sure it’s working: select your desired iOS Simulator in Xcode, and hit the Run button. If you just installed or updated Skip, you may have to trust the Skip plugin:
If all goes well, you should see something like the following:
Great! Next, copy Scrumdinger’s source code to Scrumskipper:
-
Drag the
Scrumdinger/ModelsandScrumdinger/Viewsfolders from Scrumdinger’s Xcode window into theScrumskipper/Sources/Scrumskipper/folder in Scrumskipper’s window.
-
Replace Scrumskipper’s
ContentViewbody with the content of Scrumdinger’s primaryWindowGroup. Scrumskipper’sContentViewshould now look like this:
import SwiftUI
public struct ContentView: View { @StateObject private var store = ScrumStore() @State private var errorWrapper: ErrorWrapper?
public init() { }
public var body: some View { ScrumsView(scrums: $store.scrums) { Task { do { try await store.save(scrums: store.scrums) } catch { errorWrapper = ErrorWrapper(error: error, guidance: "Try again later.") } } } .task { do { try await store.load() } catch { errorWrapper = ErrorWrapper(error: error, guidance: "Scrumdinger will load sample data and continue.") } } .sheet(item: $errorWrapper) { store.scrums = DailyScrum.sampleData } content: { wrapper in ErrorView(errorWrapper: wrapper) } }}
#Preview { ContentView()}That’s it! You’ve now created Scrumskipper, a dual-platform app with all of Scrumdinger’s source code.
Migration Process
Section titled “Migration Process”It’s the moment of truth: hit that Xcode Run button!
Almost immediately, you’ll get an API unavailable error like this one:
This is our first hint that migrating an existing iOS codebase to Android is not trivial, even with Skip. Starting a new app with Skip can be a lot of fun, because it’s relatively easy to avoid problematic patterns and APIs, and you can tackle any issues one at a time as they appear. But when you take on an existing codebase, you get hit with everything at once. Even if Skip perfectly translates 95+% of your original Swift source and API calls - code that was certainly never intended to be cross-platform - that can leave dozens or even hundreds of errors to deal with!
It’s important to remember, though, that while fixing that remaining 5% can be a slog ↗, it is still 20 times less work than a 100% Android rewrite! And once you’ve worked through the errors, you’ll have a wonderfully maintainable, unified Swift and SwiftUI codebase moving forward. So let’s roll up our sleeves and get started, beginning with the error above.
The pictured error message says that the Color(_ name:) constructor isn’t available in Skip. Each of Skip’s major frameworks includes a listing you can consult of the API that is supported on Android. These listings are constantly expanding as we port additional functionality. For example, here is the table of supported SwiftUI.
When an API is unsupported, that does not mean you can’t use it in your app! Skip never forces you to compromise your iOS app. Rather, it means that you have to find a solution for your Android version. That could mean contributing an implementation for the missing API, but more often you’ll just want to take a different Android code path. To keep your iOS code intact but create an alternate Android code path, use #if SKIP (or #if !SKIP) compiler directives. The Skip documentation covers compiler directives and other platform customization techniques in detail. Let’s update the problematic code in Theme.swift to use named colors on iOS, but fall back to a constant color on Android until we implement a solution:
Change:
var mainColor: Color { Color(rawValue)}To:
var mainColor: Color { #if !SKIP Color(rawValue) #else // TODO Color.yellow #endif}This technique works for SwiftUI modifiers as well. For example, while Skip is able to translate many of SwiftUI’s accessibility modifiers for Android (in fact Skip’s native-UI approach excels in accessibility), it doesn’t have a translation for the .accessibilityElement(children:) modifier. So, update from this:
HStack { Label("Length", systemImage: "clock") Spacer() Text("\(scrum.lengthInMinutes) minutes")}.accessibilityElement(children: .combine)To this:
HStack { Label("Length", systemImage: "clock") Spacer() Text("\(scrum.lengthInMinutes) minutes")}#if !SKIP.accessibilityElement(children: .combine)#endifThe iOS version of the app is unaffected, and the Android build can proceed without the unsupported modifier.
Rinse, Lather, Repeat
Section titled “Rinse, Lather, Repeat”Getting Scrumskipper to successfully build as an iOS and Android app is a repetition of the process we began above:
- Hit the Run button.
- View the next batch of Xcode errors from the transpiler or the Kotlin compiler.
- Use compiler directives to exclude the source causing the error from the Android build.
If you see this process through as we did, you’ll end up using #if SKIP and #if !SKIP approximately 25 times in the ~1,500 lines of Scrumdinger’s Swift and SwiftUI source. In addition to the aforementioned Color(_ name:) and .accessibilityElement(children:) APIs, here is a full accounting of Scrumdinger code that causes errors:
- The
SpeechandAVFoundationframeworks used in Scrumdinger are not supported. While Skip does have a minimalAVFoundationimplementation for Android, it is not complete as of this writing. These are examples of cases where you would likely use Skip’s dependency support to integrate Android-specific libraries for the missing functionality. Timer.toleranceis not supported..ultraThinMaterialis not supported.ListFormatteris not supported. We replacedListFormatter.localizedString(byJoining: attendees.map { $0.name })withattendees.map { $0.name }.joined(separator: ", ").- SwiftUI’s
ProgressViewStyleis not yet supported. - SwiftUI’s
LabelStyleis not yet supported. - The
Themeenum’snameproperty causes an error because all Kotlin enums inherit a built-in, non-overridablenameproperty already. We changed the property tothemeName.
You can view the final result in the source of our skipapp-scrumskipper sample app.
After using compiler directives to work around these errors, we have liftoff! Scrumskipper launches on both the iOS Simulator and Android Emulator. Clearly, however, it needs additional work.
Fixups
Section titled “Fixups”As you explore the app, you’ll find many things that are missing or broken. Fortunately, it turns out that the problems are all easily fixed. View our sample app to see the completed code. We give a brief description of each issue below.
iOS App Resources
Section titled “iOS App Resources”Copying over Scrumdinger’s source code wasn’t quite enough. We forgot to copy its ding.wav resource and more importantly, the Info.plist keys that give the app permission to use the microphone and speech recognition. Without these keys, the iOS app will crash when you attempt to start a meeting.
Android SF Symbols
Section titled “Android SF Symbols”Scrumdinger uses SF Symbols for all of its in-app images. Android obviously doesn’t include these out of the box, but Skip allows you to easily add symbols to your app. Just place vector images with the desired symbol names in your Module asset catalog, as described here. For the purposes of this demo, we exported the symbols from Apple’s SF Symbols app.
MeetingView
Section titled “MeetingView”We made two additional tweaks to MeetingView. First, the custom MeetingTimerView was not rendering at all on Android. Layout issues like this are rare, but they do occur. Second, we didn’t want the Android navigation bar background to be visible. We added a couple of #if SKIP blocks to the view body to correct these issues:
var body: some View { ZStack { ... VStack { MeetingHeaderView(...) MeetingTimerView(...) #if SKIP .frame(maxWidth: .infinity, maxHeight: .infinity) #endif MeetingFooterView(...) } } ... #if SKIP .toolbarBackground(.hidden, for: .navigationBar) #endif}Persistence
Section titled “Persistence”Scrums were not being saved and restored in the Android version of the app. It turns out that Scrumdinger saved its state on transition to ScenePhase.inactive, but Android doesn’t use this phase! Android apps transition directly from active to background and back. The following simple change fixed the issue:
struct ScrumsView: View { @Environment(\.scenePhase) private var scenePhase ...
var body: some View { NavigationStack { ... } .onChange(of: scenePhase) { phase in #if !SKIP if phase == .inactive { saveAction() } #else if phase == .background { saveAction() } #endif } }}Named Colors
Section titled “Named Colors”Remember how we were going to circle back to the Theme enum’s named colors on Android? We decided to forgo the asset catalog colors altogether and just define each color programmatically with RGB values.
Results
Section titled “Results”The completed native Android app actually looks a lot like its iOS counterpart:
Conclusion
Section titled “Conclusion”Take a moment to reflect on how amazing it is that Apple’s canonical SwiftUI iPhone sample now runs as a fully native Android app. Though Skip excels at new development and the process for bringing Scrumdinger’s existing code to Android wasn’t trivial, it was still an order of magnitude faster than a re-write and did not risk regressions to the iOS version. Moreover, future maintenance and improvements will be extremely efficient thanks to having a single shared Swift and SwiftUI codebase.
The Android version doesn’t yet have all the features of the iOS one, but additional Android functionality can be added over time. Skip never forces you to compromise your iOS app, provides a fast path to a native Android version using your existing code, and has excellent integration abilities to enhance and specialize your Android app when the effort warrants it.
{: style=“text-align: center; width: 50%; margin: auto;”}
{: style=“text-align: center; width: 50%; margin: auto;”}
{: .diagram-vector }