Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Jetpack Compose

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.

Mohit S

March 22, 2022
Tweet

More Decks by Mohit S

Other Decks in Programming

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” )
  28. None
  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