Introducing Jetpack Compose into your existing app

In this talk I am explaining how to introduce Jetpack Compose into your existing app by following those steps:
- Theme
- Components
- Interop (with the old UI Toolkit)
- Full Screens
- Navigation

Transcript

1. INTRODUCING JETPACK COMPOSE INTO YOUR EXISTING APP Alexander Gherschon 
 Android Tech Lead @ ONE ZERO Digital Bank
2. TIMELINE
3. TIMELINE Theme
4. TIMELINE Components Theme
5. TIMELINE Interop Components Theme
6. TIMELINE Full Screens Interop Components Theme
7. TIMELINE Navigation Full Screens Interop Components Theme
8. TIMELINE Navigation Full Screens Interop Components Theme
9. TIMELINE Navigation Full Screens Interop Components Theme
10. TIMELINE Navigation Full Screens Interop Components Theme
11. DEFINING OUR THEME
12. THEME - DEFINING @Composable fun IntroducingComposeTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colors = if (darkTheme) DarkColorPalette else LightColorPalette MaterialTheme( colors = colors, typography = Typography, shapes = Shapes, content = content ) }
13. THEME - DEFINING @Composable fun IntroducingComposeTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colors = if (darkTheme) DarkColorPalette else LightColorPalette MaterialTheme( colors = colors, typography = Typography, shapes = Shapes, content = content ) }
14. THEME - DEFINING @Composable fun IntroducingComposeTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colors = if (darkTheme) DarkColorPalette else LightColorPalette MaterialTheme( colors = colors, typography = Typography, shapes = Shapes, content = content ) }
15. THEME - DEFINING @Composable fun IntroducingComposeTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colors = if (darkTheme) DarkColorPalette else LightColorPalette MaterialTheme( colors = colors, typography = Typography, shapes = Shapes, content = content ) }
16. THEME - DEFINING @Composable fun IntroducingComposeTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colors = if (darkTheme) DarkColorPalette else LightColorPalette MaterialTheme( colors = colors, typography = Typography, shapes = Shapes, content = content ) }
17. THEME - DEFINING @Composable fun IntroducingComposeTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colors = if (darkTheme) DarkColorPalette else LightColorPalette MaterialTheme( colors = colors, typography = Typography, shapes = Shapes, content = content ) }
18. THEME - USAGE class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { IntroducingComposeTheme { GreetingScreen() } } } }
19. THEME - USAGE class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { IntroducingComposeTheme { GreetingScreen() } } } }
20. THEME - USAGE class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { IntroducingComposeTheme { GreetingScreen() } } } }
21. THEME - USAGE class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { IntroducingComposeTheme { GreetingScreen() } } } }
22. THEME - USAGE class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { IntroducingComposeTheme { GreetingScreen() } } } }
23. THEME - USAGE class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { IntroducingComposeTheme { GreetingScreen() } } } } @Composable fun GreetingScreen() { Surface( modi fi er = Modi fi er. fi llMaxSize(), color = MaterialTheme.colors.primary ) { Text(text = "Hello KotlinTLV!") } }
24. THEME - USAGE class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { IntroducingComposeTheme { GreetingScreen() } } } } @Composable fun GreetingScreen() { Surface( modi fi er = Modi fi er. fi llMaxSize(), color = MaterialTheme.colors.primary ) { Text(text = "Hello KotlinTLV!") } }
25. THEME - USAGE class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { IntroducingComposeTheme { GreetingScreen() } } } } @Composable fun GreetingScreen() { Surface( modi fi er = Modi fi er. fi llMaxSize(), color = MaterialTheme.colors.primary ) { Text(text = "Hello KotlinTLV!") } }
26. THEME - USAGE class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { IntroducingComposeTheme { GreetingScreen() } } } } @Composable fun GreetingScreen() { Surface( modi fi er = Modi fi er. fi llMaxSize(), color = MaterialTheme.colors.primary ) { Text(text = "Hello KotlinTLV!") } }
27. THEME - USAGE class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { IntroducingComposeTheme { GreetingScreen() } } } } @Composable fun GreetingScreen() { Surface( modi fi er = Modi fi er. fi llMaxSize(), color = MaterialTheme.colors.primary ) { Text(text = "Hello KotlinTLV!") } }
28. THEME - HOW DOES THIS WORK? class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { IntroducingComposeTheme { GreetingScreen() } } } } @Composable fun GreetingScreen() { Surface( modi fi er = Modi fi er. fi llMaxSize(), color = MaterialTheme.colors.primary ) { Text(text = "Hello KotlinTLV!") } }
29. A LOOK AT MATERIAL THEME
30. THEME - MATERIAL THEME @Composable fun IntroducingComposeTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colors = if (darkTheme) DarkColorPalette else LightColorPalette MaterialTheme( colors = colors, typography = Typography, shapes = Shapes, content = content ) }
31. THEME - MATERIAL THEME @Composable fun MaterialTheme( colors: Colors = MaterialTheme.colors, typography: Typography = MaterialTheme.typography, shapes: Shapes = MaterialTheme.shapes, content: @Composable () -> Unit ) { CompositionLocalProvider( LocalColors provides colors, // more provided compositionLocals content = content ) }
32. THEME - MATERIAL THEME @Composable fun MaterialTheme( colors: Colors = MaterialTheme.colors, typography: Typography = MaterialTheme.typography, shapes: Shapes = MaterialTheme.shapes, content: @Composable () -> Unit ) { CompositionLocalProvider( LocalColors provides colors, // more provided compositionLocals content = content ) } object MaterialTheme { val colors: Colors @Composable @ReadOnlyComposable get() = LocalColors.current val typography: Typography // same val shapes: Shapes // same }
33. THEME - MATERIAL THEME @Composable fun MaterialTheme( colors: Colors = MaterialTheme.colors, typography: Typography = MaterialTheme.typography, shapes: Shapes = MaterialTheme.shapes, content: @Composable () -> Unit ) { CompositionLocalProvider( LocalColors provides colors, // more provided compositionLocals content = content ) } object MaterialTheme { val colors: Colors @Composable @ReadOnlyComposable get() = LocalColors.current val typography: Typography // same val shapes: Shapes // same }
34. THEME - MATERIAL THEME @Composable fun MaterialTheme( colors: Colors = MaterialTheme.colors, typography: Typography = MaterialTheme.typography, shapes: Shapes = MaterialTheme.shapes, content: @Composable () -> Unit ) { CompositionLocalProvider( LocalColors provides colors, // more provided compositionLocals content = content ) } object MaterialTheme { val colors: Colors @Composable @ReadOnlyComposable get() = LocalColors.current val typography: Typography // same val shapes: Shapes // same }
35. THEME - MATERIAL THEME @Composable fun MaterialTheme( colors: Colors = MaterialTheme.colors, typography: Typography = MaterialTheme.typography, shapes: Shapes = MaterialTheme.shapes, content: @Composable () -> Unit ) { CompositionLocalProvider( LocalColors provides colors, // more provided compositionLocals content = content ) } object MaterialTheme { val colors: Colors @Composable @ReadOnlyComposable get() = LocalColors.current val typography: Typography // same val shapes: Shapes // same }
36. THEME - MATERIAL THEME @Composable fun MaterialTheme( colors: Colors = MaterialTheme.colors, typography: Typography = MaterialTheme.typography, shapes: Shapes = MaterialTheme.shapes, content: @Composable () -> Unit ) { CompositionLocalProvider( LocalColors provides colors, // more provided compositionLocals content = content ) } object MaterialTheme { val colors: Colors @Composable @ReadOnlyComposable get() = LocalColors.current val typography: Typography // same val shapes: Shapes // same }
37. THEME - MATERIAL THEME @Composable fun MaterialTheme( colors: Colors = MaterialTheme.colors, typography: Typography = MaterialTheme.typography, shapes: Shapes = MaterialTheme.shapes, content: @Composable () -> Unit ) { CompositionLocalProvider( LocalColors provides colors, // more provided compositionLocals content = content ) } object MaterialTheme { val colors: Colors @Composable @ReadOnlyComposable get() = LocalColors.current val typography: Typography // same val shapes: Shapes // same } internal val LocalColors = staticCompositionLocalOf { error("LocalColors was not provided") }
38. THEME - MATERIAL THEME @Composable fun MaterialTheme( colors: Colors = MaterialTheme.colors, typography: Typography = MaterialTheme.typography, shapes: Shapes = MaterialTheme.shapes, content: @Composable () -> Unit ) { CompositionLocalProvider( LocalColors provides colors, // more provided compositionLocals content = content ) } object MaterialTheme { val colors: Colors @Composable @ReadOnlyComposable get() = LocalColors.current val typography: Typography // same val shapes: Shapes // same } internal val LocalColors = staticCompositionLocalOf { error("LocalColors was not provided") }
39. THEME - MATERIAL THEME @Composable fun MaterialTheme( colors: Colors = MaterialTheme.colors, typography: Typography = MaterialTheme.typography, shapes: Shapes = MaterialTheme.shapes, content: @Composable () -> Unit ) { CompositionLocalProvider( LocalColors provides colors, // more provided compositionLocals content = content ) } object MaterialTheme { val colors: Colors @Composable @ReadOnlyComposable get() = LocalColors.current val typography: Typography // same val shapes: Shapes // same } internal val LocalColors = staticCompositionLocalOf { error("LocalColors was not provided") }
40. THEME - COMPOSITIONLOCALS
41. FULLY-CUSTOM THEME
42. THEME - FULLY-CUSTOM THEME @Composable fun OZTheme( isDarkMode: Boolean = isSystemInDarkTheme(), isGeneralMode: Boolean = false, content: @Composable () -> Unit, ) { val colors = if (isDarkMode) ozDarkColors else ozLightColors val generalColors = ozGeneralColors val typography = OZTypography() val shapes = OZShapes() CompositionLocalProvider( LocalOZColors provides colors, LocalOZGeneralColors provides generalColors, LocalOZTypography provides typography, LocalOZShapes provides shapes, LocalIsDarkMode provides isDarkMode, LocalIsGeneralMode provides isGeneralMode, content = content ) }
43. THEME - FULLY-CUSTOM THEME @Composable fun OZTheme( isDarkMode: Boolean = isSystemInDarkTheme(), isGeneralMode: Boolean = false, content: @Composable () -> Unit, ) { val colors = if (isDarkMode) ozDarkColors else ozLightColors val generalColors = ozGeneralColors val typography = OZTypography() val shapes = OZShapes() CompositionLocalProvider( LocalOZColors provides colors, LocalOZGeneralColors provides generalColors, LocalOZTypography provides typography, LocalOZShapes provides shapes, LocalIsDarkMode provides isDarkMode, LocalIsGeneralMode provides isGeneralMode, content = content ) }
44. THEME - FULLY-CUSTOM THEME @Composable fun OZTheme( isDarkMode: Boolean = isSystemInDarkTheme(), isGeneralMode: Boolean = false, content: @Composable () -> Unit, ) { val colors = if (isDarkMode) ozDarkColors else ozLightColors val generalColors = ozGeneralColors val typography = OZTypography() val shapes = OZShapes() CompositionLocalProvider( LocalOZColors provides colors, LocalOZGeneralColors provides generalColors, LocalOZTypography provides typography, LocalOZShapes provides shapes, LocalIsDarkMode provides isDarkMode, LocalIsGeneralMode provides isGeneralMode, content = content ) }
45. THEME - FULLY-CUSTOM THEME @Composable fun OZTheme( isDarkMode: Boolean = isSystemInDarkTheme(), isGeneralMode: Boolean = false, content: @Composable () -> Unit, ) { val colors = if (isDarkMode) ozDarkColors else ozLightColors val generalColors = ozGeneralColors val typography = OZTypography() val shapes = OZShapes() CompositionLocalProvider( LocalOZColors provides colors, LocalOZGeneralColors provides generalColors, LocalOZTypography provides typography, LocalOZShapes provides shapes, LocalIsDarkMode provides isDarkMode, LocalIsGeneralMode provides isGeneralMode, content = content ) }
46. THEME - FULLY-CUSTOM THEME @Composable fun OZTheme( isDarkMode: Boolean = isSystemInDarkTheme(), isGeneralMode: Boolean = false, content: @Composable () -> Unit, ) { val colors = if (isDarkMode) ozDarkColors else ozLightColors val generalColors = ozGeneralColors val typography = OZTypography() val shapes = OZShapes() CompositionLocalProvider( LocalOZColors provides colors, LocalOZGeneralColors provides generalColors, LocalOZTypography provides typography, LocalOZShapes provides shapes, LocalIsDarkMode provides isDarkMode, LocalIsGeneralMode provides isGeneralMode, content = content ) }
47. THEME - FULLY-CUSTOM THEME @Composable fun OZTheme( isDarkMode: Boolean = isSystemInDarkTheme(), isGeneralMode: Boolean = false, content: @Composable () -> Unit, ) { val colors = if (isDarkMode) ozDarkColors else ozLightColors val generalColors = ozGeneralColors val typography = OZTypography() val shapes = OZShapes() CompositionLocalProvider( LocalOZColors provides colors, LocalOZGeneralColors provides generalColors, LocalOZTypography provides typography, LocalOZShapes provides shapes, LocalIsDarkMode provides isDarkMode, LocalIsGeneralMode provides isGeneralMode, content = content ) }
48. THEME - FULLY-CUSTOM THEME @Composable fun OZTheme( isDarkMode: Boolean = isSystemInDarkTheme(), isGeneralMode: Boolean = false, content: @Composable () -> Unit, ) { val colors = if (isDarkMode) ozDarkColors else ozLightColors val generalColors = ozGeneralColors val typography = OZTypography() val shapes = OZShapes() CompositionLocalProvider( LocalOZColors provides colors, LocalOZGeneralColors provides generalColors, LocalOZTypography provides typography, LocalOZShapes provides shapes, LocalIsDarkMode provides isDarkMode, LocalIsGeneralMode provides isGeneralMode, content = content ) }
49. THEME - FULLY-CUSTOM THEME @Composable fun OZTheme( isDarkMode: Boolean = isSystemInDarkTheme(), isGeneralMode: Boolean = false, content: @Composable () -> Unit, ) { val colors = if (isDarkMode) ozDarkColors else ozLightColors val generalColors = ozGeneralColors val typography = OZTypography() val shapes = OZShapes() CompositionLocalProvider( LocalOZColors provides colors, LocalOZGeneralColors provides generalColors, LocalOZTypography provides typography, LocalOZShapes provides shapes, LocalIsDarkMode provides isDarkMode, LocalIsGeneralMode provides isGeneralMode, content = content ) }
50. THEME - FULLY-CUSTOM THEME @Composable fun OZTheme( isDarkMode: Boolean = isSystemInDarkTheme(), isGeneralMode: Boolean = false, content: @Composable () -> Unit, ) { val colors = if (isDarkMode) ozDarkColors else ozLightColors val generalColors = ozGeneralColors val typography = OZTypography() val shapes = OZShapes() CompositionLocalProvider( LocalOZColors provides colors, LocalOZGeneralColors provides generalColors, LocalOZTypography provides typography, LocalOZShapes provides shapes, LocalIsDarkMode provides isDarkMode, LocalIsGeneralMode provides isGeneralMode, content = content ) } object OZTheme { val isDarkMode: Boolean @Composable get() = LocalIsDarkMode.current val isGeneralMode: Boolean @Composable get() = LocalIsGeneralMode.current val colors: OZColors @Composable get() = LocalOZColors.current val generalColors: OZGeneralColors @Composable get() = LocalOZGeneralColors.current val typography: OZTypography @Composable get() = LocalOZTypography.current val shapes: OZShapes @Composable get() = LocalOZShapes.current }
51. THEME - FULLY-CUSTOM THEME @Composable fun OZTheme( isDarkMode: Boolean = isSystemInDarkTheme(), isGeneralMode: Boolean = false, content: @Composable () -> Unit, ) { val colors = if (isDarkMode) ozDarkColors else ozLightColors val generalColors = ozGeneralColors val typography = OZTypography() val shapes = OZShapes() CompositionLocalProvider( LocalOZColors provides colors, LocalOZGeneralColors provides generalColors, LocalOZTypography provides typography, LocalOZShapes provides shapes, LocalIsDarkMode provides isDarkMode, LocalIsGeneralMode provides isGeneralMode, content = content ) } object OZTheme { val isDarkMode: Boolean @Composable get() = LocalIsDarkMode.current val isGeneralMode: Boolean @Composable get() = LocalIsGeneralMode.current val colors: OZColors @Composable get() = LocalOZColors.current val generalColors: OZGeneralColors @Composable get() = LocalOZGeneralColors.current val typography: OZTypography @Composable get() = LocalOZTypography.current val shapes: OZShapes @Composable get() = LocalOZShapes.current }
52. THEME - FULLY-CUSTOM THEME @Composable fun OZTheme( isDarkMode: Boolean = isSystemInDarkTheme(), isGeneralMode: Boolean = false, content: @Composable () -> Unit, ) { val colors = if (isDarkMode) ozDarkColors else ozLightColors val generalColors = ozGeneralColors val typography = OZTypography() val shapes = OZShapes() CompositionLocalProvider( LocalOZColors provides colors, LocalOZGeneralColors provides generalColors, LocalOZTypography provides typography, LocalOZShapes provides shapes, LocalIsDarkMode provides isDarkMode, LocalIsGeneralMode provides isGeneralMode, content = content ) } object OZTheme { val isDarkMode: Boolean @Composable get() = LocalIsDarkMode.current val isGeneralMode: Boolean @Composable get() = LocalIsGeneralMode.current val colors: OZColors @Composable get() = LocalOZColors.current val generalColors: OZGeneralColors @Composable get() = LocalOZGeneralColors.current val typography: OZTypography @Composable get() = LocalOZTypography.current val shapes: OZShapes @Composable get() = LocalOZShapes.current }
53. THEME - CONCLUSION • Use Material Theme as your Design System if it’s enough for you • Have your designers build your brand aka Design System • Translate Your Design System into your own Fully Custom Theme
54. TIMELINE Navigation Full Screens Interop Components Theme Questions?
55. TIMELINE Navigation Full Screens Interop Components Theme
56. BUILDING A COMPONENT
57. COMPONENTS - STEP PROGRESS BAR
58. COMPONENTS - STEP PROGRESS BAR @Composable fun StepProgressBar( modi fi er: Modi fi er = Modi fi er, variant: StepProgressBarVariant = StepProgressBarVariant.Regular, numberOfSteps: Int, currentStep: Int ) { // some code here }
59. COMPONENTS - STEP PROGRESS BAR @Composable fun StepProgressBar( modi fi er: Modi fi er = Modi fi er, variant: StepProgressBarVariant = StepProgressBarVariant.Regular, numberOfSteps: Int, currentStep: Int ) { // some code here }
60. COMPONENTS - STEP PROGRESS BAR @Composable fun StepProgressBar( modi fi er: Modi fi er = Modi fi er, variant: StepProgressBarVariant = StepProgressBarVariant.Regular, numberOfSteps: Int, currentStep: Int ) { // some code here }
61. COMPONENTS - STEP PROGRESS BAR @Composable fun StepProgressBar( modi fi er: Modi fi er = Modi fi er, variant: StepProgressBarVariant = StepProgressBarVariant.Regular, numberOfSteps: Int, currentStep: Int ) { // some code here }
62. COMPONENTS - STEP PROGRESS BAR enum class StepProgressBarVariant( val completedStepColor: Color, val unCompletedStepColor: Color, ) { Regular( completedStepColor = OZTheme.colors.buttonsPrimaryRegular, unCompletedStepColor = OZTheme.colors.systemGrayGray5 ), }
63. COMPONENTS - STEP PROGRESS BAR enum class StepProgressBarVariant( val completedStepColor: Color, val unCompletedStepColor: Color, ) { Regular( completedStepColor = OZTheme.colors.buttonsPrimaryRegular, unCompletedStepColor = OZTheme.colors.systemGrayGray5 ), } Looks good?
64. COMPONENTS - STEP PROGRESS BAR enum class StepProgressBarVariant( val completedStepColor: Color, val unCompletedStepColor: Color, ) { Regular( completedStepColor = OZTheme.colors.buttonsPrimaryRegular, unCompletedStepColor = OZTheme.colors.systemGrayGray5 ), } Looks good, but doesn’t work
65. COMPONENTS - STEP PROGRESS BAR
66. COMPONENTS - STEP PROGRESS BAR enum class StepProgressBarVariant( val completedStepColor: Color, val unCompletedStepColor: Color, ) { Regular( completedStepColor = OZTheme.colors.buttonsPrimaryRegular, unCompletedStepColor = OZTheme.colors.systemGrayGray5 ), } HOW DO WE FIX THIS?
67. COMPONENTS - STEP PROGRESS BAR enum class StepProgressBarVariant( val completedStepColor: @Composable () -> Color, val unCompletedStepColor: @Composable () -> Color, ) { Regular( completedStepColor = { OZTheme.colors.buttonsPrimaryRegular }, unCompletedStepColor = { OZTheme.colors.systemGrayGray5 } ), }
68. COMPONENTS - STEP PROGRESS BAR @Composable fun StepProgressBar( modi fi er: Modi fi er = Modi fi er, variant: StepProgressBarVariant = StepProgressBarVariant.Regular, numberOfSteps: Int, currentStep: Int ) { // some code here }
69. COMPONENTS - STEP PROGRESS BAR @Composable fun StepProgressBar( modi fi er: Modi fi er = Modi fi er, variant: StepProgressBarVariant = StepProgressBarVariant.Regular, numberOfSteps: Int, currentStep: Int ) { // some code here }
70. COMPONENTS - STEP PROGRESS BAR @Composable fun StepProgressBar( modi fi er: Modi fi er = Modi fi er, variant: StepProgressBarVariant = StepProgressBarVariant.Regular, numberOfSteps: Int, currentStep: Int ) { // some code here }
71. COMPONENTS - STEP PROGRESS BAR { Row( modi fi er = modi fi er .width(230.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center, ) { // more code here } }
72. COMPONENTS - STEP PROGRESS BAR { Row( modi fi er = modi fi er .width(230.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center, ) { // more code here } }
73. COMPONENTS - STEP PROGRESS BAR { Row( modi fi er = modi fi er .width(230.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center, ) { // more code here } }
74. COMPONENTS - STEP PROGRESS BAR for (step in 0 until numberOfSteps) { Step( completed = step < currentStep, completedColor = variant.completedStepColor(), unCompletedColor = variant.unCompletedStepColor(), modi fi er = Modi fi er .weight(1F), ) if (step < numberOfSteps - 1) { Spacer(modi fi er = Modi fi er.width(5.dp)) } }
75. COMPONENTS - STEP PROGRESS BAR for (step in 0 until numberOfSteps) { Step( completed = step < currentStep, completedColor = variant.completedStepColor(), unCompletedColor = variant.unCompletedStepColor(), modi fi er = Modi fi er .weight(1F), ) if (step < numberOfSteps - 1) { Spacer(modi fi er = Modi fi er.width(5.dp)) } }
76. COMPONENTS - STEP PROGRESS BAR for (step in 0 until numberOfSteps) { Step( completed = step < currentStep, completedColor = variant.completedStepColor(), unCompletedColor = variant.unCompletedStepColor(), modi fi er = Modi fi er .weight(1F), ) if (step < numberOfSteps - 1) { Spacer(modi fi er = Modi fi er.width(5.dp)) } }
77. COMPONENTS - STEP PROGRESS BAR for (step in 0 until numberOfSteps) { Step( completed = step < currentStep, completedColor = variant.completedStepColor(), unCompletedColor = variant.unCompletedStepColor(), modi fi er = Modi fi er .weight(1F), ) if (step < numberOfSteps - 1) { Spacer(modi fi er = Modi fi er.width(5.dp)) } }
78. COMPONENTS - STEP PROGRESS BAR for (step in 0 until numberOfSteps) { Step( completed = step < currentStep, completedColor = variant.completedStepColor(), unCompletedColor = variant.unCompletedStepColor(), modi fi er = Modi fi er .weight(1F), ) if (step < numberOfSteps - 1) { Spacer(modi fi er = Modi fi er.width(5.dp)) } }
79. COMPONENTS - STEP PROGRESS BAR for (step in 0 until numberOfSteps) { Step( completed = step < currentStep, completedColor = variant.completedStepColor(), unCompletedColor = variant.unCompletedStepColor(), modi fi er = Modi fi er .weight(1F), ) if (step < numberOfSteps - 1) { Spacer(modi fi er = Modi fi er.width(5.dp)) } }
80. COMPONENTS - STEP PROGRESS BAR @Composable fun Step( modi fi er: Modi fi er = Modi fi er, completed: Boolean, completedColor: Color, unCompletedColor: Color ) { Divider( modi fi er = modi fi er .width(20.dp) .clip(OZTheme.shapes.cornerRadius50percent), color = if (completed) completedColor else unCompletedColor, thickness = 2.dp ) }
81. COMPONENTS - STEP PROGRESS BAR @Composable fun Step( modi fi er: Modi fi er = Modi fi er, completed: Boolean, completedColor: Color, unCompletedColor: Color ) { Divider( modi fi er = modi fi er .width(20.dp) .clip(OZTheme.shapes.cornerRadius50percent), color = if (completed) completedColor else unCompletedColor, thickness = 2.dp ) }
82. COMPONENTS - STEP PROGRESS BAR @Composable fun Step( modi fi er: Modi fi er = Modi fi er, completed: Boolean, completedColor: Color, unCompletedColor: Color ) { Divider( modi fi er = modi fi er .width(20.dp) .clip(OZTheme.shapes.cornerRadius50percent), color = if (completed) completedColor else unCompletedColor, thickness = 2.dp ) }
83. COMPONENTS - STEP PROGRESS BAR @Composable fun Step( modi fi er: Modi fi er = Modi fi er, completed: Boolean, completedColor: Color, unCompletedColor: Color ) { Divider( modi fi er = modi fi er .width(20.dp) .clip(OZTheme.shapes.cornerRadius50percent), color = if (completed) completedColor else unCompletedColor, thickness = 2.dp ) }
84. COMPONENTS - STEP PROGRESS BAR @Composable fun Step( modi fi er: Modi fi er = Modi fi er, completed: Boolean, completedColor: Color, unCompletedColor: Color ) { Divider( modi fi er = modi fi er .width(20.dp) .clip(OZTheme.shapes.cornerRadius50percent), color = if (completed) completedColor else unCompletedColor, thickness = 2.dp ) }
85. COMPONENTS - STEP PROGRESS BAR @Composable fun Step( modi fi er: Modi fi er = Modi fi er, completed: Boolean, completedColor: Color, unCompletedColor: Color ) { Divider( modi fi er = modi fi er .width(20.dp) .clip(OZTheme.shapes.cornerRadius50percent), color = if (completed) completedColor else unCompletedColor, thickness = 2.dp ) }
86. COMPONENTS - STEP PROGRESS BAR @Preview(name = "Step Progress Bar / Light Mode", showBackground = true, uiMode = Con fi guration.UI_MODE_NIGHT_NO) @Preview(name = "Step Progress Bar / Dark Mode", showBackground = true, uiMode = Con fi guration.UI_MODE_NIGHT_YES) @Composable fun StepProgressBarPreview() { OZTheme { StepProgressBar(numberOfSteps = 10, currentStep = 2) } } @Preview(name = "Step Progress Bar / General Mode", showBackground = true, uiMode = Con fi guration.UI_MODE_NIGHT_YES) @Composable fun StepProgressBarGeneralPreview() { OZTheme(isGeneralMode = true) { StepProgressBar(numberOfSteps = 6, currentStep = 3) } }
87. COMPONENTS - STEP PROGRESS BAR
88. TESTING
89. COMPONENTS - TESTING https://github.com/cashapp/paparazzi
90. COMPONENTS - TESTING class StepProgressBarViewTest { @get:Rule val paparazzi = Paparazzi( theme = "android:Theme.AppCompat", deviceCon fi g = DeviceCon fi g.NEXUS_5, ) // screenshot tests here }
91. COMPONENTS - TESTING class StepProgressBarViewTest { @get:Rule val paparazzi = Paparazzi( theme = "android:Theme.AppCompat", deviceCon fi g = DeviceCon fi g.NEXUS_5, ) // screenshot tests here }
92. COMPONENTS - TESTING @Test fun sixStepsTwoCompleted() { paparazzi.snapshot { OZTheme { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, modi fi er = Modi fi er . fi llMaxSize() .background(backgroundColor), ) { StepProgressBar( modi fi er = Modi fi er.background(componentBackgroundColor), numberOfSteps = 6, currentStep = 2, ) } } } }
93. COMPONENTS - TESTING @Test fun sixStepsTwoCompleted() { paparazzi.snapshot { OZTheme { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, modi fi er = Modi fi er . fi llMaxSize() .background(backgroundColor), ) { StepProgressBar( modi fi er = Modi fi er.background(componentBackgroundColor), numberOfSteps = 6, currentStep = 2, ) } } } }
94. COMPONENTS - TESTING @Test fun sixStepsTwoCompleted() { paparazzi.snapshot { OZTheme { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, modi fi er = Modi fi er . fi llMaxSize() .background(backgroundColor), ) { StepProgressBar( modi fi er = Modi fi er.background(componentBackgroundColor), numberOfSteps = 6, currentStep = 2, ) } } } }
95. COMPONENTS - TESTING @Test fun sixStepsTwoCompleted() { paparazzi.snapshot { OZTheme { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, modi fi er = Modi fi er . fi llMaxSize() .background(backgroundColor), ) { StepProgressBar( modi fi er = Modi fi er.background(componentBackgroundColor), numberOfSteps = 6, currentStep = 2, ) } } } }
96. COMPONENTS - TESTING @Test fun sixStepsTwoCompleted() { paparazzi.snapshot { OZTheme { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, modi fi er = Modi fi er . fi llMaxSize() .background(backgroundColor), ) { StepProgressBar( modi fi er = Modi fi er.background(componentBackgroundColor), numberOfSteps = 6, currentStep = 2, ) } } } }
97. COMPONENTS - TESTING @Test fun sixStepsTwoCompleted() { paparazzi.snapshot { OZTheme { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, modi fi er = Modi fi er . fi llMaxSize() .background(backgroundColor), ) { StepProgressBar( modi fi er = Modi fi er.background(componentBackgroundColor), numberOfSteps = 6, currentStep = 2, ) } } } }
98. COMPONENTS - TESTING @Test fun sixStepsTwoCompleted() { paparazzi.snapshot { OZTheme { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, modi fi er = Modi fi er . fi llMaxSize() .background(backgroundColor), ) { StepProgressBar( modi fi er = Modi fi er.background(componentBackgroundColor), numberOfSteps = 6, currentStep = 2, ) } } } }
99. COMPONENTS - TESTING @Test fun sixStepsTwoCompleted() { paparazzi.snapshot { OZTheme { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, modi fi er = Modi fi er . fi llMaxSize() .background(backgroundColor), ) { StepProgressBar( modi fi er = Modi fi er.background(componentBackgroundColor), numberOfSteps = 6, currentStep = 2, ) } } } }
100. COMPONENTS - TESTING ./gradlew recordPaparazziDebug
101. COMPONENTS - TESTING ./gradlew verifyPaparazziDebug
102. COMPONENTS - TESTING ./gradlew verifyPaparazziDebug
103. COMPONENTS - TESTING ./gradlew verifyPaparazziDebug
104. COMPONENTS - CONCLUSION • Translate design needs into the right parameters like a “Variant” • We can’t call something @Composable inside enums or classes but we can hold a Composable lambda • Use cashapp/paparazzi to screenshot-test your components
105. TIMELINE Navigation Full Screens Interop Components Theme Questions?
106. TIMELINE Navigation Full Screens Interop Components Theme
107. USING COMPONENTS
108. INTEROP - USING COMPONENTS
109. INTEROP - USING COMPONENTS <?xml version="1.0" encoding="utf-8"?> <merge ...> <androidx.appcompat.widget.Toolbar ...> <androidx.compose.ui.platform.ComposeView android:id="@+id/step_progress_bar" android:layout_width="match_parent" android:layout_height="match_parent" /> </androidx.appcompat.widget.Toolbar> </merge>
110. INTEROP - USING COMPONENTS <?xml version="1.0" encoding="utf-8"?> <merge ...> <androidx.appcompat.widget.Toolbar ...> <androidx.compose.ui.platform.ComposeView android:id="@+id/step_progress_bar" android:layout_width="match_parent" android:layout_height="match_parent" /> </androidx.appcompat.widget.Toolbar> </merge>
111. INTEROP - USING COMPONENTS binding.stepProgressBar.setOZContent(forceLtr = false) { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { StepProgressBar( numberOfSteps = numberOfSteps, currentStep = currentStep ) } }
112. INTEROP - USING COMPONENTS binding.stepProgressBar.setOZContent(forceLtr = false) { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { StepProgressBar( numberOfSteps = numberOfSteps, currentStep = currentStep ) } }
113. INTEROP - USING COMPONENTS binding.stepProgressBar.setOZContent(forceLtr = false) { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { StepProgressBar( numberOfSteps = numberOfSteps, currentStep = currentStep ) } }
114. INTEROP - USING COMPONENTS binding.stepProgressBar.setOZContent(forceLtr = false) { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { StepProgressBar( numberOfSteps = numberOfSteps, currentStep = currentStep ) } }
115. INTEROP - USING COMPONENTS binding.stepProgressBar.setOZContent(forceLtr = false) { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { StepProgressBar( numberOfSteps = numberOfSteps, currentStep = currentStep ) } }
116. INTEROP - USING COMPONENTS binding.stepProgressBar.setOZContent(forceLtr = false) { Column( verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, ) { StepProgressBar( numberOfSteps = numberOfSteps, currentStep = currentStep ) } }
117. INTEROP - USING COMPONENTS fun ComposeView.setOZContent( forceLtr: Boolean = true, content: @Composable () -> Unit, ) { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { OZTheme { val direction = if (forceLtr) LayoutDirection.Ltr else LocalLayoutDirection.current CompositionLocalProvider( LocalLayoutDirection provides direction, content = content ) } } }
118. INTEROP - USING COMPONENTS fun ComposeView.setOZContent( forceLtr: Boolean = true, content: @Composable () -> Unit, ) { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { OZTheme { val direction = if (forceLtr) LayoutDirection.Ltr else LocalLayoutDirection.current CompositionLocalProvider( LocalLayoutDirection provides direction, content = content ) } } }
119. INTEROP - USING COMPONENTS fun ComposeView.setOZContent( forceLtr: Boolean = true, content: @Composable () -> Unit, ) { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { OZTheme { val direction = if (forceLtr) LayoutDirection.Ltr else LocalLayoutDirection.current CompositionLocalProvider( LocalLayoutDirection provides direction, content = content ) } } }
120. INTEROP - USING COMPONENTS fun ComposeView.setOZContent( forceLtr: Boolean = true, content: @Composable () -> Unit, ) { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { OZTheme { val direction = if (forceLtr) LayoutDirection.Ltr else LocalLayoutDirection.current CompositionLocalProvider( LocalLayoutDirection provides direction, content = content ) } } }
121. INTEROP - USING COMPONENTS fun ComposeView.setOZContent( forceLtr: Boolean = true, content: @Composable () -> Unit, ) { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { OZTheme { val direction = if (forceLtr) LayoutDirection.Ltr else LocalLayoutDirection.current CompositionLocalProvider( LocalLayoutDirection provides direction, content = content ) } } }
122. INTEROP - USING COMPONENTS fun ComposeView.setOZContent( forceLtr: Boolean = true, content: @Composable () -> Unit, ) { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { OZTheme { val direction = if (forceLtr) LayoutDirection.Ltr else LocalLayoutDirection.current CompositionLocalProvider( LocalLayoutDirection provides direction, content = content ) } } }
123. INTEROP - USING COMPONENTS fun ComposeView.setOZContent( forceLtr: Boolean = true, content: @Composable () -> Unit, ) { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { OZTheme { val direction = if (forceLtr) LayoutDirection.Ltr else LocalLayoutDirection.current CompositionLocalProvider( LocalLayoutDirection provides direction, content = content ) } } }
124. INTEROP - USING COMPONENTS fun ComposeView.setOZContent( forceLtr: Boolean = true, content: @Composable () -> Unit, ) { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { OZTheme { val direction = if (forceLtr) LayoutDirection.Ltr else LocalLayoutDirection.current CompositionLocalProvider( LocalLayoutDirection provides direction, content = content ) } } }
125. INTEROP - CONCLUSION • Build your helper functions to make it easy to use • Do not forget setViewCompositionStrategy()
126. TIMELINE Navigation Full Screens Interop Components Theme Questions?
127. TIMELINE Navigation Full Screens Interop Components Theme
128. COMPOSE BASE FRAGMENTS
129. FULL SCREENS - BASE FRAGMENTS abstract class ComposeFragment : Fragment() { protected open val isThemeInGeneralMode: Boolean = false override fun onCreateView(in fl ater: LayoutIn fl ater, c: ViewGroup?, sub: Bundle?): View? { return setOZContent(isThemeInGeneralMode) { ComposeContent() } } @Composable protected abstract fun ComposeContent() }
130. FULL SCREENS - BASE FRAGMENTS abstract class ComposeFragment : Fragment() { protected open val isThemeInGeneralMode: Boolean = false override fun onCreateView(in fl ater: LayoutIn fl ater, c: ViewGroup?, sub: Bundle?): View? { return setOZContent(isThemeInGeneralMode) { ComposeContent() } } @Composable protected abstract fun ComposeContent() }
131. FULL SCREENS - BASE FRAGMENTS abstract class ComposeFragment : Fragment() { protected open val isThemeInGeneralMode: Boolean = false override fun onCreateView(in fl ater: LayoutIn fl ater, c: ViewGroup?, sub: Bundle?): View? { return setOZContent(isThemeInGeneralMode) { ComposeContent() } } @Composable protected abstract fun ComposeContent() }
132. FULL SCREENS - BASE FRAGMENTS abstract class ComposeFragment : Fragment() { protected open val isThemeInGeneralMode: Boolean = false override fun onCreateView(in fl ater: LayoutIn fl ater, c: ViewGroup?, sub: Bundle?): View? { return setOZContent(isThemeInGeneralMode) { ComposeContent() } } @Composable protected abstract fun ComposeContent() }
133. FULL SCREENS - BASE FRAGMENTS abstract class ComposeFragment : Fragment() { protected open val isThemeInGeneralMode: Boolean = false override fun onCreateView(in fl ater: LayoutIn fl ater, c: ViewGroup?, sub: Bundle?): View? { return setOZContent(isThemeInGeneralMode) { ComposeContent() } } @Composable protected abstract fun ComposeContent() }
134. FULL SCREENS - BASE FRAGMENTS abstract class ComposeFragment : Fragment() { protected open val isThemeInGeneralMode: Boolean = false override fun onCreateView(in fl ater: LayoutIn fl ater, c: ViewGroup?, sub: Bundle?): View? { return setOZContent(isThemeInGeneralMode) { ComposeContent() } } @Composable protected abstract fun ComposeContent() }
135. FULL SCREENS - BASE FRAGMENTS abstract class ComposeFragment : Fragment() { protected open val isThemeInGeneralMode: Boolean = false override fun onCreateView(in fl ater: LayoutIn fl ater, c: ViewGroup?, sub: Bundle?): View? { return setOZContent(isThemeInGeneralMode) { ComposeContent() } } @Composable protected abstract fun ComposeContent() }
136. FULL SCREENS - BASE FRAGMENTS abstract class ComposeFragment : Fragment() { protected open val isThemeInGeneralMode: Boolean = false override fun onCreateView(in fl ater: LayoutIn fl ater, c: ViewGroup?, sub: Bundle?): View? { return setOZContent(isThemeInGeneralMode) { ComposeContent() } } @Composable protected abstract fun ComposeContent() }
137. USING BASE FRAGMENT
138. FULL SCREENS - USING BASE FRAGMENT class SomeComposeFragment: ComposeFragment() { @Composable override fun ComposeContent() { TestComposeScreen() } }
139. FULL SCREENS - USING BASE FRAGMENT class SomeComposeFragment: ComposeFragment() { @Composable override fun ComposeContent() { TestComposeScreen() } }
140. FULL SCREENS - USING BASE FRAGMENT class SomeComposeFragment: ComposeFragment() { @Composable override fun ComposeContent() { TestComposeScreen() } }
141. FULL SCREENS - USING BASE FRAGMENT class SomeComposeFragment: ComposeFragment() { @Composable override fun ComposeContent() { TestComposeScreen() } }
142. FULL SCREENS - USING BASE FRAGMENT fun TestComposeScreen(testViewModel: TestMVIViewModel = viewModel()) { val uiState by testViewModel.uiState.collectAsState() Column(modi fi er = Modi fi er. fi llMaxSize()) { when (uiState) { TestUiState.Initial -> Text("Initial State") TestUiState.SecondState -> Text("Second State") } } }
143. FULL SCREENS - USING BASE FRAGMENT fun TestComposeScreen(testViewModel: TestMVIViewModel = viewModel()) { val uiState by testViewModel.uiState.collectAsState() Column(modi fi er = Modi fi er. fi llMaxSize()) { when (uiState) { TestUiState.Initial -> Text("Initial State") TestUiState.SecondState -> Text("Second State") } } }
144. FULL SCREENS - USING BASE FRAGMENT fun TestComposeScreen(testViewModel: TestMVIViewModel = viewModel()) { val uiState by testViewModel.uiState.collectAsState() Column(modi fi er = Modi fi er. fi llMaxSize()) { when (uiState) { TestUiState.Initial -> Text("Initial State") TestUiState.SecondState -> Text("Second State") } } }
145. FULL SCREENS - USING BASE FRAGMENT fun TestComposeScreen(testViewModel: TestMVIViewModel = viewModel()) { val uiState by testViewModel.uiState.collectAsState() Column(modi fi er = Modi fi er. fi llMaxSize()) { when (uiState) { TestUiState.Initial -> Text("Initial State") TestUiState.SecondState -> Text("Second State") } } }
146. FULL SCREENS - USING BASE FRAGMENT fun TestComposeScreen(testViewModel: TestMVIViewModel = viewModel()) { val uiState by testViewModel.uiState.collectAsState() Column(modi fi er = Modi fi er. fi llMaxSize()) { when (uiState) { TestUiState.Initial -> Text("Initial State") TestUiState.SecondState -> Text("Second State") } } }
147. FULL SCREENS - USING BASE FRAGMENT class SomeComposeFragment: ComposeFragment() { @Composable override fun ComposeContent() { TestComposeScreen() } }
148. TIMELINE Navigation Full Screens Interop Components Theme Questions?
149. TIMELINE Navigation Full Screens Interop Components Theme
150. NAVIGATION
151. NAVIGATION • Jetpack Navigation for Compose • Compose-destinations by Rafael Costa (1.3k stars on Github) • Voyager by Adiel Café (659 stars on Github)
152. TIMELINE Navigation Full Screens Interop Components Theme Questions?
153. TIMELINE Navigation Full Screens Interop Components Theme
154. QUESTIONS?
155. THANK YOU! Alexander Gherschon 
 Android Tech Lead @ ONE ZERO Digital Bank Blog - https://galex.co.il/ Twitter - https://twitter.com/galex Github - https://github.com/galex Linkedin - https://www.linkedin.com/in/agherschon/