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

Introduction to Jetpack Compose

Mohit S
March 22, 2022

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

    View full-size slide

  2. Introduction to Jetpack Compose
    ● Thinking in Compose

    ● Layouts

    ● Managing State

    ● Side Effects

    View full-size slide

  3. Thinking in Compose

    View full-size slide

  4. Imperative


    />

    />

    />


    ConstraintLayout>

    View full-size slide

  5. Imperative
    View
    View Group

    View full-size slide

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

    View full-size slide

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

    textView.text =
    ...

    View full-size slide

  8. Declarative UI
    ● Widgets are stateless

    ● No getters or setters to update state

    View full-size slide

  9. What is Jetpack Compose UI?
    ● UI toolkit

    ● Declarative UI framework

    View full-size slide

  10. Benefits
    ● Faster development

    ● Build UIs with less code

    View full-size slide

  11. Declarative UI
    Hello Mike

    View full-size slide

  12. Declarative UI
    Hello Mike
    @Composable

    fun GreetingView(name: String) {

    }

    View full-size slide

  13. Declarative UI
    Hello Mike
    @Composable

    fun GreetingView(name: String) {

    Text(text = "Hello $name")

    }

    View full-size slide

  14. Declarative UI
    Hello Mike
    class MainActivity {

    setContent {


    GreetingView(name = “Mike")

    }

    }

    View full-size slide

  15. Declarative UI
    Hello Mike
    Update state?

    View full-size slide

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

    View full-size slide

  17. Recomposition
    Event Composable UI-Redraw

    View full-size slide

  18. Recomposition
    Event Composable UI-Redraw

    View full-size slide

  19. Recomposition
    Event Composable UI-Redraw

    View full-size slide

  20. Modifiers
    Hello World
    Text(

    modifier = Modifier

    .padding(10.dp),

    text = "Hello World"

    )

    View full-size slide

  21. Modifiers
    Hello World
    Text(

    modifier = Modifier

    .background(Color.Green),

    text = "Hello World"

    )

    View full-size slide

  22. Modifiers
    Hello World
    Text(

    modifier = Modifier

    .border(width = 2.dp, Color.Green),

    text = "Hello World"

    )

    View full-size slide

  23. Modifiers
    ● Order matters

    View full-size slide

  24. Modifiers
    Hello World
    Text(

    modifier = Modifier

    .border(width = 2.dp, Color.Red)

    .background(Color.Green)

    .padding(12.dp),

    text = "Hello World"

    )

    View full-size slide

  25. Modifiers
    Hello World
    Text(

    modifier = Modifier

    .padding(12.dp)

    .border(width = 2.dp, Color.Red)

    .background(Color.Green),

    text = "Hello World”

    )

    View full-size slide

  26. Column
    Column {



    }

    View full-size slide

  27. Column
    Column {

    Text("Hello World")

    Text("Hello World")

    Text("Hello World")

    }

    Hello World
    Hello World
    Hello World

    View full-size slide

  28. Column
    Column(

    verticalArrangement =

    ) {

    Text("Hello World")

    Text("Hello World")

    Text("Hello World")

    }

    X
    Y

    View full-size slide

  29. Column
    Column(

    verticalArrangement = Arrangement.Center

    ) {

    Text("Hello World")

    Text("Hello World")

    Text("Hello World")

    }

    Hello World
    Hello World
    Hello World

    View full-size slide

  30. Column
    Column(

    Arrangement.SpaceBetween

    ) {

    Text("Hello World")

    Text("Hello World")

    Text("Hello World")

    }

    Hello World
    Hello World
    Hello World

    View full-size slide

  31. Column
    Column(

    horizontalAlignment =

    ) {

    Text("Hello World")

    Text("Hello World")

    Text("Hello World")

    }

    X
    Y

    View full-size slide

  32. Column
    Column(

    horizontalAlignment = Alignment.End

    ) {

    Text("Hello World")

    Text("Hello World")

    Text("Hello World")

    }

    Hello World
    Hello World
    Hello World

    View full-size slide

  33. Column
    Column(

    Alignment.CenterHorizontally

    ) {

    Text("Hello World")

    Text("Hello World")

    Text("Hello World")

    }

    Hello World
    Hello World
    Hello World

    View full-size slide

  34. Row
    Row {

    Text(“Hello")

    Text("World")

    Text(“!")

    }

    HelloWorld!

    View full-size slide

  35. Row
    Row(

    horizontalArrangement =

    ) {

    Text("Hello World")

    Text("Hello World")

    Text("Hello World")

    }

    X
    Y

    View full-size slide

  36. Row
    Row(

    Arrangement.SpaceBetween

    ) {

    Text(“Hello")

    Text("World")

    Text(“!")

    }

    Hello World !

    View full-size slide

  37. Row
    Row(

    verticalAlignment =

    ) {

    Text("Hello World")

    Text("Hello World")

    Text("Hello World")

    }

    X
    Y

    View full-size slide

  38. Row
    Row(

    Alignment.CenterVertically

    ) {

    Text("Hello World")

    Text("Hello World")

    Text("Hello World")

    }

    HelloWorld!

    View full-size slide

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

    View full-size slide

  40. Column & Row

    View full-size slide

  41. Column & Row
    Row {

    Image(…)

    Column {

    Text(“…”)

    Text(“…”)

    }

    }

    View full-size slide

  42. Column & Row
    Row {

    Image(…)

    Column {

    Text(“…”)

    Text(“…”)

    }

    }

    View full-size slide

  43. Column & Row
    Row {

    Image(…)

    Column {

    Text(“…”)

    Text(“…”)

    }

    }

    View full-size slide

  44. Layout Modifiers

    View full-size slide

  45. Layout Modifiers
    Column(

    Modifier.background(Color.Green)

    ) {

    Text(text = “Hello World”)

    Text(text = "Hello World")

    }

    Hello World
    Hello World

    View full-size slide

  46. Layout Modifiers
    Column(

    Modifier

    .background(Color.Green)

    .fillMaxWidth()

    ) {

    Text(text = “Hello World”)

    Text(text = "Hello World")

    }

    Hello World
    Hello World

    View full-size slide

  47. Layout Modifiers
    Column(

    Modifier

    .background(Color.Green)

    .fillMaxSize()

    ) {

    Text(text = “Hello World”)

    Text(text = "Hello World")

    }

    Hello World
    Hello World

    View full-size slide

  48. Layout Modifiers
    Column(

    Modifier

    .background(Color.Green)

    .width(200.dp)

    ) {

    Text(text = “Hello World”)

    Text(text = "Hello World")

    }

    Hello World
    Hello World
    200dp

    View full-size slide

  49. Box
    Box {

    Image(…)

    }

    View full-size slide

  50. Box
    Box {

    Image(…)

    Column {

    Text(…)

    Text(…)

    }

    }

    View full-size slide

  51. Box
    Box {

    Image(…)

    Column(

    Modifier.align(

    Alignment.BottomEnd

    )

    ) {

    Text(…)

    Text(…)

    }

    }

    View full-size slide

  52. List
    @Composable

    fun EmployeeListView(items: List) {

    LazyColumn {

    items(names) { name
    ->


    Text(text = name)

    }

    }

    }

    View full-size slide

  53. List
    @Composable

    fun EmployeeListView(items: List) {

    LazyColumn {

    items(items) { item
    ->


    Text(text = name)

    }

    }

    }

    View full-size slide

  54. List
    @Composable

    fun EmployeeListView(items: List) {

    LazyColumn {

    items(items) { item
    ->


    ItemRow(item)

    }

    }

    }

    View full-size slide

  55. Slot Layouts

    View full-size slide

  56. Scaffold
    Scaffold(

    topBar = {



    }

    ) {



    }

    View full-size slide

  57. Scaffold
    Scaffold(

    topBar = {

    Text(text = "Home")

    }

    ) {



    }

    Home

    View full-size slide

  58. Scaffold
    Scaffold(

    topBar = {

    Text(text = "Home")

    }

    ) {

    Text(text = “Hello World”)

    }

    Home
    Hello World

    View full-size slide

  59. Layouts
    ● Column

    ● Row

    ● Box

    ● Scaffold

    View full-size slide

  60. Managing State

    View full-size slide

  61. Managing State
    ● Setup state using mutableStateOf

    View full-size slide

  62. Managing State
    0
    + -

    View full-size slide

  63. Managing State
    0
    var counter by remember {

    mutableStateOf(0)

    }

    View full-size slide

  64. Managing State
    0
    Column {

    Text(

    text = counter.toString()

    )

    ...


    }

    View full-size slide

  65. Managing State
    0
    + -
    Button(

    onClick = { counter
    ++
    }

    ) {

    Text(text = "+")

    }

    View full-size slide

  66. Managing State
    0
    + -
    Button(

    onClick = { counter
    --
    }

    ) {

    Text(text = “-")

    }

    View full-size slide

  67. Recomposition
    Event Composable UI-Redraw

    View full-size slide

  68. Managing State
    0
    var counter by remember {

    mutableStateOf(0)

    }
    + -

    View full-size slide

  69. Managing State
    ● Setup state using mutableStateOf

    ● Setting up search

    View full-size slide

  70. Managing State
    Search

    View full-size slide

  71. Managing State
    Search
    Search View
    View Model
    Event

    View full-size slide

  72. Managing State
    Search
    @Composable

    fun SearchView() {

    }

    View full-size slide

  73. Managing State
    Search
    @Composable

    fun SearchView() {

    var query by remember {

    mutableStateOf("")

    }

    }

    View full-size slide

  74. Managing State
    Search
    @Composable

    fun SearchView() {

    OutlinedTextField(

    value = query

    )

    }

    View full-size slide

  75. Managing State
    Search
    @Composable

    fun SearchView() {

    OutlinedTextField(

    onValueChange = {

    query = it

    }

    )

    }

    View full-size slide

  76. Managing State
    Search
    @Composable

    fun SearchView() {

    OutlinedTextField(

    keyboardOptions = KeyboardOptions(

    imeAction = ImeAction.Search

    )

    )

    }

    View full-size slide

  77. Managing State
    Search
    @Composable

    fun SearchView() {

    OutlinedTextField(

    keyboardOptions = KeyboardActions(

    onSearch = {

    }

    )

    )

    }

    View full-size slide

  78. Managing State
    Search
    @Composable

    fun SearchView(onSearch: (String)
    ->
    Unit) {

    OutlinedTextField(

    keyboardOptions = KeyboardActions(

    onSearch = {

    }

    )

    )

    }

    View full-size slide

  79. Managing State
    Search
    @Composable

    fun SearchView(onSearch: (String)
    ->
    Unit) {

    OutlinedTextField(

    keyboardOptions = KeyboardActions(

    onSearch = {

    onSearch(query)

    }

    )

    )

    }

    View full-size slide

  80. Managing State
    Search
    Search View
    View Model
    Event

    View full-size slide

  81. Managing State
    Search
    SearchView { query
    ->


    viewModel.onSearch(query)

    }

    View full-size slide

  82. Managing State
    ● Setup state using mutableStateOf

    ● Setting up search

    ● Working with Flows

    View full-size slide

  83. Flows
    View View Model

    View full-size slide

  84. Flows
    ● collectAsState

    View full-size slide

  85. Flows
    class MyViewModel: ViewModel() {

    val stateFlow = _stateFlow.asStateFlow()

    }

    View full-size slide

  86. Flows
    @Composable

    fun HomeView() {

    viewModel.stateFlow.collectAsState()

    }

    View full-size slide

  87. Managing State
    ● flow.collectAsState

    ● liveData.observeAsState

    ● observable.subscribeAsState

    View full-size slide

  88. Managing State
    ● Setup state using mutableStatOf

    ● Setting up search

    ● Working with Flows

    View full-size slide

  89. Side Effects

    View full-size slide

  90. What is a side effect?
    ● Work outside of composable function

    ● Open new screen when tapping button

    ● Show no network message

    View full-size slide

  91. Side Effects
    ● Launched Effect

    ● Disposable Effect

    View full-size slide

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

    View full-size slide

  93. Launched Effect
    @Composable

    fun HomeView() {

    var counter by remember { mutableStateOf(0) }

    LaunchedEffect(key1 = Unit) {

    while (true) {

    delay(2000)

    counter
    ++


    }

    }

    }

    View full-size slide

  94. Launched Effect
    @Composable

    fun HomeView() {

    var counter by remember { mutableStateOf(0) }

    LaunchedEffect(key1 = Unit) {

    while (true) {

    delay(2000)

    counter
    ++


    }

    }

    }

    View full-size slide

  95. Launched Effect
    @Composable

    fun HomeView() {

    var counter by remember { mutableStateOf(0) }

    LaunchedEffect(key1 = Unit) {

    while (true) {

    delay(2000)

    counter
    ++


    }

    }

    }

    View full-size slide

  96. Launched Effect
    @Composable

    fun HomeView() {

    var counter by remember { mutableStateOf(0) }

    LaunchedEffect(key1 = Unit) {

    while (true) {

    delay(2000)

    counter
    ++


    }

    }

    }

    View full-size slide

  97. Disposable Effect
    ● Triggers on first composition or key change

    ● Calls onDispose on terminate

    View full-size slide

  98. Disposable Effect
    @Composable

    fun HomeView() {

    DisposableEffect(
    ...
    ) {

    onDispose {

    callback.remove()

    }

    }

    }

    View full-size slide

  99. Side Effects
    ● Launched Effect

    ● Disposable Effect

    View full-size slide

  100. Introduction to Jetpack Compose
    ● Thinking in Compose

    ● Layouts

    ● Managing State

    ● Side Effects

    View full-size slide

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

    View full-size slide