1 of 31

CS 1998- Intro to Android Development

LeC 2: Modifiers, Lazylists and

The Reactive UI paradigm

2 of 31

2

Kahoot!

3 of 31

Announcements

  • P1 was due yesterday
  • Office Hours started last week! Schedule is on the course gcal
  • Please fill out the weekly feedback form!
  • Make sure you enroll on student center (CS 1998-602, Course Number- 13296)

​

​

3

4 of 31

Modifiers

5 of 31

Modifiers

  • Allow you to decorate or augment a composable
  • Can alter their layout, appearance, and interaction behavior

​

​

5

6 of 31

Example

Usage

6

7 of 31

Some common Modifier Functions

  • padding(15.dp)
  • size(width = 400.dp, height = 100.dp)
  • fillMaxWidth()/fillMaxHeight()
  • align(Alignment.CenterHorizontally)
  • background(Color.Red)
  • clickable(onClick = {})

​

​

7

8 of 31

Order is important!

8

9 of 31

Lazylists

10 of 31

What is a lazylist

  • Used to represent a large list without having to load every element into memory at once
  • Cells that are visible to users are created at runtime
  • Hidden cells are rendered as you scroll

​

10

11 of 31

11

Instead of creating new cells, we’re re-rendering existing cells and binding new data to them.

12 of 31

Lazyrow

LazyColumn

Lazygrid

12

13 of 31

Example

Usage

13

14 of 31

Usage

with a given dataset

14

15 of 31

Reactive ui

16 of 31

Declarative programming

Imperative programming

Describes what the program should accomplish, rather than how to achieve it.

Describes the steps necessary to achieve a particular result.

Describes how to achieve the result

16

17 of 31

17

Also used by Flutter and SwiftUI

18 of 31

18

19 of 31

Reactive UI

Falls under declarative programming

​

The UI reacts to the changes in data without you explicitly asking it to with each change.

​

19

20 of 31

20

21 of 31

State

Represents data that can change over time

21

22 of 31

Using states

Instead of saying

var text = “Hello”

​

We say

var text by remember {mutableStateOf(“Hello”)}

​

Here, “text” is a state variable

22

23 of 31

23

whenever “text” changes, we have to explicitly recompose the UI components that use “text” to show change in the UI

var greeting = "Hello"

Text(text = greeting)

greeting = "Goodbye"

//the value in Text() //won’t change

24 of 31

Why use states instead?

The previous method can be problematic, as whenever a variable changes you have to call all the UI components that depend on it to change them.

24

25 of 31

25

However, if we use the second method, any UI component that reads from the text automatically recomposes to show any change in the value “text”

​

​

var greeting by remember {mutableStateOf("Hello")}

Text(greeting)

greeting = "Goodbye"

26 of 31

you create the components and pipeline the data in

26

27 of 31

Let’s break this down

27

var name by remember { mutableStateOf(“”) }

28 of 31

By – Allows “Name” to be used as a regular variable instead of a state

​

Remember – Used to remember the value of a state across recompositions. When the composable function recomposes, remember ensures that the state value is preserved and not reinitialized.

​

mutableStateOf() – initializes what’s inside the variable as a mutable value

28

var name by remember { mutableStateOf(“”) }

29 of 31

Example

29

30 of 31

</Lecture>

30

31 of 31

Demo time!

Text composable and button below it, both centered on the screen.

​

The initial value of the text should be “Hello”

​

When the button is pressed, the value should change to “Goodbye”

31