Compose Basics for Android Devs

Are you an experienced Android developer still managing XML layouts, Fragments, and RecyclerView Adapters ? It's time to "think in Compose". Jetpack Compose is a modern, 100% Kotlin-based toolkit that fundamentally changes how we build UIs .

This session is a practical, from-the-ground-up guide for developers with existing Android knowledge. We will abandon the old imperative model and learn to build UIs by describing what we want, not how to build it .

Transcript

1. This work is licensed under the Apache 2.0 License Jetpack Compose para Android Developers
2. This work is licensed under the Apache 2.0 License Bruno Aybar Shopify, Senior Mobile Developer 
 
 Twitter: @brunoaybarg 
 Github: @Bruno125 Expositor
3. Experienced Track
4. This work is licensed under the Apache 2.0 License Requisitos: 
 Conocimientos básicos de - Android - Kotlin
5. This work is licensed under the Apache 2.0 License 2 3 1 Compose Essentials Layouts, theming, 
 and animation Architecture and state (3 horas) (2 horas) (5 horas) Tus primeros pasos con Jetpack Compose. Entenderás lo que significa que Compose sea un toolkit de UI declarativo, y cómo usarlo para construir UIs increíbles. Jetpack Compose para Android Developers Este curso contiene 5 secciones:
6. This work is licensed under the Apache 2.0 License 5 4 Accessibility, testing, and performance Form factors (3 horas) (2 horas) Jetpack Compose para Android Developers
7. This work is licensed under the Apache 2.0 License Jetpack Compose for Android Developers Course
8. This work is licensed under the Apache 2.0 License • Pensando en “Compose" • Funciones Composable • Compose toolkit • Tooling (Android Studio) Agenda
9. This work is licensed under the Apache 2.0 License Live demo!
10. This work is licensed under the Apache 2.0 License Pensando en Compose
11. Cómo es hoy en día
12. Cómo es hoy en día MainActivity.kt activity_main.xml
13. ItemsFragment.kt fragment_items.xml Cómo es hoy en día
14. ItemsAdapter.kt single_item.xml Cómo es hoy en día
15. ItemsAdapter.kt class ItemsAdapter: RecyclerView.Adapter { fun onCreateViewHolder () { … } fun onBindViewHolder () { … } fun getItemCount () { … } class ItemsViewHolder: RecyclerView.VH() { ….. } } Cómo es hoy en día
16. ItemsAdapter.kt single_item.xml Cómo es hoy en día
17. Cómo es hoy en día MainActivity.kt activity_main.xml ItemsFragment.kt fragment_items.xml ItemsAdapter.kt single_item.xml
18. This work is licensed under the Apache 2.0 License Construye la interfaz describiendo el qué, no el cómo.
19. Usando Compose
20. Usando Compose @Composable fun ItemRow(item: Item)
21. @Composable fun ItemRow(item: Item) { Row { } } Usando Compose
22. @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) } } Usando Compose
23. @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } } Usando Compose
24. @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } } Usando Compose
25. ¿Qué podemos ver aquí? @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } } 1. Solución 100% orientada a Kotlin 

26. ¿Qué podemos ver aquí? @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } } 1. Solución 100% orientada a Kotlin 
 2. UI declarativa, basada en @Composables
27. ¿Qué podemos ver aquí? @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } } @Composables
28. ¿Qué podemos ver aquí? @Composable fun ItemRow(item: Item) { Row { Image(imageResource(item.image)) Column { Text(item.title) Text(item.description) } } } 1. Solución 100% orientada a Kotlin 
 2. UI declarativa, basada en @Composables 
 3. Composición en lugar de Herencia
