From Android to Everywhere: Jetpack Compose in a Multiplatform World

Unlock the full potential of Jetpack Compose by extending your Android development expertise to multiple platforms with Kotlin Multiplatform. In this session, we’ll explore how to create stunning, native UIs while efficiently sharing business logic across Android, iOS, and beyond. By the end of the talk, you'll get hands-on experience with a realistic demo project, showcasing practical techniques to build cross-platform apps seamlessly.

Transcript

1. Android to Everywhere: Jetpack Compose in a Multi-Platform World Yangon 2024 Su Myat Tun, Android GDE
2. What if one codebase can ran everywhere?
3. What is Compose?
5. 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?
6. @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 ) } } } }
7. @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 ) } } } }
8. @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
9. @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 ) } } } }
15. 42% Top 1k app use Jetpack Compose
16. Effortless Large Screen support? It's all possible with Jetpack Compose!
18. Active large screen devices including Foldables, Tablets, Chromebooks 300+ million
19. Source: Counterpoint Research 100+ million Forecasted foldable shipments by 2027
21. Compose Adaptive Compose offer new layouts and components that adapt seamlessly between small and large window sizes.
22. Adaptive Navigation UI
23. 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
24. NavigationSuiteScaffold( navigationSuiteItems = { Screens.entries.forEachIndexed { index, screens -> item(selected = index == selectedIndex, onClick = { selectedIndex = index }, label = { Text(text = screens.title) }) } } ){}
25. val currentWindowWidthSize = currentWindowAdaptiveInfo().windowSizeClass.windowWidthSizeClass NavigationSuiteScaffold( navigationSuiteItems = {...}, layoutType = if (currentWindowWidthSize == WindowWidthSizeClass.EXPANDED) NavigationSuiteType.NavigationDrawer else NavigationSuiteScaffoldDefaults .calculateFromAdaptiveInfo(currentWindowAdaptiveInfo()) ){}
26. ListDetailPanScaffold
27. 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
28. NavigableListDetailPaneScaffold(navigator = navigtor, listPane = {MainPane(navToDetail = {item-> navigtor.navigateTo( pane = ListDetailPaneScaffoldRole.Detail, content = "$item" )})}, detailPane = { val content = navigtor.currentDestination?.content.toString() DetailPane()})},)
29. SupportingPaneScaffold
30. Compose in Multiplatform Single codebase for UI across platforms
32. 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
33. Jetpack Compose + Kotlin Multiplatform
34. Beta Alpha
36. 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
37. 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
39. 55+ repositories
40. Compose MultiPlatform in Action Let’s make our hands dirty ;
49. Migration Journey 1) Check dependencies 2) Understand expect/actual 3) List items that only available on native
50. Migration Journey . 1) Check dependencies 2) Understand expect/actual 3) List things that are only available on Native
51. Migration Journey . 1) Check dependencies 2) Understand expect/actual 3) List things that are only available on Native
52. https://github.com/suhtun/BurmeseCrypto
53. Thank You Su Myat Tun she/her GDE Android