Android Jetpack Compose - Turkey 2021

Jetpack
Compose
a new way to implement UI on Android
Nelson Glaube
r

@nglauber

Jetpack Compose is a
modern declarative UI
Toolkit to simplify and
accelerate native Android
UI development with less
code, powe
rf
ul tools, and
intuitive Kotlin APIs.

Imperative UI x Declarative UI
• In Imperative UI, an UI entity is fully de
fi
ned and then it is updated using
public methods and/or prope
rt
ies (e.g: Android View class).

• In Declarative UI, the UI and its state is de
fi
ned together and a
framework has the responsibility to update this state (which will cause
the UI re
fl
ects the changes automatically).

Motivation
• It’s not easy (or simple) to create a custom view…

• Current toolkit was created in 2008, but UIs are much more complex
nowadays…

• Declarative UI approach becomes popular among mobile developers
thanks to frameworks like React Native, Swi
ft
UI and Flu
tt
er.

Jetpack Compose
• A new way of thinking the UI development: components over screens.

• Compatible with existing Android apps, so you can adopt it progressively.

•
⚠︎
Currently in Beta stage! Don’t use it in production (yet)!

Ge
tt
ing sta
rt
ed
with Compose

Compose Preview
Interactive Mode
Launch
Composable
@Preview

setContent
class MainActivity : ComponentActivity()
{

override fun onCreate(savedInstanceState: Bundle?)
{

super.onCreate(savedInstanceState
)

setContent
{

MyAppTheme
{

Surface(color = MaterialTheme.colors.background)
{

Greeting("Android"
)

}

}

}

}

}

@Composabl
e

fun Greeting(name: String)
{

Text(text = "Hello $name!"
)

}

setContent
class MainActivity : ComponentActivity()
{

override fun onCreate(savedInstanceState: Bundle?)
{

super.onCreate(savedInstanceState
)

setContent
{

MyAppTheme
{

Surface(color = MaterialTheme.colors.background)
{

Greeting("Android"
)

}

}

}

}

}

@Composabl
e

fun Greeting(name: String)
{

Text(stringResource(R.string.hello, name)
)

}

Material Theme
• De
fi
ne application’s theme with its respective colors, fonts, shapes, …

• O
ft
en is the root element of the screen (but you can nested themes).
setContent {

MyAppTheme {

Greeting("Android")

}

}

Material Theme
@Composable

fun MyAppTheme(

darkTheme: Boolean = isSystemInDarkTheme(),

content: @Composable () -> Unit) {

val colors = if (darkTheme) {

DarkColorPalette

} else {

LightColorPalette

}

MaterialTheme(

colors = colors,

typography = Typography,

shapes = Shapes,

content = content

)

}

private val DarkColorPalette =

darkColors(

primary = Purple200,

primaryVariant = Purple700,

secondary = Teal200

)

private val LightColorPalette =

lightColors(

primary = Purple500,

primaryVariant = Purple700,

secondary = Teal200

)

Modi
fi
ers
• Decorate an element

• Provide layout parameters

• Assign behavior

• They’re chained and the order is signi
fi
cant!

val shape = CutCornerShape(topStart = 16.dp, bottomEnd = 16.dp)

Text(

text = "Text 1",

style = TextStyle(

color = Color.White,

fontWeight = FontWeight.Bold,

textAlign = TextAlign.Center),

modifier = Modifier.fillMaxWidth()

.padding(16.dp)

.border(2.dp, MaterialTheme.colors.secondary, shape)

.padding(1.dp)

.background(MaterialTheme.colors.primary, shape)

.clickable(onClick = {

// Click event

})

.padding(16.dp)

)

val shape = RoundedCornerShape(8.dp)

Text(

text = "Text 1",

style = TextStyle(





.padding(16.dp)


.padding(1.dp)



// Click event

})

.padding(16.dp)

)

val shape = CircleShape

