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
   

   View Slide

2. Introduction to Jetpack Compose
   ● Thinking in Compose
   
   ● Layouts
   
   ● Managing State
   
   ● Side Effects
   

   View Slide

3. Thinking in Compose
   

   View Slide

4. Imperative
   

   View Slide

5. Imperative
   
   

   />

   />

   />

   
   ConstraintLayout>
   

   View Slide

6. Imperative
   View
   View Group
   

   View Slide

7. Imperative
   val textView = findViewById(R.id.textView)
   
   

   View Slide

8. Imperative
   val textView = findViewById(R.id.textView)
   
   textView.text =
   ...
   

   View Slide

9. Declarative UI
   ● Widgets are stateless
   
   ● No getters or setters to update state
   

   View Slide

10. What is Jetpack Compose UI?
    ● UI toolkit
    
    ● Declarative UI framework
    

    View Slide

11. Benefits
    ● Faster development
    
    ● Build UIs with less code
    

    View Slide

12. Declarative UI
    Hello Mike
    

    View Slide

13. Declarative UI
    Hello Mike
    @Composable
    
    fun GreetingView(name: String) {
    
    }
    
    

    View Slide

14. Declarative UI
    Hello Mike
    @Composable
    
    fun GreetingView(name: String) {
    
    Text(text = "Hello $name")
    
    }
    
    

    View Slide

