Android to Everywhere: Jetpack Compose in a Multi-Platform World Yangon 2024 Su Myat Tun, Android GDE

What if one codebase can ran everywhere?

What is Compose?

No content

Write less code, focusing on business logic and design. Preview reduce iteration time. It’s reactive programming, so automatically updates the UI when state changes Simplicity Faster UI rendering Build complex UIs effortlessly with a rich set of composable functions. You can easily style according to the design. Powerful UI customization 01 02 03 Reusable composables promote clean and modular architecture. Works alongside existing Views, letting you migrate gradually. Improved Maintainability Seamless Interoperability Material3 support for cutting-edge design.Animation APIs for creating smooth, engaging experiences. Modern Features 01 02 03 What is compose?

@Composable fun JetpackCompose() { Card { var expanded by remember { mutableStateOf(false) } Column(Modifier .clickable { expanded = !expanded } ) { Image( painter = painterResource(R.drawable.jetpack_compose) ) AnimatedVisibility(expanded) { Text( text = "Jetpack Compose", style = MaterialTheme.typography.bodyLarge ) } } } }

@Composable fun JetpackCompose() { Card { var expanded by remember { mutableStateOf(false) } Column(Modifier .clickable { expanded = !expanded } ) { Image( painter = painterResource(R.drawable.jetpack_compose) ) AnimatedVisibility(expanded) { Text( text = "Jetpack Compose", style = MaterialTheme.typography.bodyLarge ) } } } }

@Composable fun JetpackCompose() { Card { var expanded by remember { mutableStateOf(false) } Column(Modifier .clickable { expanded = !expanded } ) { Image( painter = painterResource(R.drawable.jetpack_compose) ) Compose state: describe how ui looks at a moment

@Composable fun JetpackCompose() { Card { var expanded by remember { mutableStateOf(false) } Column(Modifier .clickable { expanded = !expanded } ) { Image( painter = painterResource(R.drawable.jetpack_compose) ) AnimatedVisibility(expanded) { Text( text = "Jetpack Compose", style = MaterialTheme.typography.bodyLarge ) } } } }

No content

No content

No content

No content

No content

42% Top 1k app use Jetpack Compose

Effortless Large Screen support? It's all possible with Jetpack Compose!

No content

Active large screen devices including Foldables, Tablets, Chromebooks 300+ million

Source: Counterpoint Research 100+ million Forecasted foldable shipments by 2027

No content

Compose Adaptive Compose offer new layouts and components that adapt seamlessly between small and large window sizes.

Adaptive Navigation UI

NavigationSuiteScaffold dynamically adjusts navigation UIs based on WindowSizeClass. 1) Navigation Bar: if the width or height is compact or if the device is in tabletop posture 2) Navigation Rail: for everything else 3) Or you can customize Navigation Drawer

NavigationSuiteScaffold( navigationSuiteItems = { Screens.entries.forEachIndexed { index, screens -> item(selected = index == selectedIndex, onClick = { selectedIndex = index }, label = { Text(text = screens.title) }) } } ){}

val currentWindowWidthSize = currentWindowAdaptiveInfo().windowSizeClass.windowWidthSizeClass NavigationSuiteScaffold( navigationSuiteItems = {...}, layoutType = if (currentWindowWidthSize == WindowWidthSizeClass.EXPANDED) NavigationSuiteType.NavigationDrawer else NavigationSuiteScaffoldDefaults .calculateFromAdaptiveInfo(currentWindowAdaptiveInfo()) ){}

ListDetailPanScaffold

Three pains * scaffold handles all calculation for allocating window space * On large screen, lists of items with detail view * On small screen, either main or supporting

NavigableListDetailPaneScaffold(navigator = navigtor, listPane = {MainPane(navToDetail = {item-> navigtor.navigateTo( pane = ListDetailPaneScaffoldRole.Detail, content = "$item" )})}, detailPane = { val content = navigtor.currentDestination?.content.toString() DetailPane()})},)

SupportingPaneScaffold

Compose in Multiplatform Single codebase for UI across platforms

No content

Kotlin Multiplatform 1. Open-Source by JetBrains 2. Support IOS, Android, macOS, Windows, Linux, and more. 3. Share business logic across them while retaining the native IOS Android Desktop Web

Jetpack Compose + Kotlin Multiplatform

Beta Alpha

No content

LeverKotlin/Native ensures performance close to native for non-UI logic. Compose uses a declarative programming model, enabling you to build UIs faster and with less boilerplate compared to XML (Android) or UIKit (iOS). Kotlin First Declarative UI allows sharing UI and business logic between Android, iOS, and Desktop applications, reduces development time Shared Codebase Across 01 02 03 Ensures that apps maintain the native look and feel on each platform. UIKit for iOS, Skia for Desktop Provides the flexibility to mix Compose with platform-specific UI when necessary Native-like Experience Extensibility Built on Jetpack Compose, which has a mature and growing ecosystem of libraries, tools, and community support. Strong Ecosystem 04 05 06 Pros of Compose Multiplatform

While Jetpack Compose has strong support on Android, Compose Multiplatform for iOS and other platforms has fewer resources, libraries, and community contributions. Developers unfamiliar with Kotlin or Compose may face a steep learning curve. Limited resources Learning Curve Compose Multiplatform is still relatively new for iOS and doesn’t match the maturity of UIKit or SwiftUI. Immature Ecosystem 01 02 03 iOS developers may find the Compose Multiplatform tooling in IntelliJ or Android Studio less refined compared to Xcode's support. Performance might lag in very complex UIs or animations compared to fully optimized native solutions. Tooling Limitations Performance Concerns For highly platform-specific UIs (e.g., iOS's UINavigationController or specific Material Design components), Compose Multiplatform might not offer a complete abstraction. Platform-Specific Features 04 05 06 Cons of Compose Multiplatform

No content

55+ repositories

Compose MultiPlatform in Action Let’s make our hands dirty ;

No content

No content

No content

No content

No content

No content

No content

No content

Migration Journey 1) Check dependencies 2) Understand expect/actual 3) List items that only available on native

Migration Journey . 1) Check dependencies 2) Understand expect/actual 3) List things that are only available on Native

Migration Journey . 1) Check dependencies 2) Understand expect/actual 3) List things that are only available on Native

https://github.com/suhtun/BurmeseCrypto

Thank You Su Myat Tun she/her GDE Android