KotlinConf 2024

Talk slides shared at KotlinConf 2024: Diving into Advanced Compose Multiplatform Modifiers and Their Impact on Multiplatform Development.

The advent of Compose Multiplatform has fundamentally shifted the landscape of cross-platform UI development, offering developers a declarative framework to simultaneously build intuitive and powerful user interfaces with Kotlin for multiple platforms. A pivotal element within this framework is the Compose Multiplatform Modifier, empowering developers to adjust and extend Multiplatform Composables in a clean and reusable manner. This talk seeks to explore the advanced and innovative uses of Compose Multiplatform Modifiers, providing insights into how they can be leveraged to optimize, streamline, and enhance cross-platform UI development in Kotlin.

Transcript

1. Diving into advanced Compose Multiplatform Modifiers and their impact on Multiplatform development Meike Felicia Hammer @feliciaf_aye
2. Skin Color chromatophores skin cells Skin Texture Body Shape in-/de fl ate internal chambers Behaviour Pattern imitating crabs papillae muscles
3. size, layout, behaviour, appearance additional information user input clickable, scrollable, draggable, zoomable, focusable Decorate and augment Composables. Modi f iers
4. Modi f iers Usually read top to bottom Unintuitive in some cases 👀
5. Text Padding - Background - Border ORDER MATTERS Text Text
6. ORDER MATTERS Border - Size - Padding - Border
7. ORDER MATTERS Scale - Offset
8. Combination fun Size Modifiers Layout size requiredSize padding f illMaxSize sizeIn wrapContentSize
9. What happens when we chain fillMaxSize and requiredSize? Force it requiredSize()
10. Chaining multiple size modifiers does not work. Size Modifier A node has to adhere to its bounds set by the first size modifier.
11. Data Composition Layout Drawing UI size clip padding rotate Modifiers in different phases
12. Layout phase - Constraints From parent to child in the UI Tree during the layout phase. When node has measured its own size, it communicates size back up to the tree. Parent measures its children.
13. Multiplatform Modifiers
14. Compose Multiplatform independently renders components from scratch on each platform using Skia. No platform-native widgets. Material and Material 3 widgets out of the box. Behind Modifiers
15. Rendering Compose Skia iOS Desktop Canvas API Web Android Skiko Skia for rendering on Android Skiko for other platforms ( Skia for Kotlin)
16. Modify platform UIs all at once? Everything as expected?
17. Differences?
18. Discard and Save Shortcuts Discard Ctrl = Save Ctrl -
19. Advanced Modi f iers
20. Drawing Modifiers drawWithContent Base drawing modifier, controls drawing order and commands. drawBehind Wrapper for drawWithContent, draws behind content. drawWithCache Uses onDrawBehind/onDrawWithContent. Objects used during drawing are cached, until size changes or state variables change. Graphics Modifiers Additionally to the Canvas Composable
21. No need to maintain your own state DrawScope Declarative, stateless drawing API Draw Shapes, Paths, … Access to size and center of the drawing area.
22. Canvas Composable For simple drawings. Convenience Wrapper (drawBehind). Under the hood. Use .dp and convert it to pixels before drawing. Pixels.
23. DEMO Hide and seek
24. DrawWithContent - Order Hide and seek
25. DrawWithContent - Order Hide and seek
26. DEMO GlitchEffect Warning - Photosensitivity/Epilepsy/Seizures
27. Glitch Effect
28. Glitch Effect
29. DEMO Cuttlefish Camouflage
30. Cuttlefish Camouflage Fish - First Photo by David Clode on Unsplash Bee - Second Photo by Boris Smokrovic on Unsplash Frog - Third Photo by Ray Hennessy on Unsplash
31. Cuttlefish Camouflage
32. Size and Placement Only affects the draw phase. Can become invisible, when drawing outside of bounds. Graphics Layer Modifiers Does not change measured size + placement of a Composable.
33. Size and Placement Graphics Layer Modifiers
34. DEMO Layout Modifier Growing Box
35. Growing Box
36. Growing Box
37. Size and Placement Growing Box 200 300
38. Make it reusable and environment-friendly. Custom Compose Modifiers
39. Theory Chain existing modifiers together if you can. Composable function modifiers are never skipped (performance). Composable function modifiers must be called within a composable function.
40. Chained Modifiers
41. UpsideDown Simple Draw Modifier
42. Continue the modifier chain. Reference this or previously added modifiers are dropped. Use this then Modifier or implicitly return graphicsLayer … Modifier Factory
43. Composition Local
44. Composition Local Node API
45. Composition Local Node API
46. Composition Local - Node API
47. Modifier Node Element Implement equals and hashCode If not unnecessarily updated (poor performance) Use data class Node API 80 % faster Super secret text Lorem ipsum dolor.
48. Composable Modifier vs composed Factory vs Node API Simple behaviour/decoration? Custom modifier with state/effects/multipleSteps? Fine grained control while performance is critical? Node API ( Best practice) composed Factory Composable Modifier Yes No No No Composable Modifier Yes Yes Node API
49. Modi f ier Madness
50. Visual differences MADNESS 1/3 Same Modifiers Different appearance/ behaviour Example Focus animation behaviour
51. DEMO Focus behaviour
52. FocusScreen
53. FocusScreen
54. .focusProperties { canFocus = false } Apply before .clickable { } FocusScreen
55. Write custom Modifier, but then .. MADNESS 2/3 Features GraphicsLayer#toImageBi tmap ( Compose 1.7.+) ByteReadChannel .toBitmap() Import exists, but not at runtime. androidx.compose.ui. graphics.asImageBit map .lazyBackgroundImage .removeBackground
56. DEMO ImageDownload Platform specific stuff needed 🫣
57. Image Download
58. Image Download .lazyBackgroundImage
59. Image Download Android Desktop + iOS
60. Performance Skiko and Skia ensure consistent performance on all platforms. Composable function modifiers are never skipped. ModifierNodeElement must implement equals and hashCode. MADNESS 3/3
61. Embrace different input options. Impact on Multiplatform development Most enjoyable with less platform specific code. Smooth transition from Android Jetpack Compose. Modify all of them at once. UI behaviour can be slightly different then expected.
62. @feliciaf_aye Thank you, and don’t forget to vote