Text(

text = "Text 1",

style = TextStyle(





.padding(16.dp)


.padding(1.dp)



// Click event

})

.padding(16.dp)

)

Layouts
Column Row Box Constraint
 
Layout

Box(modifier = Modifier.fillMaxWidth()) {

Column(

modifier = Modifier

.padding(16.dp)

.fillMaxWidth()

) {

Text("Column Text 1")

Text("Column Text 2")

Row(

modifier = Modifier.fillMaxWidth(),

horizontalArrangement = Arrangement.SpaceEvenly

) {

Text(text = "Row Text 1")

Text(text = "Row Text 2")

}

}

Text(

"Stack Text",

modifier = Modifier

.align(Alignment.TopEnd)

.padding(end = 16.dp, top = 16.dp)

)

}

ConstraintLayout
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha05
"

ConstraintLayout(modifier = Modifier.fillMaxSize().padding(16.dp)) {

val (text1Ref, edit1Ref, btn1Ref, btn2Ref) = createRefs()

Text("User registration", modifier = Modifier.constrainAs(text1Ref) {

top.linkTo(parent.top)

centerHorizontallyTo(parent)

})

TextField(modifier = Modifier.padding(top = 8.dp)

.constrainAs(edit1Ref) {

start.linkTo(parent.start)

end.linkTo(parent.end)

top.linkTo(text1Ref.bottom)

})

Button(onClick = {}, modifier = Modifier.padding(top = 8.dp)

.constrainAs(btn1Ref) {

end.linkTo(edit1Ref.end)

top.linkTo(edit1Ref.bottom)

}

)

TextButton(onClick = {}, modifier = Modifier.padding(end = 8.dp)


end.linkTo(btn1Ref.start)

baseline.linkTo(btn1Ref.baseline)

}

)

}

ConstraintLayout(modifier = Modifier.fillMaxSize().padding(16.dp)) {

val (text1Ref, edit1Ref, btn1Ref, btn2Ref) = createRefs()

Text("User registration", modifier = Modifier.constrainAs(text1Ref) {

top.linkTo(parent.top)

centerHorizontallyTo(parent)

})

TextField(modifier = Modifier.padding(top = 8.dp)

.constrainAs(edit1Ref) {

start.linkTo(parent.start)

end.linkTo(parent.end)

top.linkTo(text1Ref.bottom)

})

Button(onClick = {}, modifier = Modifier.padding(top = 8.dp)


end.linkTo(edit1Ref.end)

top.linkTo(edit1Ref.bottom)

}

)

TextButton(onClick = {}, modifier = Modifier.padding(end = 8.dp)


end.linkTo(btn1Ref.start)

baseline.linkTo(btn1Ref.baseline)

}

)

}
👇

Bu
tt
on
Button(onClick = {}) {

Text("Button")

}

OutlinedButton(onClick = {}) {

Text("OutlinedButton")

}

TextButton(onClick = {}) {

Text("TextButton")

}

Bu
tt
on
Button(onClick = {})
{

if (isLoading)
{

CircularProgressIndicator(color = Color.White
)

} else
{

Text("Button"
)

}

}

Image
Image
(

painterResource(R.drawable.recife)
,

contentDescription = null
,

contentScale = ContentScale.FillHeigh
t

)
Image
(

painterResource(R.drawable.ic_android_orange)
,

,

contentScale = ContentScale.Fit
,

colorFilter = ColorFilter.tint(Color.Cyan
)

)

• Window Insets

• System UI (status and navigation bars
colors)

• AppCompat Theme Adapter

• ViewPager like
• Flexbox layout

• Swipe to refresh

• Image loading (Glide and Coil)

https://github.com/google/accompanist

Image from the network
Image
(

rememberCoilPainter
(

request = "https://img.com/img.jpg”
,

)
,

,

modifier = Modifier.size(50.dp, 50.dp
)

)
Image
(

rememberGlidePainter
(

request = "https://img.com/img.jpg”
,

)
,

,

modifier = Modifier.size(50.dp, 50.dp
)

)

