Compose Camp Day 3

1. # DAY 3
Compose
Camp
Jetpack
Compose

2. First
Lets
take
a Recap
of
Day 2

3. Kotlin is an expressive, statically
typed language for development
on Android. Introduced in 2010
by JetBrains - the team behind
IntelliJ - it is a free, open-
source, and has been used by
over 5.8 million developers
around the world.
Definition
What is
Kotlin?
Shorter and Simpler
Coding
Compatibility with Java
It Comes With a
Smarter and Safer
Compiler
Benefits of Kotlin

4. We learnt Kotlin
in Day 2

5. Today, Lets learn
Jetpack Compose

6. Jetpack Compose is Android's
modern toolkit for building native UI.
It simplifies and accelerates UI
development on Android. Quickly
bring your app to life with less code,
powerful tools, and intuitive Kotlin
APIs .

10. Features of Jetpack Compose
Fully Compatible with
Java
1
2
3
Fully built using Kotlin
Faster and easier Ul
development
Less code for UI
4
5
6
Compatible with Android
View
Powerful
Intuitive

11. Why should we choose
Jetpack Compose

12. View system
• You design UI in XML layout files
• Bind XML layout in Activity class
• Tight - coupling
• Maintenance overhead
MainActivity
.kt
activity_main
.xml

13. Jetpack Compose!
• Single language
• UI and operations in same place
• Loosely coupling
• Scope for reusable UI components
• Declarative UI
Screen A Screen B
MAIN ACTIVITY

14. Let's Compose...

15. android {
buildFeatures {
compose true
}
complaseOptions {
kotlinCompilerExtensionVersion compose_version
}
}
dependencies {
implementation " androidx.compose.ui : ui : $ compose_version "
implementation " androidx.compose.material : material : $ compose_version "
implementation " androidx.compose.ui : ui - tooling - preview : $ compose_version "
implementation ' androidx.activity : activity - compose : 1.3.1 '
debug Implementation " androidx.compose.ui : ui - tooling : $ compose_version "
}
Add Dependency

16. class MainActivity : Component Activity ( ) {
override fun onCreate ( savedInstanceState : Bundle ? ) {
super.onCreate ( savedInstanceState )
setContent {
// Start composing ...
}
}
}
Composing
• Composable functions should be annotated with @Composable
@Composable
fun MyComposable ( ) {
}

17. Let's learn some
composables

18. @Composable
fun Greeting ( name : String ) {
Text ( text = " Hello $ name ! " )
}
Text Hello GDSC-MET

19. @Composable
fun Compose Demo ( ) {
Button ( onClick = { /*Do Something */ } ) {
Text ( " Click Me " )
}
}
Button
Click me!

20. Image
@Composable
fun ComposeDemo ( ) {
Image (
painter=painterResource
(R.drawable.android_logo ) ,
contentDescription = " Android logo "
)
}

21. Basic Layouts...

22. Without Layout
@Composable
fun Layout Demo ( ) {
Text ( " A " )
Text ( " B " )
Text ( " C " )
}
A
B
C
OVERLAPING
EACHOTHER
(A,B,C)

23. Column
@Composable
fun Layout Demo ( ) {
Column{
Text ( " A " )
Text ( " B " )
Text ( " C " )
}
}
C
B
A

24. Row
@Composable
fun Layout Demo ( ) {
Row{
Text ( " A " )
Text ( " B " )
Text ( " C " )
}
}
C
B
A

25. Now,
Let's see What
MODIFIERS
are...

26. Modifiers
@Composable
fun Layout Demo ( ) {
Box (
Modifier.background ( Color . Green )
) {
Text (
text = " Hello " ,
modifier = Modifier
.padding ( 8.dp )
.background ( Color . Blue )
)
}
}
Decorate or add the behaviour to Compose Ul
elements.Example:background,padding,etc.
Eg :
Hello

27. STATE
an important concept of
Jetpack Compoe

28. •Compose is declarative and as such the only way
to update it is by calling the same composable
with new arguments.
•These arguments are representations of the Ul
state.Any time a state is updated a recomposition
takes place.
State

29. • Composable functions can store a single object in memory by using the
remember composable .
• A value computed by remember is stored in the Composition during initial
composition, and the stored value is returned during recomposition.remember
can be used to store both mutable and immutable objects .
State Of Compose
• mutableStateOf creates an observable MutableState < T > , which is
an observable type integrated with the compose runtime .
interface MutableState < T > : State < T > {
override var value : T
}
• Any changes to value recomposes Composable function which reads
value .

30. •Recomposition is the process of calling your
composable functions again when inputs change.
•When Compose recomposes based on new
inputs, it only calls the functions or lambdas that
might have changed , and skips the rest .
Recomposition in Compose

31. Column {
var textValue by remember { mutableStateOf ( " " ) }
TextField (
value = textValue ,
onValueChange={newValue →
textValue = newValue
}
)
Text ( " You typed : $ textValue " )
}
Example:

32. Column {
var textValue by remember { mutableStateOf ( " " ) }
TextField (
value = textValue ,
onValueChange={newValue →
textValue = newValue
}
)
Text ( " You typed : $ textValue " )
}
Example:
You typed: Hello Met
Hello Met

33. Now,
Let's move to
Android Studio