Jetpack Compose Recap Session.pdf

This work is licensed under the Apache 2.0 License
Jetpack Compose
for Android Developers

Firstname Lastname
Company and Title
Firstname Lastname
Company and Title
Camp Counselors

● Thinking in Compose
● Composable functions
● Compose toolkit
● Tooling
Agenda

Thinking in
Compose

Construct UI by
describing what,
not how.

goo.gle/compose-samples

Survey answer
Image Text Radio button

class SurveyQuestionActivity : Activity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val image = findViewById(R.id.answer_image)
val text = findViewById(R.id.answer_text)
val radioButton =
findViewById(R.id.answer_radio_button)
// ...
}
}
// SurveyQuestionActivity.kt

class SurveyQuestionActivity : Activity() {
override fun onCreate(savedInstanceState: Bundle?) {
// ...
image.setImage(...)
text.setText(...)
// ...
}
}
// SurveyQuestionActivity.kt

@Composable
fun SurveyAnswer(answer: Answer) {
Row {
Image(answer.image)
Text(answer.text)
RadioButton(false, onClick = { /* … */ })
}
}
// SurveyAnswer.kt

Event handler
UI element
onClick()

UI
State

UI 2
State 2

@Composable
Row {
/ * ... */
var selected: Boolean = // ...
RadioButton(selected, onClick = { /* … */ })
}
}
// SurveyAnswer.kt

@Composable
Row {
/ * ... */
var selected: Boolean = // ...
RadioButton(selected, onClick = {
selected = !selected
})
}
}
// SurveyAnswer.kt

Describe what, not how
UI elements are functions
State controls UI
Events control State
1
2
3
4

Composable
functions

// SurveyAnswer.kt
@Composable
Row {
Image(answer.image)
Text(answer.text)
RadioButton(false, onClick = { /* … */ })
}
}

// SurveyAnswer.kt
@Composable
fun SurveyAnswer(answer: Answer) { /* … */ }
@Composable
fun SingleChoiceQuestion(answers: List<Answer>) {
Column {
answers.forEach { answer ->
SurveyAnswer(answer = answer)
}
}
}

// SingleChoiceQuestion.kt
@Composable
Column {
}
}
}

@Composable
Column {
// Can’t do this!!
val answer = SurveyAnswer(answer = answer)
}
}
}

@Composable
Column {
if (answers.isEmpty()) {
Text(“There are no answers to choose from!”)
} else {
}
}
}
}

@Composable
// Don’t do this! There shouldn’t be side-effects
SurveyApp.didShowSingleChoiceQuestion = true
Column {
if (answers.isEmpty()) { /* ... */ }
else { /* ... */ }
}
}

@Composable
// Fast and no side-effects
Column {
if (answers.isEmpty()) { /* ... */ }
else { /* ... */ }
}
}

@Composable
SurveyAnswer(
answer = answer,
isSelected = false,
)
}
}

@Composable
var selectedAnswer: Answer? = null
SurveyAnswer(
answer = answer,
isSelected = false,
)
}
}

@Composable
var selectedAnswer: MutableState<Answer?> =
mutableStateOf(null)
SurveyAnswer(
answer = answer,
isSelected = false,
)
}
}

@Composable
mutableStateOf(null)
SurveyAnswer(
answer = answer,
isSelected = (selectedAnswer.state == answer),
)
}
}

@Composable
remember { mutableStateOf(null) }
SurveyAnswer(
answer = answer,
)
}
}

@Composable
rememberSaveable { mutableStateOf(null) }
SurveyAnswer(
answer = answer,
)
}
}

@Composable
var selectedAnswer: Answer? by
SurveyAnswer(
answer = answer,
)
}
}

@Composable
SurveyAnswer(
answer = answer,
isSelected = (selectedAnswer == answer),
)
}
}

@Composable
SurveyAnswer(
answer = answer,
onAnswerSelected = { answer -> selectedAnswer = answer }
)
}
}

Event handler
UI element
event
state
Events change State

Event handler
UI element
onAnswerSelected
answer
Events change State

@Composable
val selectedAnswer: Answer? by
rememberSaveable { mutableStateOf<Answer>(null) }
SurveyAnswer(
answer = answer,
onAnswerSelected = { answer -> selectedAnswer = answer }
)
}
}

Composable
functions can
execute in any order.

// ButtonRow.kt
@Composable
fun ButtonRow() {
MyFancyNavigation {
StartScreen()
MiddleScreen()
EndScreen()
}
}

Composable
functions can run
in parallel.

@Composable
fun ListComposable(myList: List<String>) {
Row(horizontalArrangement = Arrangement.SpaceBetween) {
Column {
for (item in myList) {
Text("Item: $item")
}
}
Text("Count: ${myList.size}")
}
}
// ListComposable.kt