Column + Scroll
Column(modifier = Modifie
r

.verticalScroll(rememberScrollState()
)

)
{

for (i in 0..200)
{

Text
(

"Item: $i"
,

modifier = Modifie
r

.padding(8.dp
)

.fillMaxWidth(
)

)

}

}

Row + Scroll
Row(modifier = Modifie
r

.horizontalScroll(rememberScrollState()
)

)
{

for (i in 0..200)
{

Text
(

"Item: $i"
,

modifier = Modifie
r

.padding(8.dp
)

)

}

}

Lists in current toolkit
• De
fi
ne a layout
fi
le for each item of the list

• Create an adapter subclass (view holder, get count, in
fl
ate view, …)

• Declare a RecyclerView/ListView in the screen’s XML
fi
le

• Set up everything in your activity/fragment

• What about you need a header and/or a footer?
🤦

List in Compose
@Composabl
e

fun UserListScreen(users: List<User>)
{

LazyColumn
(

modifier = Modifier.fillMaxSize())
{

item
{

Text("Header"
,

Modifier.fillMaxWidth().padding(8.dp
)

)

}

items(users) { user -
>

Text("${user.name} - ${user.age}"
,

)

)

}

}

}

List in Compose (with index)
@Composabl
e

fun UserListScreen(users: List<User>)
{

LazyColumn
(

modifier = Modifier.fillMaxSize())
{

item
{

Text("Header"
,

)

)

}

itemsIndexed(users) { index, user -
>

Text("${user.name} - ${user.age}"
,

)

)

}

}

}

Sca
ff
old
Scaffold(

topBar = {...},

floatingActionButton = {...},

bottomBar = {...}

) {...}

TopAppBar
(

title = { Text(text = "Compose") }
,

backgroundColor = MaterialTheme.colors.primary
,

contentColor = Color.Yellow
,

actions =
{

IconButton(onClick = {})
{

Icon(Icons.Default.Search, "Search"
)

}

IconButton
(

onClick = { …
}

)
{

Icon(Icons.Filled.MoreVert, "More"
)

DropdownMenu(…
)

}
}

)

FloatingActionButton
(

onClick = { … }
,

backgroundColor = Color.Red
,

contentColor = Color.Whit
e

)
{

Icon(Icons.Filled.Add, "Add"
)

}

BottomAppBar(

backgroundColor = MaterialTheme.colors.primary,

content = {

BottomNavigationItem(

icon = { Icon(Icons.Filled.Home) },

selected = selectedTab == 0,

onClick = { selectedTab = 0 },

selectedContentColor = Color.White,

unselectedContentColor = Color.DarkGray,

label = { Text(text = "Home") }

)

BottomNavigationItem(…)

}

)

State
• State in an app is any value that can change over time.

• Component is updated when state has changed
var nameState by remember { mutableStateOf("") }
TextField
(

value = nameState
,

label = { Text("Name") }
,

onValueChange = { s: String -
>

nameState =
s

}

)

State
data class Score
(

var team: String
,

var score: In
t

)

State
class Score
(

team: String
,

score: In
t

)
{

var team by mutableStateOf(team
)

var score by mutableStateOf(score)
}

class Score
(

team: String
,

score: In
t

)
{

var team by mutableStateOf(team
)

var score by mutableStateOf(score)
}

@Composabl
e

fun TeamScore(score: Score)
{

Column(horizontalAlignment = Alignment.CenterHorizontally)
{

Text(text = score.team, style = MaterialTheme.typography.h6
)

Button
(

content = { Text("+") }
,

onClick = { score.score += 1
}

)

Text(text = score.score.toString(), style = MaterialTheme.typography.h5
)

Button
(

content = { Text("-") }
,

onClick = { score.score = max(score.score - 1, 0)
}

)

}

}

