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