This work is licensed under the Apache 2.0 License
Welcome back
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
This work is licensed under the Apache 2.0 License
Greeting()
@Composable
fun Greeting(name: String) {
Text(text = "Howdy $name!")
}
This work is licensed under the Apache 2.0 License
DefaultPreview()
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
FirstComposeProjectTheme {
Greeting("Android")
}
}
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")
}
}
This work is licensed under the Apache 2.0 License
Other Elements
• Text
• Image
• TextField
• Button
This work is licensed under the Apache 2.0 License
Image
This work is licensed under the Apache 2.0 License
TextField
This work is licensed under the Apache 2.0 License
Button
This work is licensed under the Apache 2.0 License
Modifiers
This work is licensed under the Apache 2.0 License
Text("Hello Compose")
Hello Compose
This work is licensed under the Apache 2.0 License
Text(
"Hello Compose!",
Modifier.background(Color.Magenta)
)
Hello Compose
This work is licensed under the Apache 2.0 License
Text(
"Hello Compose!",
Modifier.background(Color.Magenta)
.size(200.dp, 30.dp)
)
Hello Compose
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
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
This work is licensed under the Apache 2.0 License
Standard layouts
Standard Layouts
This work is licensed under the Apache 2.0 License
This work is licensed under the Apache 2.0 License
Row {
Component1()
Component2()
Component3()
} 1 2 3
Row
This work is licensed under the Apache 2.0 License
1
2
3
Column
Column {
Component1()
Component2()
Component3()
}
This work is licensed under the Apache 2.0 License
2
1
3
Box
Box {
Component1()
Component2()
Component3()
}
This work is licensed under the Apache 2.0 License
Bio
Branch
Name
Task for you all
This work is licensed under the Apache 2.0 License
Bio
Branch
Name
Lazy layouts in
Compose
LazyColumn LazyRow LazyVerticalGrid
LazyColumn
Normal Load
LazyRow
LazyVerticalGrid
LazyVerticalGrid(
columns = GridCells.Fixed(2)
) {
items(itemsList) {
Text("Item is $it", itemModifier)
}
item {
Text("Single item", itemModifier)
}
}
OOPs in Kotlin
What is Class?
A class is a blueprint of an object.
Lets create objects !
Session Break
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.
MutableState Hi,
$name
$name your profile
Copyright to $name
val name : MutableState<String> =
mutableStateOf("GDSC")
This work is licensed under the Apache 2.0 License
THANK YOU
for participating Compose Camp Day 2
Do participate next session as well

session2.pptx

  • 1.
    This work islicensed under the Apache 2.0 License Welcome back
  • 2.
    This work islicensed 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 islicensed under the Apache 2.0 License Greeting() @Composable fun Greeting(name: String) { Text(text = "Howdy $name!") }
  • 4.
    This work islicensed under the Apache 2.0 License DefaultPreview() @Preview(showBackground = true) @Composable fun DefaultPreview() { FirstComposeProjectTheme { Greeting("Android") } }
  • 5.
    This work islicensed 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 islicensed under the Apache 2.0 License Other Elements • Text • Image • TextField • Button
  • 7.
    This work islicensed under the Apache 2.0 License Image
  • 8.
    This work islicensed under the Apache 2.0 License TextField
  • 9.
    This work islicensed under the Apache 2.0 License Button
  • 10.
    This work islicensed under the Apache 2.0 License Modifiers
  • 11.
    This work islicensed under the Apache 2.0 License Text("Hello Compose") Hello Compose
  • 12.
    This work islicensed under the Apache 2.0 License Text( "Hello Compose!", Modifier.background(Color.Magenta) ) Hello Compose
  • 13.
    This work islicensed under the Apache 2.0 License Text( "Hello Compose!", Modifier.background(Color.Magenta) .size(200.dp, 30.dp) ) Hello Compose
  • 14.
    This work islicensed 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 islicensed 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 islicensed under the Apache 2.0 License Standard layouts
  • 17.
    Standard Layouts This workis licensed under the Apache 2.0 License
  • 18.
    This work islicensed under the Apache 2.0 License Row { Component1() Component2() Component3() } 1 2 3 Row
  • 19.
    This work islicensed under the Apache 2.0 License 1 2 3 Column Column { Component1() Component2() Component3() }
  • 20.
    This work islicensed under the Apache 2.0 License 2 1 3 Box Box { Component1() Component2() Component3() }
  • 21.
    This work islicensed under the Apache 2.0 License Bio Branch Name Task for you all
  • 22.
    This work islicensed under the Apache 2.0 License Bio Branch Name
  • 23.
  • 24.
  • 25.
  • 27.
  • 29.
  • 30.
    LazyVerticalGrid( columns = GridCells.Fixed(2) ){ items(itemsList) { Text("Item is $it", itemModifier) } item { Text("Single item", itemModifier) } }
  • 31.
  • 32.
    What is Class? Aclass is a blueprint of an object.
  • 33.
  • 34.
  • 35.
    This work islicensed 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 yourprofile Copyright to $name val name : MutableState<String> = mutableStateOf("GDSC")
  • 37.
    This work islicensed under the Apache 2.0 License THANK YOU for participating Compose Camp Day 2 Do participate next session as well