@Composabl
e

fun ScoreScreen(homeScore: Score, visitorScore: Score)
{

Column
(

modifier = Modifier.fillMaxSize()
,

verticalArrangement = Arrangement.Center
,

horizontalAlignment = Alignment.CenterHorizontall
y

)
{

Row
{

TeamScore(score = homeScore
)

Text(text = "x"
,

modifier = Modifier.padding(horizontal = 8.dp)
,

style = MaterialTheme.typography.h6
)

TeamScore(score = visitorScore
)

}

OutlinedButton
(

modifier = Modifier.padding(top = 16.dp)
,

content = { Text("Reset") }
,

onClick =
{

homeScore.score =
0

visitorScore.score =
0

}

)

}

}

Observing state
• LiveData.observeAsState

• Flow.collectAsState

• Observable.subscribeAsState
View Model
UI
state event

LiveData
@Composabl
e

fun UserScreen
(

usersLiveData: LiveData<List<UserBinding>>
,

onSaveUser: (UserBinding) -> Unit
,

onDeleteUser: (UserBinding) -> Uni
t

) {
val users by usersLiveData.observeAsState(
)

Column(modifier = Modifier.fillMaxSize())
{

InputPanel(currentUser, onInsertUser = { user ->
onSaveUser(user
)

}
)

UserList
(

users = users ?: emptyList()
,

onDeleteUser = onDeleteUser
)

}

}

LiveData
@Composabl
e

fun UserScreen
(

,

,

t

) {
val users by usersLiveData.observeAsState(
)

Column(modifier = Modifier.fillMaxSize()) {
onSaveUser(user
)

}
)

UserList
(

,

onDeleteUser = onDeleteUser
)

}

}

LiveData
UserScreen
(

usersLiveData = viewModel.allUsers
,

onSaveUser = { user ->

viewModel.saveUser(user
)

}
,

onDeleteUser = { user -
>

viewModel.deleteUser(user
)

}

)

@Composabl
e

fun UserScreen
(

,

,

t

) { …
}

ViewModel + LiveData + Compose
@Composabl
e

fun UserScreen
(

viewModel: UsersViewMode
l

) {
val users by viewModel.allUsers.observeAsState(
)

{

)

}
)

UserList
(

,

>

)

}
)

}

}

ViewModel + LiveData + Compose
@Composabl
e

fun UserScreen()
{

val viewModel: UsersViewModel = viewModel()
val users by viewModel.allUsers.observeAsState(
)

{

)

}
)

UserList
(

,

>

)

}
)

}

}

implementation "androidx.lifecycle:lifecycle-viewmodel-compose:<version>
"

In fragments…
class MyFragment: Fragment()
{

override fun onCreateView
(

inflater: LayoutInflater
,

container: ViewGroup?
,

savedInstanceState: Bundle
?

): View?
{

return ComposeView(requireContext()).apply
{

setContent
{

AppTheme
{

YourComposable(
)

}

}

}

}

}

In layout
fi
les
<androidx.compose.ui.platform.ComposeVie
w

android:id="@+id/my_composable
"

android:layout_width="wrap_content
"

android:layout_height="wrap_content" /
>

findViewById<ComposeView>(R.id.my_composable).setContent
{

MaterialTheme
{

Surface
{

Text(text = "Hello!"
)

}

}

}

ComposeView
class MyComposeVie
w

@JvmOverloads constructor(context: Context, attrs: AttributeSet? = null)
:

AbstractComposeView(context, attrs)
{

@Composabl
e

override fun Content()
{

MyComposableFunction(
)

}

}

<br.com.nglauber.MyComposeVie
w

android:layout_width="match_parent
"

android:layout_height="match_parent"/
>

@Composabl
e

