In this tutorial on Kotlin Jetpack, we will learn why Jetpack compose, What is Kotlin Jetpack compose, and How does compose works?. We will also learn about Composable function, Layouts, and material design. At last, we will have a look at the List and animations. What is Kotlin Jetpack compose? Why Jetpack compose? How does the compose work? Composable function Layouts Material design List and animations

2. What’s in it for you ?
What is Kotlin Jetpack Compose?
Why Jetpack compose?
How does Compose work
Composable function
Layouts
Material design
List and animation

3. What is Kotlin Jetpack compose?
The Kotlin Jetpack compose is a modern User interface
development toolkit for building Android UI.
With the help of Jetpack compose, we can make more declarative
UI code with few lines of code.
Before Jetpack Compose, XML layouts were used to make a
native User interface.

4. Why Jetpack compose?
Jetpack
Compose
Accelerates
development
Independent
Intuitive
Powerful
and Feature
loaded

5. How does compose work?
The jetpack compose works on a composite design pattern.
This pattern is used while dealing with hierarchical data like a
parent-child relationship.
In compose, every view can contain one or more child views within
it, and the child views can further have
sub-child views.

6. Composable function
A composable function is just like any other normal function of Kotlin but
the only difference is it is annotated by the @Composable sign.
It helps in transforming the data to User interface hierarchy.
All the functions with the @Compsoable sign indicate that this function
is the compose function.

7. Composable function
@Composable
fun Message(name: String) {
Text(text = "Hey $name!")
}
@Preview
@Composable
fun PreviewMessage() {
Message(“Rahul")
}
Composable annotation is used
to make the function composable
function
The element text is also composable which
comes from compose library
The @Preview annotation helps us to see
how our UI is going to look like

8. Layout
Layouts allows us to arrange the components in such a way so that they
don’t overlap each other.
It allows to arrange the components in a proper manner.
Layout is a composable function that allows us to arrange elements in
• Row
• Column
• Box

9. Layout
@Composable
fun Example(){
Row{
Text(text = "Hello ")
Text(text = " there ")
Text(text = “mate")
}
}
@Composable
fun Example(){
Column{
Text(text = "Hello ")
Text(text = " there ")
Text(text = “mate")
}
}
The Column function lets you arrange
elements vertically
The Row function lets you arrange
elements horizontally

10. Box
@Composable
fun Example(){
Box{
Text(text = "Hello", modifier = Modifier.align(Alignment.TopCenter))
Text(text = “Rahul", modifier = Modifier.align(Alignment.BottomCenter))
}
}
In Box layout, the children are stacked over each
other. So we have to align them to put them in
different positions

11. 7
1
2
3
4
5
6
8
9
Alignment.CenterEnd
Alignment.Center
Alignment.BottomStart
Alignment.BottomEnd
Alignment.CenterStart
Alignment.TopCenter
Alignment.TopStart
Alignment.TopEnd
Alignment.BottomCenter
Box

12. Material design
As the name suggests, it helps to improve the appearance using the
Material design styling.
There are three pillars of material design:
• Color
• Typography
• Shape

13. Material design
Shape
Material design allows us to
define shape for small,
medium and large
components as well
Typography
Typography is used to
style or define a type
system
Color
By using values from
wrapped theme, you can
easily color wherever it is
needed
Material design

14. List and animations
The List and animations are one of the most important concepts for
building an app.
Lazy composables are used when we wish to display items of unknown
length.
These components include LazyRow and LazyColumn.

15. List and animations
Here we are adding a single item
Here we are adding a multiple items
LazyColumn {
item {
Text(text = "First element")
}
items(7) { index ->
Text(text = “Element: $index")
}
}
LazyRow makes a horizontal
scrolling list
LazyColumn makes a vertical
scrolling list
Here we are adding a multiple items

16. List and animations
The Animations are very important for smooth and attractive user
experience.
There are various APIs that give you control and help with the animation.
• AnimationVisibility
• Animation
• Crossfade
• rememberInfiniteTransition
• updateTransition