Learn Jetpack Compose

by Example
Vinay Gaba
@vinaygaba

Join the conversation in #session-chat-d2-s2-t1

Jetpack Compose
/ jet·pak kuhm·powz /
noun

Jetpack Compose is a declarative & modern toolkit for building native

Android UI. It simplifies and accelerates UI development on Android.
Why do we need
Compose?
Why do we need
Compose?

UI Toolkit is tied to the OS

State Management is tricky
Lots of context switching
Simple things still require a lot of code
Why do we need
Compose?

UI Toolkit is tied to the OS

State Management is tricky
Lots of context switching
Simple things still require a lot of code
Why do we need
Compose?

UI Toolkit is tied to the OS

State Management is tricky
Lots of context switching
Simple things still require a lot of code
Why do we need
Compose?

UI Toolkit is tied to the OS

State Management is tricky
Lots of context switching
Simple things still require a lot of code
Why do we need
Compose?

UI Toolkit is tied to the OS

State Management is tricky
Lots of context switching
Simple things still require a lot of code
Disclaimer
Disclaimer

Examples are based on 1.0.0-alpha03

Compose is in alpha so API’s can still change
Beta release expected in the next few months
Disclaimer

Examples are based on 1.0.0-alpha03

Compose is in alpha so API’s can still change
Beta release expected in the next few months
Disclaimer

Examples are based on 1.0.0-alpha03

Compose is in alpha so API’s can still change
Beta release expected in the next few months
Disclaimer

Examples are based on 1.0.0-alpha03

Compose is in alpha so API’s can still change
Beta release expected in the next few months
Examples
Hello World
class HelloWorldActivity: AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState)
}
}
class HelloWorldActivity: AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState)
setContent {

}
}
}
fun [Link](
recomposer: Recomposer = [Link](),
content: @Composable () "-> Unit
): Composition {
"// Some magic ✨🦄
}
class HelloWorldActivity: AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState)
setContent {

}
}
}
class HelloWorldActivity: AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState)
setContent {
Text(text = "Hello World")
}
}
}
class HelloWorldActivity: AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState)
setContent {
Text(text = "Hello World")
}
}
}
class HelloWorldActivity: AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState)
setContent {
Text(text = "Hello World")
}
}
}
@Composable
fun CustomTextComponent() {
Text(text = "Hello World")
}
@Composable
fun CustomTextComponent(displayText: String) {
Text(
text = displayText,
style = TextStyle(
fontSize = [Link],
fontFamily = [Link]
)
)
}
@Composable
fun CustomTextComponent(displayText: String) {
Text(
text = displayText,
style = TextStyle(
fontSize = [Link],
fontFamily = [Link]
)
)
}
@Composable
fun CustomTextComponent(displayText: String) {
Text(
text = displayText,
style = TextStyle(
fontSize = [Link],
fontFamily = [Link]
)
)
}

@Preview
@Composable
fun CustomTextComponentPreview() {
CustomTextComponent("Hello World")
}
Display Image
@Composable
fun DrawableImage() {

}
@Composable
fun DrawableImage() {
val image = loadImageResource([Link])
}
@Composable
fun DrawableImage() {
val image = loadImageResource([Link])
[Link]"?.let {
Image(asset = it, modifier = [Link]([Link]))
}
}

Modifiers are your best friends!

@Composable
fun DrawableImage(@DrawableRes resId: Int) {
val image = loadImageResource(resId)
[Link]"?.let {
Image(
asset = it,
modifier = [Link]([Link])
)
}
}
@Composable
fun DrawableImage(@DrawableRes resId: Int) {
val image = loadImageResource(resId)
[Link]"?.let {
Image(
asset = it,
modifier = [Link]([Link])
)
}
}
Modifiers
Text(
text = "Hello",
modifier = [Link]([Link])
)
Text(
text = "Hello",
modifier = [Link]([Link])
.background(color = [Link])
)
Text(
text = "Hello",
modifier = [Link]([Link])
.background(color = [Link])
)
Text(
text = "Hello",
modifier = [Link]([Link]) Hello
.background(color = [Link])
)
Text(
text = "Hello",
modifier = [Link](color = [Link])
.padding([Link])
)
Text(
text = "Hello",
modifier = [Link](color = [Link])
.padding([Link])
)
Text(
text = "Hello",
modifier = [Link](color = [Link]) Hello
.padding([Link])
)

The order of a Modifier has an impact on the behavior

Alert Dialog
Jetpack Compose
/ jet·pak kuhm·powz /
noun

Jetpack Compose is a declarative & modern toolkit for building native