fun MyCalendar(onDateUpdate: (Date) -> Unit)
{

AndroidView
(

factory = { context: Context -
>

val view
=

LayoutInflater.from(context).inflate(R.layout.my_layout, null, false
)

val textView = view.findViewById<TextView>(R.id.txtDate
)

val calendarView = view.findViewById<CalendarView>(R.id.calendarView
)

calendarView?.setOnDateChangeListener { cv, year, month, day -
>

val date = Calendar.getInstance().apply
{

set(year, month, day
)

}.tim
e

textView?.text = date.toString(
)

onDateUpdate(date
)

}
vie
w

}
,

update = { view -
>

// Update vie
w

}

)

}

@Composabl
e

{

AndroidView(
>

val view
=

)

)

)

>

{

)

}.tim
e

)

onDateUpdate(date
)

}
vie
w

}
,

update = { view -
>

// Update vie
w

}

)

}

@Composabl
e

{

AndroidView
(

>

val view
=

)

)

)

>

{

)

}.tim
e

)

onDateUpdate(date
)

}
vie
w

},
update = { view -
>

// Update vie
w

}

)

}

AndroidViewBinding
android
{

..
.

viewBinding
{

enabled = tru
e

}

}
implementation "androidx.compose.ui:ui-viewbinding:$compose_version"
AndroidViewBinding(factory = MyBindingLayoutBinding::inflate)
{

textView.text = "My Text
"

seekBar.progress = 5
0

}

Resource
fi
les
• stringResources(R.string.your_string)

• dimensionResource(R.dimen.padding_small)

• colorResource(R.color.blue)

• …

On con
fi
g changes…
Unlike the current UI toolkit, the state is not saved automatically across
con
fi
guration changes.
var state by rememberSaveable
{

mutableStateOf("Compose!!!"
)

}

E
ff
ects
• LaunchedE
ff
ect

• DisposableE
ff
ect
LaunchedEffect(someKey)
{

// do something on launc
h

}
DisposableEffect(someKey)
{

// do something on launc
h

onDispose {

// Cleanu
p

}

}

Coroutines
LaunchedEffect launch a coroutine when
the composition is added and it is
automatically cancelled when the execution
leaves the composition.
@Composabl
e

fun MyComposable()
{

val welcomeMsg = remember { mutableStateOf("Initial")
}

LaunchedEffect(welcomeMsg)
{

val s = withContext(Dispatchers.IO)
{

delay(5_000
)

"Hello Compose!
"

}

welcomeMsg.value =
s

}

Text(text = welcomeMsg.value
)

}

Coroutines
rememberCoroutineScope returns the
associated CoroutineScope to a given
position of the composition. It should be used
to launch coroutines as response of callback
events
@Composabl
e

fun MyComposable()
{

val scope = rememberCoroutineScope(
)

val count = remember { mutableStateOf(0)
}

Text(text = "Current count: ${count.value}"
)

Button(onClick =
{

scope.launch {

for (i in 1..10)
{

withContext(Dispatchers.IO)
{

delay(1_000
)

}

count.value =
i

}

}

}, content = { Text("Start!") }
)

}

Learn more…
• Samples (goo.gle/compose-samples)

• Codelabs (goo.gle/compose-codelabs)

• Documentation (goo.gle/compose-docs)

• Issue Tracker (goo.gle/compose-feedback)

• Slack Channel (goo.gle/compose-slack)

Wrap up
• The way of Compose works seems very interesting, once it is following
the same modern paradigm of other UI toolkits.

• Compose is also available for desktop apps (alpha) and now for web
(preview)!

• Jetpack Compose is in beta stage (beta-06), so DON’T USE IN
PRODUCTION!

• Be prepared, because declarative is the new standard 😉

Thank you!
Nelson Glaube
r

@nglauber

Android Jetpack Compose - Turkey 2021

More Related Content

What's hot (20)

Similar to Android Jetpack Compose - Turkey 2021 (20)

More from Nelson Glauber Leal (20)

Recently uploaded (20)

Android Jetpack Compose - Turkey 2021