@Composable
fun ListWithBug(myList: List<String>) {
var items = 0
Row(horizontalArrangement = Arrangement.SpaceBetween) {
Column {
for (item in myList) {
Text("Item: $item”)
items++ // Avoid! Side-effect of the column recomposing.
}
}
Text("Count: $items")
}
}
// ListComposable.kt

Recomposition skips
as much as possible.

@Composable
fun GreetingScreen(name: String) {
Column {
Header()
Greeting(name = name)
Footer()
}
}
// GreenScreen.kt

Recomposition is
optimistic.

Composable
functions might run
frequently.

Summary
Create composables using the @Composable annotation
It’s quick & easy to create composables
Composables accept parameters
Use MutableState and remember
Composables should be side-effect free

Composables can:
Execute in any order
Run in parallel
Be skipped
Run frequently
1
2
3
4

Compose Toolkit

MaterialTheme(
colorScheme = MyAppsColorScheme,
typography = MyAppsTypography,
shapes = MyAppsShapes
) {
// Content goes here
}

Scaffold(
topBar = { SmallTopAppBar(/* ... */) },
floatingActionButtonPosition = FabPosition.End,
floatingActionButton = {
FloatingActionButton(/* ... */)
},
content = { /* ... */ }
)

SurveyTopAppBar
SurveyBottomBar
Question

Surface {
Text("Hello Compose")
}
Hello Compose

Surface(
color = MaterialTheme.colorScheme.primary,
) {
}
Hello Compose

Surface(
color = MaterialTheme.colorScheme.primary,
shape = RoundedCornerShape(8.dp),
) {
}
Hello Compose

Surface(
color = MaterialTheme.colorScheme.surface,
border = BorderStroke(2.dp,
MaterialTheme.colorScheme.outline
)
) {
}
Hello Compose

Surface(
color = MaterialTheme.colorScheme.surface,
border = BorderStroke(2.dp,
MaterialTheme.colorScheme.surfaceVariant
),
shadowElevation = 8.dp,
tonalElevation = 8.dp,
) {
}
Hello Compose

goo.gle/compose-material-ref
m3.material.io

Standard layouts

Row {
Component1()
Component2()
Component3()
} 1 2 3
Row

1
2
3
Column
Column {
Component1()
Component2()
Component3()
}

2
1
3
Box
Box {
Component1()
Component2()
Component3()
}

@Composable
Row {
Image(answer.image)
Text(answer.text)
RadioButton(/* … */)
}
}

@Composable
Row(
verticalAlignment =
Alignment.CenterVertically
) {
/* ... */
}
}

@Composable
Row(
verticalAlignment =
Alignment.CenterVertically,
horizontalArrangement =
Arrangement.SpaceBetween
) {
/* ... */
}
}

Modifiers

Text("Hello
Compose")
Hello
Compose

Text(
"Hello Compose!",
Modifier.background(Color.Magenta)
)
Hello
Compose

Text(
"Hello Compose!",
.size(200.dp, 30.dp)
)
Hello Compose

Text(
"Hello Compose!",
.padding(5.dp)
)
Hello Compose

Text(
"Hello Compose!",
.padding(5.dp)
.alpha(0.5f)
)
Hello Compose

Text(
"Hello Compose!",
.padding(5.dp)
.alpha(0.5f)
.clickable {
// Called when Text clicked
}
)
Hello Compose

Box(Modifier.size(150.dp)) {
}
Hello Compose

Box(Modifier.size(150.dp)) {
Text(
"Hello Compose!",
Modifier.align(
Alignment.BottomEnd
)
)
} Hello Compose

@Composable
Row(...) {
Image(answer.image)
Text(answer.text)
}
}
Desired
Current

@Composable
Row(
Modifier.fillMaxWidth(),
/* ... */
) {
Image(answer.image)
Text(answer.text)
RadioButton(/* ... */)
}
}
Desired
Current

@Composable
Row(
Modifier.fillMaxWidth()
.padding(16.dp),
/* ... */
) {
Image(answer.image)
Text(answer.text)
RadioButton(/* ... */)
}
}
Desired
Current

@Composable
Surface(
border = BorderStroke(
1.dp,
),
shape = MaterialTheme.shapes.small
) {
Row(/* ... */) { }
}
}
Desired
Current

goo.gle/compose-modifiers
goo.gle/compose-modifiers-list

@Composable
Surface(
border = BorderStroke(
1.dp,
),
shape = MaterialTheme.shapes.small
) {
Row(Modifier.fillMaxWidth().padding(16.dp)) {
Image(answer.image)
Text(answer.text)
}
}
}

Compose Tooling

Live demo!

Jetpack Compose Recap Session.pdf

Recommended

Recommended

More Related Content

Similar to Jetpack Compose Recap Session.pdf

Similar to Jetpack Compose Recap Session.pdf (20)

Recently uploaded

Recently uploaded (20)

Jetpack Compose Recap Session.pdf