Speaker session taken by Mr. Adit Lal who is GDE Android and Individual Consultant. It was all about jetpack compose along with some hands-on application.

1. Jetpack Compose
Android development using
Jetpack Compose

2. Individual Consultant
🎯@aditlal
🔗aditlal.dev
India
Adit Lal
GDE Android

3. Jetpack Compose
/ jet ·pak kuhm· powz /
noun
Jetpack Compose is a declarative & modern toolkit for building native
Android UI. It simpli
fi
es and accelerates UI development on Android.

4. Why do we
need
Compose?

5. 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

6. 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

7. 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

8. 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

9. 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

10. Compose Syntax

12. Activity
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
.
.
.
}
}
}

13. Activity
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
.
.
.
}
}
}

14. setContent
public fun ComponentActivity.setContent(
parent: CompositionContext? = null,
content: @Composable ()
-
>
Unit
) {
/
/
some magic code🪄
}
}

15. ● Thinking in Compose
● Layouts
● Managing State
● Side Effects

16. Imperative

17. <ConstraintLayout>
<ImageView />
<TextView />
<TextView />
</ ConstraintLayout>
Imperative

18. View Group
View
Imperative

19. val textView = findViewById(R.id.textView)
Imperative

20. val textView = findViewById(R.id.textView)
textView.text = ...
Imperative

21. Declarative UI
Widgets are stateless
No getters or setters to update state

22. Benefits
Faster development
Build UI with less code

23. Hello Adit
Declarative UI

24. Declarative UI
@Composable
fun Greeting(name: String) {
}

25. Declarative UI
Hello Adit
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}

26. Update state?
Hello Mike
Declarative UI

27. Modifiers

28. Text (
modifier = Modifier
Hello World
. padding ( 10 . dp ) ,
text = "Hello World"
)
Modifiers

29. Text (
modifier = Modifier
Hello World
. background (Color.Green) ,
text = "Hello World"
)
Modifiers

30. Text ( Hello World
modifier = Modifier
. border ( width = 2 . dp , Color. Green ) ,
text = "Hello World"
)
Modifiers

31. ● Order matters
Modifiers

32. Text (
modifier = Modifier
. border ( width = 2 . dp , Color. Red )
Hello World
. background (Color. Green )
. padding ( 12 . dp ) ,
text = "Hello World"
)
Modifiers

33. Text (
modifier = Modifier
Hello World
. padding ( 12 . dp )
. border ( width = 2 . dp , Color. Red )
. background (Color. Green ) ,
text = "Hello World”
)
Modifiers

34. https://developer.android.com/jetpack/compose/modi
fi
ers-list

35. Layouts

36. Column

37. Column {
}
Column

