Jetpack Compose
a new way to implement UI on Android
Denis Mirgorod
Andersen Lab
What is Jetpack Compose?
Jetpack Compose is a modern
declarative UI Toolkit to simplify
and accelerate native Android UI
development with less code,
powerul tools, and intuitive
Kotlin APIs
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 SwiftUI, ReactNative and Flutter
Benefits Jetpack Compose?
• Declarative
• Compatible
• Increase development speed
• Concise and Idiomatic Kotlin
• Easy to maintain
• Written in Kotlin
Layouts
Position options Column
Position options Row
Modifier
Modifiers let you do these sorts of things:
•
•
•
•
Change the composable's size, layout, behavior, and appearance
Add information, like accessibility labels
Process user input
Add high-level interactions, like making an element clickable, scrollable, draggable, or
zoomable
Image(
modifier = modifier
.size(64.dp)
.padding(8.dp)
.clip(RoundedCornerShape(50))
)
IDE
1
5
3
2
4
Preview
@Preview
@Composable
fun AndersenPresentationPreview() {
AndersenPresentationTheme(darkTheme = false) {
AndersenStaffApp()
}
}
@Preview
@Composable
fun AndersenPresentationDarkThemePreview() {
AndersenPresentationTheme(darkTheme = true) {
AndersenStaffApp()
}
}
setContent
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState:
Bundle?) {
super.onCreate(savedInstanceState)
setContent {
AndersenPresentationTheme {
AndersenStaffApp()
}
}
}
}
setContent
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState:
Bundle?) {
super.onCreate(savedInstanceState)
1
setContent {
2
AndersenPresentationTheme
{
3
AndersenStaffApp()
}
}
}
}
@Composable
fun AndersenStaffApp() {
Scaffold(
topBar = {
AndersenStaffAppBar()
}
) {
LazyColumn(
modifier = Modifier
.background(MaterialTheme.colors.background)
.padding(it)
) {
items(staffPersons) { staffPerson ->
StaffPersonCard(staffPerson = staffPerson)
}
}
}
}
@Composable
@Composable
fun AndersenStaffApp() {
Scaffold(
topBar = {
AndersenStaffAppBar()
}
) {
LazyColumn(
modifier = Modifier
.background(MaterialTheme.colors.background)
.padding(it)
) {
items(staffPersons) { staffPerson ->
StaffPersonCard(staffPerson = staffPerson)
}
}
}
}
Scaffold
@Composable
fun AndersenStaffApp() {
Scaffold(
topBar = {
AndersenStaffAppBar()
}
) {
LazyColumn(
modifier = Modifier
.background(MaterialTheme.colors.background)
.padding(it)
) {
items(staffPersons) { staffPerson ->
StaffPersonCard(staffPerson = staffPerson)
}
}
}
}
TopBar
@Composable
fun AndersenStaffAppBar(modifier: Modifier =
Modifier) {
Row(
modifier = modifier
.fillMaxWidth()
.background(color =
MaterialTheme.colors.primary),
verticalAlignment =
Alignment.CenterVertically
) {
Image(
modifier = modifier
.size(64.dp)
.padding(8.dp),
painter =
painterResource(R.drawable.andersen_logo_social),
contentDescription = null)
Text(
text =
stringResource(R.string.app_name),
style = MaterialTheme.typography.h1
)
}
}
LazyColumn
@Composable
fun AndersenStaffApp() {
Scaffold(
topBar = {
AndersenStaffAppBar()
}
) {
LazyColumn(
modifier = Modifier
.background(MaterialTheme.colors.background)
.padding(it)
) {
items(staffPersons) { staffPerson ->
StaffPersonCard(staffPerson = staffPerson)
}
}
}
}
Animation
Column(
modifier = Modifier
.animateContentSize(
animationSpec = spring(
dampingRatio =
Spring.DampingRatioMediumBouncy,
stiffness = Spring.StiffnessLow
)
)
.background(color = color)
)
State and Jetpack Compose
• State enables reactive programming
• State enables separation of concerns
• State enables simplicity and performance
THANK FOR YOUR
ATTENTION