Compose Camp - Jetpack Compose for Android Developers Introduction Session Deck.pdf

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

Whiston Borja
Android Developer
Camp leaders

● 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
onAnswerSelecte
d
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 = { /* ... */ }
)

SurveyTopAppBa
r
SurveyBottomBa
r
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
fun SurveyAnswer(answer: Answer)
{
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!

Compose Camp - Jetpack Compose for Android Developers Introduction Session Deck.pdf

More Related Content

What's hot

Similar to Compose Camp - Jetpack Compose for Android Developers Introduction Session Deck.pdf

Recently uploaded

Compose Camp - Jetpack Compose for Android Developers Introduction Session Deck.pdf