29. This work is licensed under the Apache 2.0 License goo.gle/compose-samples
30. This work is licensed under the Apache 2.0 License
31. This work is licensed under the Apache 2.0 License Survey answer Image Text Radio button
32. This work is licensed under the Apache 2.0 License
33. This work is licensed under the Apache 2.0 License
34. This work is licensed under the Apache 2.0 License
35. This work is licensed under the Apache 2.0 License
36. This work is licensed under the Apache 2.0 License Survey answer Image Text Radio button
37. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { Image(answer.image) Text(answer.text) RadioButton(selected = false, onClick = { /* … */ }) } } // SurveyAnswer.kt
38. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { Image(answer.image) Text(answer.text) RadioButton(selected = false, onClick = { /* … */ }) } } // SurveyAnswer.kt
39. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { Image(answer.image) Text(answer.text) RadioButton(false, onClick = { /* … */ }) } } // SurveyAnswer.kt
40. This work is licensed under the Apache 2.0 License Construye la interfaz describiendo el qué, no el cómo.
41. This work is licensed under the Apache 2.0 License Event handler UI element onClick()
42. This work is licensed under the Apache 2.0 License UI State selected = false
43. This work is licensed under the Apache 2.0 License UI 2 State 2 selected = true
44. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { / * ... */ var selected: Boolean = // ... RadioButton(selected, onClick = { /* … */ }) } } // SurveyAnswer.kt Los Estados controlan la UI
45. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { / * ... */ var selected: Boolean = // ... RadioButton(selected, onClick = { selected = !selected }) } } // SurveyAnswer.kt Los Eventos controlan el estado
46. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { / * ... */ var selected: Boolean = // ... RadioButton(selected, onClick = { selected = !selected }) } } // SurveyAnswer.kt
47. Describe el qué, no el cómo Elementos de UI = Funciones Los Estados controlan la UI Los Eventos controlan el State 1 2 3 4
48. This work is licensed under the Apache 2.0 License Composable functions
49. This work is licensed under the Apache 2.0 License goo.gle/compose-samples
50. This work is licensed under the Apache 2.0 License
51. This work is licensed under the Apache 2.0 License // SurveyAnswer.kt @Composable fun SurveyAnswer(answer: Answer) { Row { Image(answer.image) Text(answer.text) RadioButton(false, onClick = { /* … */ }) } }
52. This work is licensed under the Apache 2.0 License // SurveyAnswer.kt @Composable fun SurveyAnswer(answer: Answer) { /* … */ } @Composable fun SingleChoiceQuestion(answers: List<Answer>) { Column { answers.forEach { answer -> SurveyAnswer(answer = answer) } } }
53. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt
54. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { Column { answers.forEach { answer -> SurveyAnswer(answer = answer) } } }
55. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { Column { answers.forEach { answer -> // No debemos hacer esto!! val answer = SurveyAnswer(answer = answer) } } }
56. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { Column { if (answers.isEmpty()) { Text(“No hay opciones!”) } else { answers.forEach { answer -> SurveyAnswer(answer = answer) } } } }
57. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { // Rápido y sin efectos secundarios Column { if (answers.isEmpty()) { /* ... */ } else { /* ... */ } } }
58. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { // No debería haber efectos secundarios SurveyApp.didShowSingleChoiceQuestion = true Column { if (answers.isEmpty()) { /* ... */ } else { /* ... */ } } }
59. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { Column { answers.forEach { answer -> SurveyAnswer(answer = answer) } } }
60. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = false, ) } }
61. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = false, ) } }
62. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = false, ) } }
63. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { var selectedAnswer: Answer? = null answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = false, ) } }
64. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { var selectedAnswer: Answer? = null answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = false, ) } }
65. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { var selectedAnswer: MutableState<Answer?> = mutableStateOf(null) answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = false, ) } }
66. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { var selectedAnswer: MutableState<Answer?> = mutableStateOf(null) answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = false, ) } }
67. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { var selectedAnswer: MutableState<Answer?> = mutableStateOf(null) answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = (selectedAnswer.state == answer), ) } }
68. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { var selectedAnswer: MutableState<Answer?> = remember { mutableStateOf(null) } answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = (selectedAnswer.state == answer), ) } }
69. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { var selectedAnswer: MutableState<Answer?> = rememberSaveable { mutableStateOf(null) } answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = (selectedAnswer.state == answer), ) } }
70. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { var selectedAnswer: Answer? by rememberSaveable { mutableStateOf(null) } answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = (selectedAnswer.state == answer), ) } }
71. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { var selectedAnswer: Answer? by rememberSaveable { mutableStateOf(null) } answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = (selectedAnswer == answer), ) } }
72. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { var selectedAnswer: Answer? by rememberSaveable { mutableStateOf(null) } answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = (selectedAnswer == answer), onAnswerSelected = { answer -> selectedAnswer = answer } ) } }
73. This work is licensed under the Apache 2.0 License Event handler UI element event state Events change State
74. This work is licensed under the Apache 2.0 License Event handler UI element onAnswerSelected answer Events change State
75. This work is licensed under the Apache 2.0 License // SingleChoiceQuestion.kt @Composable fun SingleChoiceQuestion(answers: List<Answer>) { val selectedAnswer: Answer? by rememberSaveable { mutableStateOf<Answer>(null) } answers.forEach { answer -> SurveyAnswer( answer = answer, isSelected = (selectedAnswer == answer), onAnswerSelected = { answer -> selectedAnswer = answer } ) } }
76. This work is licensed under the Apache 2.0 License Las funciones Composable se pueden ejecutar en cualquier orden.
77. This work is licensed under the Apache 2.0 License // ButtonRow.kt @Composable fun ButtonRow() { MyFancyNavigation { StartScreen() MiddleScreen() EndScreen() } }
78. This work is licensed under the Apache 2.0 License Las funciones Composable pueden correr en paralelo.
79. This work is licensed under the Apache 2.0 License @Composable fun ListComposable(myList: List<String>) { Row(horizontalArrangement = Arrangement.SpaceBetween) { Column { for (item in myList) { Text("Item: $item") } } Text("Count: ${myList.size}") } } // ListComposable.kt
80. This work is licensed under the Apache 2.0 License @Composable fun ListWithBug(myList: List<String>) { var items = 0 Row(horizontalArrangement = Arrangement.SpaceBetween) { Column { for (item in myList) { Text("Item: $item”) items++ // Evitar! Efecto secundario de la recomposición de la columna } } Text("Count: $items") } } // ListComposable.kt
81. This work is licensed under the Apache 2.0 License La Recomposición evita la mayor cantidad de pasos posible.
82. This work is licensed under the Apache 2.0 License @Composable fun GreetingScreen(name: String) { Column { Header() Greeting(name = name) Footer() } } // GreenScreen.kt
83. This work is licensed under the Apache 2.0 License La Recomposición es optimista.
84. This work is licensed under the Apache 2.0 License Las funciones Composable pueden ejecutarse de forma seguida.
85. This work is licensed under the Apache 2.0 License ¿Cómo usarlos? Se usa la anotación @Composable Aceptan parámetros Usa MutableState y remember No deben tener efectos secundarios 1 2 3 4
86. This work is licensed under the Apache 2.0 License ¿Cómo se ejecutan? Pueden… Ejecutarse en cualquier orden Correr en paralelo Ser “salteadas" / "ignoradas" Correr frecuentemente 1 2 3 4
87. This work is licensed under the Apache 2.0 License Compose Toolkit
88. This work is licensed under the Apache 2.0 License goo.gle/compose-samples
89. This work is licensed under the Apache 2.0 License
90. This work is licensed under the Apache 2.0 License
91. This work is licensed under the Apache 2.0 License MaterialTheme( colorScheme = MyAppsColorScheme, typography = MyAppsTypography, shapes = MyAppsShapes ) { // Content goes here }
92. This work is licensed under the Apache 2.0 License
93. This work is licensed under the Apache 2.0 License
94. This work is licensed under the Apache 2.0 License
95. This work is licensed under the Apache 2.0 License
96. This work is licensed under the Apache 2.0 License
97. This work is licensed under the Apache 2.0 License Scaffold( topBar = { SmallTopAppBar(/* ... */) }, floatingActionButtonPosition = FabPosition.End, floatingActionButton = { FloatingActionButton(/* ... */) }, content = { /* ... */ } )
98. This work is licensed under the Apache 2.0 License Scaffold( topBar = { SmallTopAppBar(/* ... */) }, floatingActionButtonPosition = FabPosition.End, floatingActionButton = { FloatingActionButton(/* ... */) }, content = { /* ... */ } )
99. This work is licensed under the Apache 2.0 License Scaffold( topBar = { SmallTopAppBar(/* ... */) }, floatingActionButtonPosition = FabPosition.End, floatingActionButton = { FloatingActionButton(/* ... */) }, content = { /* ... */ } )
100. This work is licensed under the Apache 2.0 License Scaffold( topBar = { SmallTopAppBar(/* ... */) }, floatingActionButtonPosition = FabPosition.End, floatingActionButton = { FloatingActionButton(/* ... */) }, content = { /* ... */ } )
101. This work is licensed under the Apache 2.0 License
102. This work is licensed under the Apache 2.0 License Surface { Text("Hello Compose") } Hello Compose
103. This work is licensed under the Apache 2.0 License Surface( color = MaterialTheme.colorScheme.primary, ) { Text("Hello Compose") } Hello Compose
104. This work is licensed under the Apache 2.0 License Surface( color = MaterialTheme.colorScheme.primary, shape = RoundedCornerShape(8.dp), ) { Text("Hello Compose") } Hello Compose
105. This work is licensed under the Apache 2.0 License Surface( color = MaterialTheme.colorScheme.surface, shape = RoundedCornerShape(8.dp), border = BorderStroke(2.dp, MaterialTheme.colorScheme.outline ) ) { Text("Hello Compose") } Hello Compose
106. This work is licensed under the Apache 2.0 License Surface( color = MaterialTheme.colorScheme.surface, shape = RoundedCornerShape(8.dp), border = BorderStroke(2.dp, MaterialTheme.colorScheme.surfaceVariant ), shadowElevation = 8.dp, tonalElevation = 8.dp, ) { Text("Hello Compose") } Hello Compose
107. This work is licensed under the Apache 2.0 License
108. This work is licensed under the Apache 2.0 License
109. goo.gle/compose-material-ref m3.material.io
110. This work is licensed under the Apache 2.0 License Standard layouts
111. This work is licensed under the Apache 2.0 License Row { Component1() Component2() Component3() } 1 2 3 Row
112. This work is licensed under the Apache 2.0 License 1 2 3 Column Column { Component1() Component2() Component3() }
113. This work is licensed under the Apache 2.0 License 2 1 3 Box Box { Component1() Component2() Component3() }
114. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row { Image(answer.image) Text(answer.text) RadioButton(/* … */) } }
115. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row( verticalAlignment = Alignment.CenterVertically ) { /* ... */ } }
116. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row( verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween ) { /* ... */ } }
117. goo.gle/compose-layouts-docs
118. This work is licensed under the Apache 2.0 License Modifiers
119. This work is licensed under the Apache 2.0 License Text("Hello Compose") Hello Compose
120. This work is licensed under the Apache 2.0 License Text( "Hello Compose!", Modifier.background(Color.Magenta) ) Hello Compose
121. This work is licensed under the Apache 2.0 License Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) ) Hello Compose
122. This work is licensed under the Apache 2.0 License Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) .padding(5.dp) ) Hello Compose
123. This work is licensed under the Apache 2.0 License Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) .padding(5.dp) .alpha(0.5f) ) Hello Compose
124. This work is licensed under the Apache 2.0 License Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) .padding(5.dp) .alpha(0.5f) .clickable { // Called when Text clicked } ) Hello Compose
125. This work is licensed under the Apache 2.0 License Box(Modifier.size(150.dp)) { Text("Hello Compose") } Hello Compose
126. This work is licensed under the Apache 2.0 License Box(Modifier.size(150.dp)) { Text( "Hello Compose!", Modifier.align( Alignment.BottomEnd ) ) } Hello Compose
127. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row(...) { Image(answer.image) Text(answer.text) RadioButton(/* … */) } } Desired Current
128. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row( Modifier.fillMaxWidth(), /* ... */ ) { Image(answer.image) Text(answer.text) RadioButton(/* ... */) } } Desired Current
129. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Row( Modifier.fillMaxWidth() .padding(16.dp), /* ... */ ) { Image(answer.image) Text(answer.text) RadioButton(/* ... */) } } Desired Current
130. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Surface( border = BorderStroke( 1.dp, MaterialTheme.colorScheme.outline ), shape = MaterialTheme.shapes.small ) { Row(/* ... */) { } } } Desired Current
131. goo.gle/compose-modifiers goo.gle/compose-modifiers- list
132. This work is licensed under the Apache 2.0 License @Composable fun SurveyAnswer(answer: Answer) { Surface( border = BorderStroke( 1.dp, MaterialTheme.colorScheme.outline ), shape = MaterialTheme.shapes.small ) { Row(Modifier.fillMaxWidth().padding(16.dp)) { Image(answer.image) Text(answer.text) RadioButton(/* … */) } } }
133. This work is licensed under the Apache 2.0 License Compose Tooling