Android UI. It simplifies and accelerates UI development on Android.
How vs What
How What
 How What
// Classic Android
val alertDialog = [Link](context)
.setTitle("Android Summit!”)
.setMessage("Isn't this conference amazing?")

// Somewhere else in code

if (some_condition_is_met()) {
[Link]()
}

// Somewhere else in code

if (some_other_condition_is_met()) {
[Link]()
}
 How What
// Classic Android
val alertDialog = [Link](context)
.setTitle("Android Summit!”)
.setMessage("Isn't this conference amazing?")

@Composable
// Somewhere else in code fun AlertDialogComponent() {
if (some_condition_is_met()) {
[Link]()
} }

// Somewhere else in code

if (some_other_condition_is_met()) {
[Link]()
}
 How What
// Classic Android
val alertDialog = [Link](context)
.setTitle("Android Summit!”)
.setMessage("Isn't this conference amazing?") @Composable
fun AlertDialogComponent() {
// Somewhere else in code if (some_condition_is_met()) {
if (some_condition_is_met()) {
[Link]() }
}
}
// Somewhere else in code
if (some_other_condition_is_met()) {
[Link]()
}
 How What
@Composable
// Classic Android
val alertDialog = [Link](context) fun AlertDialogComponent() {
.setTitle("Android Summit!”) if (some_condition_is_met()) {
.setMessage("Isn't this conference amazing?") AlertDialog(
title = {
// Somewhere else in code Text("Android Summit!")
if (some_condition_is_met()) { },
[Link]() text = {
}
Text(text = "Isn't this amazing?")
// Somewhere else in code }
if (some_other_condition_is_met()) { )
[Link]() }
}
}
State
@Composable
fun AlertDialogComponent() {
var showPopup by remember { mutableStateOf(false) }
}
@Composable
fun AlertDialogComponent() {
var showPopup by remember { mutableStateOf(false) }

Button(onClick = { showPopup = true }) {

Text(text = "Click Me")
}
}
@Composable
fun AlertDialogComponent() {
var showPopup by remember { mutableStateOf(false) }

Button(onClick = { showPopup = true }) {

Text(text = "Click Me")
}

if (showPopup) {
AlertDialog(
onCloseRequest = { showPopup = false },
text = {
Text("Congratulations! You just clicked the text successfully")
},
confirmButton = {
Button(
onClick = onPopupDismissed
) {
Text(text = "Ok")
}
}
)
}
}
@Composable
fun AlertDialogComponent() {
var showPopup by remember { mutableStateOf(false) }

Button(onClick = { showPopup = true }) {

Text(text = "Click Me")
}

if (showPopup) {
AlertDialog(
onCloseRequest = { showPopup = false },
text = {
Text("Congratulations! You just clicked the text successfully")
},
confirmButton = {
Button(
onClick = onPopupDismissed
) {
Text(text = "Ok")
}
}
)
}
}
@Composable
fun AlertDialogComponent() {
var showPopup by remember { mutableStateOf(false) }

if (!showPopup) {
Button(onClick = { showPopup = true }) {
Text(text = "Click Me")
}
} else {
AlertDialog(
onCloseRequest = { showPopup = false },
text = {
Text("Congratulations! You just clicked the text successfully")
},
confirmButton = {
Button(
onClick = onPopupDismissed
) {
Text(text = "Ok")
}
}
)
}
}
Recomposition
Recompose
/ re·kuhm·powz /
verb

In an imperative UI model, to change a widget, you call a setter on the

widget to change its internal state. In Compose, you call the composable
function again with new data. Doing so causes the function to
be recomposed--the widgets emitted by the function are redrawn, if
necessary, with new data. The Compose framework can intelligently
recompose only the components that changed.
 (user: User)

(name: String) (age: Int) (user: User)

[counter: Int] (user: User)

(address: String)
(imageURL: String)
[scale: Float]
 (user: User)

(name: String) (age: Int) (user: User)

[counter: Int] (user: User)

(address: String)
(imageURL: String)
[scale: Float]
 (user: User)

(name: String) (age: Int) (user: User)

[counter: Int] (user: User)

(address: String)
(imageURL: String)
[scale: Float]
 (user: User)

(name: String) (age: Int) (user: User)

[counter: Int] (user: User)

(address: String)
(imageURL: String)
[scale: Float]
 (user: User)

(name: String) (age: Int) (user: User)

[counter: Int] (user: User)

(address: String)
(imageURL: String)
[scale: Float]
 (user: User)

(name: String) (age: Int) (user: User)

[counter: Int] (user: User)

(address: String)
(imageURL: String)
[scale: Float]
 Rules of
Recomposition
 Rules of
Recomposition

Some composable functions could be skipped

Composable functions can be called frequently
Composable functions can execute in any order
Composable functions can run in parallel
@Composable
fun ParentComposable() {
"// Don’t write logic that always depends
"// on the execution of all the composable
Child1Composable()
Child2Composable()
Child3Composable()
}
 Rules of
Recomposition

Some composable functions could be skipped

Composable functions can be called frequently
Composable functions can execute in any order
Composable functions can run in parallel
 Rules of
Recomposition

Some composable functions could be skipped

Composable functions can be called frequently
Composable functions can execute in any order
Composable functions can run in parallel
"// When this component is called from inside an animation,
"// it will be called on every frame.
@Composable
fun ComponentCalledFromAnimation() {
"// expensiveOperation takes 2 seconds to run
val result = expensiveOperation()

Text([Link])
}
"// When this component is called from inside an animation,
"// it will be called on every frame.
@Composable
fun ComponentCalledFromAnimation() {
launchInComposition
"// expensiveOperation takes 2 seconds to run
val result = expensiveOperation()

Text([Link])
}
 Rules of
Recomposition

Some composable functions could be skipped

Composable functions can be called frequently
Composable functions can execute in any order
Composable functions can run in parallel
@Composable
fun ParentComposable() {
"// Can be called in any order
Child1Composable()
Child2Composable()
Child3Composable()
}
 Rules of
Recomposition

Composable functions could be skipped

Composable functions can be called frequently
Composable functions can execute in any order
Composable functions can run in parallel
Simple Layouts
Row
Row

1 2
Row

1
2

Column
@Composable
fun ImageWithTitleSubtitleComponent() {

}
@Composable
fun ImageWithTitleSubtitleComponent() {
Row() {
Column() {

}
}
}
@Composable
fun ImageWithTitleSubtitleComponent() {
Row(modifier = [Link]().padding([Link])) {
Column(modifier = [Link](start = [Link])) {

}
}
}
@Composable
fun ImageWithTitleSubtitleComponent() {
Row(modifier = [Link]().padding([Link])) {
DrawableImage([Link])
Column(modifier = [Link](start = [Link])) {
CustomTextComponent(displayText = "Title")
CustomTextComponent(displayText = "Subtitle")
}
}
}
@Composable
fun ImageWithTitleSubtitleComponent(
title: String,
subtitle: String,
imageUrl: String
) {
Row(modifier = [Link]().padding([Link])) {
NetworkImage(imageUrl)
Column(modifier = [Link](start = [Link])) {
CustomTextComponent(displayText = title)
CustomTextComponent(displayText = subtitle)
}
}
}
@Composable
fun ImageWithTitleSubtitleComponent(
title: String,
subtitle: String,
imageUrl: String
) {
Row(modifier = [Link]().padding([Link])) {
NetworkImage(imageUrl)
Column(modifier = [Link](start = [Link])) {
CustomTextComponent(displayText = title)
CustomTextComponent(displayText = subtitle)
}
}
}
Display List
@Composable
fun ListComponent(superheroList: List<Person>) {

}
@Composable
fun ListComponent(superheroList: List<Person>) {
ScrollableColumn {
for(person in superheroList) {
SimpleRowComponent(
[Link],
[Link],
[Link]
)
}
}
}
[Link]
@Composable
fun ListComponent(superheroList: List<Person>) {

}
@Composable
fun ListComponent(superheroList: List<Person>) {
LazyColumnFor(items = superheroList) { person "->

}
}
@Composable
fun ListComponent(superheroList: List<Person>) {
LazyColumnFor(items = superheroList) { person "->
SimpleRowComponent(
[Link],
[Link],
[Link]
)
}
}
@Composable
fun ListComponent(superheroList: List<Person>) {
LazyColumnFor(items = superheroList) { person "->
SimpleRowComponent(
[Link],
[Link],
[Link]
)
}
}
Thank You Droid God,
For this new day. I will rest in your promises(coroutines) of a world free of
fragments. Guide me with compile-time checks and help me in every
@SuppressWarnings that I add.
Click Gesture
@Composable
fun SimpleRowComponent(
titleText: String,
subtitleText: String,
imageUrl: String
) {
Card(
modifier = [Link]()
.padding([Link]),
shape = RoundedCornerShape([Link])
) {
""...
""...
""...
}
}
@Composable
fun SimpleRowComponent(
titleText: String,
subtitleText: String,
imageUrl: String,
viewModel: SuperheroViewModel
) {
Card(
modifier = [Link]()
.padding([Link])
.cl
shape = RoundedCornerShape([Link])
) {
....
....
}
}
@Composable
fun SimpleRowComponent(
titleText: String,
subtitleText: String,
imageUrl: String,
viewModel: SuperheroViewModel
) {
Card(
modifier = [Link]()
.padding([Link])
.cl
shape =clip
RoundedCornerShape([Link])
) {
.... clickable
.... clipToBounds
}
}
@Composable
fun SimpleRowComponent(
titleText: String,
subtitleText: String,
imageUrl: String,
viewModel: SuperheroViewModel
) {
Card(
modifier = [Link]()
.padding([Link]) +
.clickable {
[Link]()
},
shape = RoundedCornerShape([Link])
) {
....
....
}
}
@Composable
fun SimpleRowComponent(
titleText: String,
subtitleText: String,
imageUrl: String,
viewModel: SuperheroViewModel
) {

👎
Card(
modifier = [Link]()
.padding([Link]) +
.clickable {
[Link]()
},
shape = RoundedCornerShape([Link])
) {
....
....
}
}
@Composable
fun SimpleRowComponent(
titleText: String,
subtitleText: String,
imageUrl: String,
onClick: () "-> Unit
) {
Card(
modifier = [Link]()
.padding([Link])
.clickable {
onClick()
},
shape = RoundedCornerShape([Link])
) {
....
....
}
}
@Composable
fun SimpleRowComponent(
titleText: String,
subtitleText: String,
imageUrl: String,
onClick: () "-> Unit
) {
Card(
modifier = [Link]()
.padding([Link])
.clickable {
onClick()
},
shape = RoundedCornerShape([Link])
) {
....
....
}
}
Pinch-to-Zoom & Drag
@Composable
fun ZoomableImageComponent(imageUrl: String) {

}
@Composable
fun ZoomableImageComponent(imageUrl: String) {
var scale by state { 1f }
var panOffset by state { Offset(0f, 0f) }
}
@Composable
fun ZoomableImageComponent(imageUrl: String) {
var scale by state { 1f }
var panOffset by state { Offset(0f, 0f) }

Box(gravity = [Link]) {
NetworkImage(
imageUrl = imageUrl,
modifier = [Link]()
)
}
}
@Composable
fun ZoomableImageComponent(imageUrl: String) {
var scale by state { 1f }
var panOffset by state { Offset(0f, 0f) }

Box(
gravity = [Link],
modifier = [Link](onZoomDelta = { scale *= it })
) {
NetworkImage(
imageUrl = imageUrl,
modifier = [Link]().drawLayer(
scaleX = scale,
scaleY = scale
)
)
}
}
@Composable
fun ZoomableImageComponent(imageUrl: String) {
var scale by state { 1f }
var panOffset by state { Offset(0f, 0f) }

Box(
gravity = [Link],
modifier = [Link](onZoomDelta = { scale *= it }).rawDragGestureFilter(
object : DragObserver {
override fun onDrag(dragDistance: Offset): Offset {
panOffset = [Link](dragDistance)
return [Link](dragDistance)
}
})
) {
NetworkImage(
imageUrl = imageUrl,
modifier = [Link]().drawLayer(
scaleX = scale,
scaleY = scale,
translationX = panOffset.x,
translationY = panOffset.y
)
)
}
}
@Composable
fun ZoomableImageComponent(imageUrl: String) {
var scale by state { 1f }
var panOffset by state { Offset(0f, 0f) }

Box(
gravity = [Link],
modifier = [Link](onZoomDelta = { scale *= it }).rawDragGestureFilter(
object : DragObserver {
override fun onDrag(dragDistance: Offset): Offset {
panOffset = [Link](dragDistance)
return [Link](dragDistance)
}
})
) {
NetworkImage(
imageUrl = imageUrl,
modifier = [Link]().drawLayer(
scaleX = scale,
scaleY = scale,
translationX = panOffset.x,
translationY = panOffset.y
)
)
}
}
Compose in Classic Android
 activity_compose_in_classic_android.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http:"//[Link]/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" "/>

<[Link]
android:id="@+id/compose_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" "/>
"</LinearLayout>
 activity_compose_in_classic_android.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http:"//[Link]/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" "/>

<[Link]
android:id="@+id/compose_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" "/>
"</LinearLayout>
class ComposeInClassicAndroidActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState)
setContentView([Link].activity_compose_in_classic_android)
}
}
class ComposeInClassicAndroidActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState)
setContentView([Link].activity_compose_in_classic_android)
val composeView = findViewById([Link].compose_view)
[Link] {
SimpleRowComponent()
}
}
}
class ComposeInClassicAndroidActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
[Link](savedInstanceState)
setContentView([Link].activity_compose_in_classic_android)
val composeView = findViewById([Link].compose_view)
[Link] {
SimpleRowComponent()
}
}
}
Classic Android in Compose
@Composable
fun ClassAndroidInComposeComponent() {

}
@Composable
fun ClassAndroidInComposeComponent() {
val context = [Link]
val classicTextView = remember { TextView(context) }
}
@Composable
fun ClassAndroidInComposeComponent() {
val context = [Link]
val classicTextView = remember { TextView(context) }

AndroidView(viewBlock = { classicTextView }) { view "->

"// view is inflated here. Do anything if your logic requires it
}
}
ViewModel
@Composable
fun MoviesComponent() {
val viewModel: MoviesViewModel = viewModel()

"// or

val viewModel: MoviesViewModel = viewModel([Link])

}
LiveData
@Composable
fun MoviesComponent() {
val viewModel: MoviesViewModel = viewModel()
}
@Composable
fun MoviesComponent() {
val viewModel: MoviesViewModel = viewModel()
val movieList = [Link]
}
@Composable
fun MoviesComponent() {
val viewModel: MoviesViewModel = viewModel()
val movieList = [Link]()
}
@Composable
fun MoviesComponent() {
‘X’AsState()
val viewModel: MoviesViewModel = viewModel()
val movieList = [Link]()
}
Testing
@Composable
fun SimpleRowComponent(
titleText: String,
subtitleText: String,
imageUrl: String
) {
Card(
modifier = [Link]()
.padding([Link]),
shape = RoundedCornerShape([Link])
) {
""...
""...
}
}
@RunWith(JUnit4"::class)
class SimpleRowComponentTest {

}
@RunWith(JUnit4"::class)
class SimpleRowComponentTest {
@get:Rule
val composeTestRule = createComposeRule(disableTransitions = true)
}
@RunWith(JUnit4"::class)
class SimpleRowComponentTest {
@get:Rule
val composeTestRule = createComposeRule(disableTransitions = true)

@Before
fun setUp() {
[Link] {
SimpleRowComponent(
titleText = "Title",
subtitleText = "Subtitle",
imageUrl = "https:"//[Link]/[Link]"
)
}
}
}
@RunWith(JUnit4"::class)
class SimpleRowComponentTest {
@get:Rule
val composeTestRule = createComposeRule(disableTransitions = true)

@Before
fun setUp() {
[Link] {
SimpleRowComponent(
titleText = "Title",
subtitleText = "Subtitle",
imageUrl = "https:"//[Link]/[Link]"
)
}
}

@Test
fun check_if_card_is_displayed() {
[Link]("Title")
}
}
@Test
fun check_if_card_is_displayed() {
[Link]("Title")
}
@Test
fun check_if_card_is_displayed() {
[Link]("Ti")
}
@Test
fun check_if_card_is_displayed() {
[Link]("TitleTag")
}
@Test
fun check_if_card_is_displayed() {
[Link]("TitleTag")
}

"// In the component

@Composable
fun SimpleRowComponent(""...) {
Card(
modifier = [Link]("TitleTag")
) {
""...
}
}
@Test
fun check_if_card_is_displayed() {
[Link]("Title")
}
@Test
fun check_if_card_is_displayed() {
[Link]("Title").assertIsDisplayed()
}
@Test
fun check_if_card_is_displayed() {
[Link]("Title").assertIsHidden()
}
@Test
fun check_if_card_is_displayed() {
[Link]("Title").assertHasClickAction()
}
@Test
fun check_if_card_is_displayed() {
[Link]("Title").assertHeightIsAtLeast([Link])
}
@Test
fun check_if_card_is_displayed() {
[Link]("Title").performClick()
}
@Test
fun check_if_card_is_displayed() {
[Link]("Title").performGesture { swipeDown() }
}
@Test
fun check_if_card_is_displayed() {
[Link]("Title").assertIsDisplayed()
}
Resources
Christmas came early"!!
https:"//[Link]/ComposeByExample
https:"//[Link]/
https:"//[Link]/FAQ
 @vinaygaba
https:"//[Link]/Quick-Bites
https:"//[Link]/airbnb/Showkase
Learn Jetpack Compose
by Example
Vinay Gaba
[Link]
@vinaygaba