15. Declarative UI
    Hello Mike
    class MainActivity {
    
    setContent {
    
    

    GreetingView(name = “Mike")
    

    }
    
    }
    

    View Slide

16. Declarative UI
    Hello Mike
    Update state?
    

    View Slide

17. Declarative UI
    Hello Bill
    GreetingView(name = “Bill”)
    

    View Slide

18. Recomposition
    Event Composable UI-Redraw
    

    View Slide

19. Recomposition
    Event Composable UI-Redraw
    

    View Slide

20. Recomposition
    Event Composable UI-Redraw
    

    View Slide

21. Modifiers
    

    View Slide

22. Modifiers
    Hello World
    Text(
    
    modifier = Modifier
    
    .padding(10.dp),
    
    text = "Hello World"
    
    )
    
    

    View Slide

23. Modifiers
    Hello World
    Text(
    
    modifier = Modifier
    
    .background(Color.Green),
    
    text = "Hello World"
    
    )
    
    

    View Slide

24. Modifiers
    Hello World
    Text(
    
    modifier = Modifier
    
    .border(width = 2.dp, Color.Green),
    
    text = "Hello World"
    
    )
    
    

    View Slide

25. Modifiers
    ● Order matters
    

    View Slide

26. Modifiers
    Hello World
    Text(
    
    modifier = Modifier
    
    .border(width = 2.dp, Color.Red)
    
    .background(Color.Green)
    
    .padding(12.dp),
    
    text = "Hello World"
    
    )
    
    

    View Slide

27. Modifiers
    Hello World
    Text(
    
    modifier = Modifier
    
    .padding(12.dp)
    
    .border(width = 2.dp, Color.Red)
    
    .background(Color.Green),
    
    text = "Hello World”
    
    )
    
    

    View Slide

28. View Slide

29. Layouts
    

    View Slide

30. Column
    

    View Slide

31. Column
    Column {
    
    
    
    }
    
    

    View Slide

32. Column
    Column {
    
    Text("Hello World")
    
    Text("Hello World")
    
    Text("Hello World")
    
    }
    
    Hello World
    Hello World
    Hello World
    

    View Slide

33. Column
    Column(
    
    verticalArrangement =
    
    ) {
    
    Text("Hello World")
    
    Text("Hello World")
    
    Text("Hello World")
    
    }
    
    X
    Y
    

    View Slide

34. Column
    Column(
    

    verticalArrangement = Arrangement.Center
    

    ) {
    
    Text("Hello World")
    
    Text("Hello World")
    
    Text("Hello World")
    
    }
    
    Hello World
    Hello World
    Hello World
    

    View Slide

35. Column
    Column(
    

    Arrangement.SpaceBetween
    

    ) {
    
    Text("Hello World")
    
    Text("Hello World")
    
    Text("Hello World")
    
    }
    
    Hello World
    Hello World
    Hello World
    

    View Slide

36. Column
    Column(
    
    horizontalAlignment =
    
    ) {
    
    Text("Hello World")
    
    Text("Hello World")
    
    Text("Hello World")
    
    }
    
    X
    Y
    

    View Slide

37. Column
    Column(
    

    horizontalAlignment = Alignment.End
    

    ) {
    
    Text("Hello World")
    
    Text("Hello World")
    
    Text("Hello World")
    
    }
    
    Hello World
    Hello World
    Hello World
    

    View Slide

38. Column
    Column(
    

    Alignment.CenterHorizontally
    

    ) {
    
    Text("Hello World")
    
    Text("Hello World")
    
    Text("Hello World")
    
    }
    
    Hello World
    Hello World
    Hello World
    

    View Slide

39. Row
    

    View Slide

40. Row
    Row {
    
    Text(“Hello")
    
    Text("World")
    
    Text(“!")
    
    }
    
    HelloWorld!
    

    View Slide

41. Row
    Row(
    
    horizontalArrangement =
    
    ) {
    
    Text("Hello World")
    
    Text("Hello World")
    
    Text("Hello World")
    
    }
    
    X
    Y
    

    View Slide

42. Row
    Row(
    
    Arrangement.SpaceBetween
    
    ) {
    
    Text(“Hello")
    
    Text("World")
    
    Text(“!")
    
    }
    
    Hello World !
    

    View Slide

43. Row
    Row(
    
    verticalAlignment =
    
    ) {
    
    Text("Hello World")
    
    Text("Hello World")
    
    Text("Hello World")
    
    }
    
    X
    Y
    

    View Slide

44. Row
    Row(
    
    Alignment.CenterVertically
    
    ) {
    
    Text("Hello World")
    
    Text("Hello World")
    
    Text("Hello World")
    
    }
    
    HelloWorld!
    

    View Slide

45. Column & Row
    Row
    Column
    Vertical Arrangement
    Horizontal Alignment
    Horizontal Arrangement
    Vertical Alignment
    

    View Slide

46. Column & Row
    

    View Slide

47. Column & Row
    Row {
    
    Image(…)
    
    Column {
    
    Text(“…”)
    
    Text(“…”)
    
    }
    
    }
    
    

    View Slide

48. Column & Row
    Row {
    
    Image(…)
    
    Column {
    
    Text(“…”)
    
    Text(“…”)
    
    }
    
    }
    
    

    View Slide

49. Column & Row
    Row {
    
    Image(…)
    
    Column {
    
    Text(“…”)
    
    Text(“…”)
    
    }
    
    }
    
    

    View Slide

50. Layout Modifiers
    

    View Slide

51. Layout Modifiers
    Column(
    
    Modifier.background(Color.Green)
    
    ) {
    
    Text(text = “Hello World”)
    
    Text(text = "Hello World")
    
    }
    
    Hello World
    Hello World
    

    View Slide

52. Layout Modifiers
    Column(
    

    Modifier
    
    .background(Color.Green)
    
    .fillMaxWidth()
    
    ) {
    
    Text(text = “Hello World”)
    
    Text(text = "Hello World")
    
    }
    
    Hello World
    Hello World
    

    View Slide

53. Layout Modifiers
    Column(
    

    Modifier
    
    .background(Color.Green)
    
    .fillMaxSize()
    
    ) {
    
    Text(text = “Hello World”)
    
    Text(text = "Hello World")
    
    }
    
    Hello World
    Hello World
    

    View Slide

54. Layout Modifiers
    Column(
    

    Modifier
    
    .background(Color.Green)
    
    .width(200.dp)
    
    ) {
    
    Text(text = “Hello World”)
    
    Text(text = "Hello World")
    
    }
    
    Hello World
    Hello World
    200dp
    

    View Slide

55. Box
    

    View Slide

56. Box
    Box {
    
    Image(…)
    
    }
    
    

    View Slide

57. Box
    Box {
    
    Image(…)
    
    Column {
    

    Text(…)
    
    Text(…)
    
    }
    
    }
    

    View Slide

58. Box
    Box {
    
    Image(…)
    
    Column(
    
    Modifier.align(
    
    Alignment.BottomEnd
    
    )
    
    ) {
    

    Text(…)
    
    Text(…)
    
    }
    
    }
    

    View Slide

59. List
    

    View Slide

60. List
    @Composable
    
    fun EmployeeListView(items: List) {
    
    LazyColumn {
    
    items(names) { name
    ->
    
    
    Text(text = name)
    
    }
    
    }
    
    }
    
    

    View Slide

61. List
    @Composable
    
    fun EmployeeListView(items: List) {
    
    LazyColumn {
    
    items(items) { item
    ->
    
    
    Text(text = name)
    
    }
    
    }
    
    }
    
    

    View Slide

62. List
    @Composable
    
    fun EmployeeListView(items: List) {
    
    LazyColumn {
    
    items(items) { item
    ->
    
    
    ItemRow(item)
    
    }
    
    }
    
    }
    
    

    View Slide

63. Slot Layouts
    

    View Slide

64. Scaffold
    Scaffold(
    
    topBar = {
    
    
    
    }
    
    ) {
    
    
    
    }
    
    

    View Slide

65. Scaffold
    Scaffold(
    
    topBar = {
    
    Text(text = "Home")
    
    }
    
    ) {
    
    
    
    }
    
    Home
    

    View Slide

66. Scaffold
    Scaffold(
    
    topBar = {
    
    Text(text = "Home")
    
    }
    
    ) {
    
    Text(text = “Hello World”)
    
    }
    
    Home
    Hello World
    

    View Slide

67. Layouts
    ● Column
    
    ● Row
    
    ● Box
    
    ● Scaffold
    

    View Slide

68. Managing State
    

    View Slide

69. Managing State
    ● Setup state using mutableStateOf
    

    View Slide

70. Managing State
    0
    + -
    

    View Slide

71. Managing State
    0
    var counter by remember {
    
    mutableStateOf(0)
    
    }
    

    View Slide

72. Managing State
    0
    Column {
    
    Text(
    
    text = counter.toString()
    
    )
    
    ...
    
    
    }
    

    View Slide

73. Managing State
    0
    + -
    Button(
    
    onClick = { counter
    ++
    }
    
    ) {
    
    Text(text = "+")
    
    }
    
    

    View Slide

74. Managing State
    0
    + -
    Button(
    
    onClick = { counter
    --
    }
    
    ) {
    
    Text(text = “-")
    
    }
    
    

    View Slide

75. Recomposition
    Event Composable UI-Redraw
    

    View Slide

76. Managing State
    0
    var counter by remember {
    
    mutableStateOf(0)
    
    }
    + -
    

    View Slide

77. Managing State
    ● Setup state using mutableStateOf
    
    ● Setting up search
    

    View Slide

78. Managing State
    Search
    

    View Slide

79. Managing State
    Search
    Search View
    View Model
    Event
    

    View Slide

80. Managing State
    Search
    @Composable
    
    fun SearchView() {
    
    }
    
    

    View Slide

81. Managing State
    Search
    @Composable
    
    fun SearchView() {
    
    var query by remember {
    
    mutableStateOf("")
    
    }
    
    }
    

    View Slide

82. Managing State
    Search
    @Composable
    
    fun SearchView() {
    
    OutlinedTextField(
    
    value = query
    
    )
    
    }
    
    

    View Slide

83. Managing State
    Search
    @Composable
    
    fun SearchView() {
    
    OutlinedTextField(
    
    onValueChange = {
    
    query = it
    
    }
    
    )
    
    }
    
    

    View Slide

84. Managing State
    Search
    @Composable
    
    fun SearchView() {
    
    OutlinedTextField(
    
    keyboardOptions = KeyboardOptions(
    
    imeAction = ImeAction.Search
    
    )
    
    )
    
    }
    
    

    View Slide

85. Managing State
    Search
    @Composable
    
    fun SearchView() {
    
    OutlinedTextField(
    
    keyboardOptions = KeyboardActions(
    
    onSearch = {
    
    }
    
    )
    
    )
    
    }
    

    View Slide

86. Managing State
    Search
    @Composable
    
    fun SearchView(onSearch: (String)
    ->
    Unit) {
    
    OutlinedTextField(
    
    keyboardOptions = KeyboardActions(
    
    onSearch = {
    
    }
    
    )
    
    )
    
    }
    

    View Slide

87. Managing State
    Search
    @Composable
    
    fun SearchView(onSearch: (String)
    ->
    Unit) {
    
    OutlinedTextField(
    
    keyboardOptions = KeyboardActions(
    
    onSearch = {
    
    onSearch(query)
    
    }
    
    )
    
    )
    
    }
    

    View Slide

88. Managing State
    Search
    Search View
    View Model
    Event
    

    View Slide

89. Managing State
    Search
    SearchView { query
    ->
    
    
    viewModel.onSearch(query)
    
    }
    

    View Slide

90. Managing State
    ● Setup state using mutableStateOf
    
    ● Setting up search
    
    ● Working with Flows
    

    View Slide

91. Flows
    View View Model
    

    View Slide

92. Flows
    ● collectAsState
    

    View Slide

93. Flows
    class MyViewModel: ViewModel() {
    
    val stateFlow = _stateFlow.asStateFlow()
    
    }
    
    

    View Slide

94. Flows
    @Composable
    
    fun HomeView() {
    
    viewModel.stateFlow.collectAsState()
    
    }
    
    

    View Slide

95. Managing State
    ● flow.collectAsState
    
    ● liveData.observeAsState
    
    ● observable.subscribeAsState
    

    View Slide

96. Managing State
    ● Setup state using mutableStatOf
    
    ● Setting up search
    
    ● Working with Flows
    

    View Slide

97. Side Effects
    

    View Slide

98. What is a side effect?
    ● Work outside of composable function
    
    ● Open new screen when tapping button
    
    ● Show no network message
    

    View Slide

99. Side Effects
    ● Launched Effect
    
    ● Disposable Effect
    

    View Slide

100. Launched Effect
     ● Triggers on first composition or key change
     

     View Slide

101. Launched Effect
     @Composable
     
     fun HomeView() {
     

     var counter by remember { mutableStateOf(0) }
     
     LaunchedEffect(key1 = Unit) {
     
     while (true) {
     
     delay(2000)
     
     counter
     ++
     
     
     }
     
     }
     
     }
     
     

     View Slide

102. Launched Effect
     @Composable
     
     fun HomeView() {
     

     var counter by remember { mutableStateOf(0) }
     
     LaunchedEffect(key1 = Unit) {
     
     while (true) {
     
     delay(2000)
     
     counter
     ++
     
     
     }
     
     }
     
     }
     
     

     View Slide

103. Launched Effect
     @Composable
     
     fun HomeView() {
     

     var counter by remember { mutableStateOf(0) }
     
     LaunchedEffect(key1 = Unit) {
     
     while (true) {
     
     delay(2000)
     
     counter
     ++
     
     
     }
     
     }
     
     }
     
     

     View Slide

104. Launched Effect
     @Composable
     
     fun HomeView() {
     

     var counter by remember { mutableStateOf(0) }
     
     LaunchedEffect(key1 = Unit) {
     
     while (true) {
     
     delay(2000)
     
     counter
     ++
     
     
     }
     
     }
     
     }
     
     

     View Slide

105. Disposable Effect
     ● Triggers on first composition or key change
     
     ● Calls onDispose on terminate
     

     View Slide

106. Disposable Effect
     @Composable
     
     fun HomeView() {
     
     DisposableEffect(
     ...
     ) {
     
     onDispose {
     
     callback.remove()
     
     }
     
     }
     
     }
     
     

     View Slide

107. Side Effects
     ● Launched Effect
     
     ● Disposable Effect
     

     View Slide

108. Introduction to Jetpack Compose
     ● Thinking in Compose
     
     ● Layouts
     
     ● Managing State
     
     ● Side Effects
     

     View Slide

109. Thank You!
     www.codingwithmohit.com
     @heyitsmohit
     

     View Slide