38. Column {
Text ( "Hello
Text ( "Hello
Text ( "Hello
}
World" )
World" )
World" )
Hello World
Hello World
Hello World
Column

39. Column(
verticalArrangement =
)
}
{
X
Y
Column

40. Column(
verticalArrangement = Arrangement. Center
) {
Hello World
Hello World
Hello World
}
Column

41. Column(
Arrangement. SpaceBetween
) {
}
Hello World
Hello World
Hello World
Column

42. Column(
horizontalAlignment =
)
}
{
X
Y
Column

43. Column(
horizontalAlignment
) {
}
= Alignment. End
Hello World
Hello World
Hello World
Column

44. Column(
Alignment.CenterHorizontally
Hello World
)
}
{ Hello World
Hello World
Column

45. Row

46. Row {
Text ( “Hello" )
Text ( "World" )
Text ( “!" )
HelloWorld!
}
Row

47. Row(
horizontalArrangement =
)
}
{
X
Y
Row

48. Row(
Arrangement. SpaceBetween
)
}
{ Hello World !
Row

49. Row(
verticalAlignment =
)
}
{
X
Y
Row

50. Row(
Alignment.CenterVertically
) {
HelloWorld!
}
Row

51. Column Row
Vertical Arrangement Horizontal Arrangement
Horizontal Alignment Vertical Alignment
Row & Column

52. Row & Column

53. Row {
Image(…)
}
Row & Column

54. Row {
Image(…)
Column {
}
}
Row & Column

55. Row {
Image(…)
Column {
Text ( “…” )
Text ( “…” )
}
}
Row & Column

56. Layout modifiers

57. Column (
Modifier. background (Color. Green ) Hello World
) { Hello World
Text ( text = “ Hello World” )
Text ( text = "Hello World" )
}
Layout modifiers

58. Column (
Modifier
. background (Color. Green )
. fillMaxWidth ()
) {
}
Hello World
Hello World
Layout modifiers

59. Column (
Modifier
. background (Color. Green )
. fillMaxSize ()
) {
}
Hello World
Hello World
Layout modifiers

60. Column (
Modifier
. background (Color. Green )
. width ( 200. dp )
Hello World
Hello World
)
}
{ 200dp
Layout modifiers

61. Box

62. Box {
Image(…)
}
Box

63. Box {
Image(…)
Column {
Text(…)
Text(…)
}
}
Box

64. Box {
Image(…)
Column(
Modifier.align(
Alignment.BottomEnd
)
) {
Text(…)
Text(…)
}
}
Box

65. List

66. fun EmployeeListView (items: List<Item>) {
LazyColumn {
}
}
List

67. @Composable
fun EmployeeListView (items: List<Item>) {
LazyColumn {
items (items) { item ->
}
}
}
List

68. @Composable
fun EmployeeListView (items: List<Item>) {
LazyColumn {
items (items) { item ->
ItemRow(item)
}
}
}
List

69. Slot layouts

70. Scaffold (
topBar = {
}
) {
}
Slot layouts

71. Home
Scaffold (
topBar = {
Text ( text = "Home" )
}
) {
}
Slot layouts

72. Home
Scaffold (
topBar = {
Text ( text
}
) {
= "Home" )
Hello World
Text ( text = “Hello World” )
}
Slot layouts

73. ● Column
● Row
● Box
● Scaffold
Layouts

74. Managing State

75. ● Setup state using mutableStateOf
State

76. 0
+ -
State

77. var counter by remember {
mutableStateOf ( 0 ) 0
}
State

78. Column {
Text (
text = counter.toString()
0
)
...
}
State

79. Button (
) { onClick = { counter ++ } 0
Text ( text = "+" )
} + -
State

80. Button (
) { onClick = { counter -- } 0
Text ( text = “-" )
} + -
State

81. Event Composable UI-Redraw
Recomposition

82. var counter by remember {
mutableStateOf ( 0 ) 0
} + -
Recomposition

83. ● Setup state using mutableStateOf
● Setting up search
State

84. Search
State

85. View Model
Event
Search
Search View
State

86. Side Effects

87. What is a side effect?
● Work outside of composable function
● Open new screen when tapping button
● Show no network message

88. ● Launched Effect
● Disposable Effect
What is a side effect?

89. ● Triggers on first composition or key change
Launched Effect

90. @Composable
fun HomeView () {
var counter by remember { mutableStateOf ( 0 ) }
}
LaunchEffect

91. @Composable
fun HomeView () {
var counter by remember { mutableStateOf ( 0 ) }
LaunchedEffect {
while ( true ) {
counter ++
}
}
}
LaunchEffect

92. @Composable
fun HomeView () {
var counter by remember { mutableStateOf ( 0 ) }
LaunchedEffect ( {
while ( true ) {
delay( 2000 )
counter ++
}
}
}
LaunchEffect

93. @Composable
fun HomeView () {
var counter by remember { mutableStateOf ( 0 ) }
LaunchedEffect ( key1 = Unit) {
while ( true ) {
delay( 2000 )
counter ++
}
}
}
LaunchEffect

94. ● Calls onDispose on terminate
DisposableEffect

95. @Composable
fun HomeView () {
DisposableEffect (... ) {
onDispose {
callback.remove()
}
}
}
DisposableEffect

96. Code
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NotesApplicationTheme {
/
/
A surface container using the 'background' color from the theme
Surface(
modif
i
er = Modif
i
er.f
i
llMaxSize(),
color = MaterialTheme.colors.background
) {
Greeting("Android")
}
}
}
}

97. Code
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NotesApplicationTheme {
/
/
A surface container using the 'background' color from the theme
Surface(
modif
i
er = Modif
i
er.f
i
llMaxSize(),
color = MaterialTheme.colors.background
) {
Greeting("Android")
}
}
}
}

98. Code
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NotesApplicationTheme {
/
/
A surface container using the 'background' color from the theme
Surface(
modif
i
er = Modif
i
er.f
i
llMaxSize(),
color = MaterialTheme.colors.background
) {
Greeting("Android")
}
}
}
}

99. Code
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NotesApplicationTheme {
/
/
A surface container using the 'background' color from the theme
Surface(
modif
i
er = Modif
i
er.f
i
llMaxSize(),
color = MaterialTheme.colors.background
) {
Greeting("Android")
}
}
}
}

100. Code
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NotesApplicationTheme {
/
/
A surface container using the 'background' color from the theme
Surface(
modif
i
er = Modif
i
er.f
i
llMaxSize(),
color = MaterialTheme.colors.background
) {
Greeting("Android")
}
}
}
}

101. Composable
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
NotesApplicationTheme {
Greeting("Android")
}
}

102. Demo

103. Check out
https://github.com/aldefy/Andromeda
https://bit.ly/3Nic0JF - Sample catalog app
Andromeda is an open-source Jetpack Compose design system. A
collection of guidelines and components can be used to create
amazing compose app user experiences. Foundations introduce
Andromeda tokens and principles while Components provide the bolts
and nuts that make Andromeda Compose wrapped apps tick.

104. Thats all folks!
https://cal.com/adit/30min
🎯@aditlal
🔗aditlal.dev