This document outlines the agenda for Day 2 of a Compose Camp. It includes a quick recap, more elements and modifiers in Compose, standard layouts, object-oriented programming in Kotlin, and a question and answer session. Key Compose elements are demonstrated like Text, Image, TextField, and Button. Modifiers like background, size, padding, and clickable are shown. Common layouts like Row, Column, and Box are overviewed. The document also introduces concepts like classes, objects, and mutable state in Kotlin.

1. This work is licensed under the Apache 2.0 License
Welcome back

2. This work is licensed under the Apache 2.0 License
 Quick Recap
 More elements and Modifier.
 Standard layouts
 OOPs in kotlin
 Q&A session
Day 2 Agenda

3. This work is licensed under the Apache 2.0 License
Greeting()
@Composable
fun Greeting(name: String) {
Text(text = "Howdy $name!")
}

4. This work is licensed under the Apache 2.0 License
DefaultPreview()
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
FirstComposeProjectTheme {
Greeting("Android")
}
}

5. This work is licensed under the Apache 2.0 License
Greeting()
@Composable
fun Greeting(name: String) {
Text(text = "Howdy $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
FirstComposeProjectTheme {
Greeting("Meghan")
}
}

6. This work is licensed under the Apache 2.0 License
Other Elements
• Text
• Image
• TextField
• Button

7. This work is licensed under the Apache 2.0 License
Image

8. This work is licensed under the Apache 2.0 License
TextField

9. This work is licensed under the Apache 2.0 License
Button

10. This work is licensed under the Apache 2.0 License
Modifiers

11. This work is licensed under the Apache 2.0 License
Text("Hello Compose")
Hello Compose

12. This work is licensed under the Apache 2.0 License
Text(
"Hello Compose!",
Modifier.background(Color.Magenta)
)
Hello Compose

13. This work is licensed under the Apache 2.0 License
Text(
"Hello Compose!",
Modifier.background(Color.Magenta)
.size(200.dp, 30.dp)
)
Hello Compose

14. This work is licensed under the Apache 2.0 License
Text(
"Hello Compose!",
Modifier.background(Color.Magenta)
.size(200.dp, 30.dp)
.padding(5.dp)
)
Hello Compose

15. This work is licensed under the Apache 2.0 License
Text(
"Hello Compose!",
Modifier.background(Color.Magenta)
.size(200.dp, 30.dp)
.padding(5.dp)
.clickable {
// Called when Text clicked
}
)
Hello Compose

16. This work is licensed under the Apache 2.0 License
Standard layouts

17. Standard Layouts
This work is licensed under the Apache 2.0 License

18. This work is licensed under the Apache 2.0 License
Row {
Component1()
Component2()
Component3()
} 1 2 3
Row

19. This work is licensed under the Apache 2.0 License
1
2
3
Column
Column {
Component1()
Component2()
Component3()
}

20. This work is licensed under the Apache 2.0 License
2
1
3
Box
Box {
Component1()
Component2()
Component3()
}

21. This work is licensed under the Apache 2.0 License
Bio
Branch
Name
Task for you all

22. This work is licensed under the Apache 2.0 License
Bio
Branch
Name

23. Lazy layouts in
Compose

24. LazyColumn LazyRow LazyVerticalGrid

25. LazyColumn
Normal Load

27. LazyRow

29. LazyVerticalGrid

30. LazyVerticalGrid(
columns = GridCells.Fixed(2)
) {
items(itemsList) {
Text("Item is $it", itemModifier)
}
item {
Text("Single item", itemModifier)
}
}

31. OOPs in Kotlin

32. What is Class?
A class is a blueprint of an object.

33. Lets create objects !

34. Session Break

35. This work is licensed under the Apache 2.0 License
Mutable State
The value returned by the mutableStateOf() function:
 Holds state, which is the cost of service.
 Is mutable, so the value can be changed.
 Is observable, so Compose observes any changes to the value and
triggers a recomposition to update the UI.

36. MutableState Hi,
$name
$name your profile
Copyright to $name
val name : MutableState<String> =
mutableStateOf("GDSC")

37. This work is licensed under the Apache 2.0 License
THANK YOU
for participating Compose Camp Day 2
Do participate next session as well