Introduction to Jetpack Compose

In this talk, I'll go over the basics of how to build Android apps using Jetpack Compose. I'll share how to build different types of layouts and setup your app's architecture. We'll look at basic examples of using different features provided by the Jetpack Compose library.

Transcript

1. Mohit Sarveiya Introduction to Jetpack Compose @heyitsmohit
2. Introduction to Jetpack Compose • Thinking in Compose • Layouts • Managing State • Side Effects
3. Thinking in Compose
4. Imperative
5. Imperative <ConstraintLayout> 
 <ImageView />
 <TextView />
 <TextView />
 </ ConstraintLayout>
6. Imperative View View Group
7. Imperative val textView = findViewById(R.id.textView)
8. Imperative val textView = findViewById(R.id.textView) textView.text = ...
9. Declarative UI • Widgets are stateless • No getters or setters to update state
10. What is Jetpack Compose UI? • UI toolkit • Declarative UI framework
11. Benefits • Faster development • Build UIs with less code
12. Declarative UI Hello Mike
13. Declarative UI Hello Mike @Composable fun GreetingView(name: String) { }
14. Declarative UI Hello Mike @Composable fun GreetingView(name: String) { Text(text = "Hello $name") }
15. Declarative UI Hello Mike class MainActivity { setContent { 
 GreetingView(name = “Mike") 
 } }
16. Declarative UI Hello Mike Update state?
17. Declarative UI Hello Bill GreetingView(name = “Bill”)
18. Recomposition Event Composable UI-Redraw
19. Recomposition Event Composable UI-Redraw
20. Recomposition Event Composable UI-Redraw
21. Modifiers
22. Modifiers Hello World Text( modifier = Modifier .padding(10.dp), text = "Hello World" )
23. Modifiers Hello World Text( modifier = Modifier .background(Color.Green), text = "Hello World" )
24. Modifiers Hello World Text( modifier = Modifier .border(width = 2.dp, Color.Green), text = "Hello World" )
25. Modifiers • Order matters
26. Modifiers Hello World Text( modifier = Modifier .border(width = 2.dp, Color.Red) .background(Color.Green) .padding(12.dp), text = "Hello World" )
27. Modifiers Hello World Text( modifier = Modifier .padding(12.dp) .border(width = 2.dp, Color.Red) .background(Color.Green), text = "Hello World” )
29. Layouts
30. Column
31. Column Column { }
32. Column Column { Text("Hello World") Text("Hello World") Text("Hello World") } Hello World Hello World Hello World
33. Column Column( verticalArrangement = ) { Text("Hello World") Text("Hello World") Text("Hello World") } X Y
34. Column Column( 
 verticalArrangement = Arrangement.Center 
 ) { Text("Hello World") Text("Hello World") Text("Hello World") } Hello World Hello World Hello World
35. Column Column( 
 Arrangement.SpaceBetween 
 ) { Text("Hello World") Text("Hello World") Text("Hello World") } Hello World Hello World Hello World
36. Column Column( horizontalAlignment = ) { Text("Hello World") Text("Hello World") Text("Hello World") } X Y
37. Column Column( 
 horizontalAlignment = Alignment.End 
 ) { Text("Hello World") Text("Hello World") Text("Hello World") } Hello World Hello World Hello World
38. Column Column( 
 Alignment.CenterHorizontally 
 ) { Text("Hello World") Text("Hello World") Text("Hello World") } Hello World Hello World Hello World
39. Row
40. Row Row { Text(“Hello") Text("World") Text(“!") } HelloWorld!
41. Row Row( horizontalArrangement = ) { Text("Hello World") Text("Hello World") Text("Hello World") } X Y
42. Row Row( Arrangement.SpaceBetween ) { Text(“Hello") Text("World") Text(“!") } Hello World !
43. Row Row( verticalAlignment = ) { Text("Hello World") Text("Hello World") Text("Hello World") } X Y
44. Row Row( Alignment.CenterVertically ) { Text("Hello World") Text("Hello World") Text("Hello World") } HelloWorld!
45. Column & Row Row Column Vertical Arrangement Horizontal Alignment Horizontal Arrangement Vertical Alignment
46. Column & Row
47. Column & Row Row { Image(…) Column { Text(“…”) Text(“…”) } }
48. Column & Row Row { Image(…) Column { Text(“…”) Text(“…”) } }
49. Column & Row Row { Image(…) Column { Text(“…”) Text(“…”) } }
50. Layout Modifiers
51. Layout Modifiers Column( Modifier.background(Color.Green) ) { Text(text = “Hello World”) Text(text = "Hello World") } Hello World Hello World
52. Layout Modifiers Column( 
 Modifier .background(Color.Green) .fillMaxWidth() ) { Text(text = “Hello World”) Text(text = "Hello World") } Hello World Hello World
53. Layout Modifiers Column( 
 Modifier .background(Color.Green) .fillMaxSize() ) { Text(text = “Hello World”) Text(text = "Hello World") } Hello World Hello World
54. Layout Modifiers Column( 
 Modifier .background(Color.Green) .width(200.dp) ) { Text(text = “Hello World”) Text(text = "Hello World") } Hello World Hello World 200dp
55. Box
56. Box Box { Image(…) }
57. Box Box { Image(…) Column { 
 Text(…) Text(…) } }
58. Box Box { Image(…) Column( Modifier.align( Alignment.BottomEnd ) ) { 
 Text(…) Text(…) } }
59. List
60. List @Composable fun EmployeeListView(items: List<Item>) { LazyColumn { items(names) { name -> Text(text = name) } } }
61. List @Composable fun EmployeeListView(items: List<Item>) { LazyColumn { items(items) { item -> Text(text = name) } } }
62. List @Composable fun EmployeeListView(items: List<Item>) { LazyColumn { items(items) { item -> ItemRow(item) } } }
63. Slot Layouts
64. Scaffold Scaffold( topBar = { } ) { }
65. Scaffold Scaffold( topBar = { Text(text = "Home") } ) { } Home
66. Scaffold Scaffold( topBar = { Text(text = "Home") } ) { Text(text = “Hello World”) } Home Hello World
67. Layouts • Column • Row • Box • Scaffold
68. Managing State
69. Managing State • Setup state using mutableStateOf
70. Managing State 0 + -
71. Managing State 0 var counter by remember { mutableStateOf(0) }
72. Managing State 0 Column { Text( text = counter.toString() ) ... }
73. Managing State 0 + - Button( onClick = { counter ++ } ) { Text(text = "+") }
74. Managing State 0 + - Button( onClick = { counter -- } ) { Text(text = “-") }
75. Recomposition Event Composable UI-Redraw
76. Managing State 0 var counter by remember { mutableStateOf(0) } + -
77. Managing State • Setup state using mutableStateOf • Setting up search
78. Managing State Search
79. Managing State Search Search View View Model Event
80. Managing State Search @Composable fun SearchView() { }
81. Managing State Search @Composable fun SearchView() { var query by remember { mutableStateOf("") } }
82. Managing State Search @Composable fun SearchView() { OutlinedTextField( value = query ) }
83. Managing State Search @Composable fun SearchView() { OutlinedTextField( onValueChange = { query = it } ) }
84. Managing State Search @Composable fun SearchView() { OutlinedTextField( keyboardOptions = KeyboardOptions( imeAction = ImeAction.Search ) ) }
85. Managing State Search @Composable fun SearchView() { OutlinedTextField( keyboardOptions = KeyboardActions( onSearch = { } ) ) }
86. Managing State Search @Composable fun SearchView(onSearch: (String) -> Unit) { OutlinedTextField( keyboardOptions = KeyboardActions( onSearch = { } ) ) }
87. Managing State Search @Composable fun SearchView(onSearch: (String) -> Unit) { OutlinedTextField( keyboardOptions = KeyboardActions( onSearch = { onSearch(query) } ) ) }
88. Managing State Search Search View View Model Event
89. Managing State Search SearchView { query -> viewModel.onSearch(query) }
90. Managing State • Setup state using mutableStateOf • Setting up search • Working with Flows
91. Flows View View Model
92. Flows • collectAsState
93. Flows class MyViewModel: ViewModel() { val stateFlow = _stateFlow.asStateFlow() }
94. Flows @Composable fun HomeView() { viewModel.stateFlow.collectAsState() }
95. Managing State • flow.collectAsState • liveData.observeAsState • observable.subscribeAsState
96. Managing State • Setup state using mutableStatOf • Setting up search • Working with Flows
97. Side Effects
98. What is a side effect? • Work outside of composable function • Open new screen when tapping button • Show no network message
99. Side Effects • Launched Effect • Disposable Effect
100. Launched Effect • Triggers on first composition or key change
101. Launched Effect @Composable fun HomeView() { 
 var counter by remember { mutableStateOf(0) } LaunchedEffect(key1 = Unit) { while (true) { delay(2000) counter ++ } } }
102. Launched Effect @Composable fun HomeView() { 
 var counter by remember { mutableStateOf(0) } LaunchedEffect(key1 = Unit) { while (true) { delay(2000) counter ++ } } }
103. Launched Effect @Composable fun HomeView() { 
 var counter by remember { mutableStateOf(0) } LaunchedEffect(key1 = Unit) { while (true) { delay(2000) counter ++ } } }
104. Launched Effect @Composable fun HomeView() { 
 var counter by remember { mutableStateOf(0) } LaunchedEffect(key1 = Unit) { while (true) { delay(2000) counter ++ } } }
105. Disposable Effect • Triggers on first composition or key change • Calls onDispose on terminate
106. Disposable Effect @Composable fun HomeView() { DisposableEffect( ... ) { onDispose { callback.remove() } } }
107. Side Effects • Launched Effect • Disposable Effect
108. Introduction to Jetpack Compose • Thinking in Compose • Layouts • Managing State • Side Effects
109. Thank You! www.codingwithmohit.com @heyitsmohit