Simplify Android Development with Jetpack Compose

Slide 1

Slide 1 text

Simplify Android Development with Jetpack Compose Bhoomi Vaghasiya 📱Android Developer @bhoomivaghasiya @bhoomi_0104

Slide 2

Slide 2 text

What is Jetpack Compose?

Slide 3

Slide 3 text

What is Jetpack Compose? ● Modern UI toolkit for building native UI

Slide 4

Slide 4 text

What is Jetpack Compose? ● Modern UI toolkit for building native UI ● Entirely built in Kotlin

Slide 5

Slide 5 text

What is Jetpack Compose? ● Modern UI toolkit for building native UI ● Entirely built in Kotlin ● Do more with Less Code

Slide 6

Slide 6 text

What is Jetpack Compose? ● Modern UI toolkit for building native UI ● Entirely built in Kotlin ● Do more with Less Code ● Intuitive Kotlin APIs

Slide 7

Slide 7 text

What is Jetpack Compose? ● Modern UI toolkit for building native UI ● Entirely built in Kotlin ● Do more with Less Code ● Intuitive Kotlin APIs ● Accelerate Development

Slide 8

Slide 8 text

What is Jetpack Compose? ● Modern UI toolkit for building native UI ● Entirely built in Kotlin ● Do more with Less Code ● Intuitive Kotlin APIs ● Accelerate Development ● Powerful tool

Slide 9

Slide 9 text

Why Jetpack Compose?

Slide 10

Slide 10 text

Why Jetpack Compose?

Slide 11

Slide 11 text

Why Jetpack Compose? ● Declarative UI

Slide 12

Slide 12 text

Imperative vs Declarative +/ConstraintLayout> val textView = findViewById(R.id.tv) textView.text = ++. Imperative Row{ Image() Column{ Text() Text() } } Declarative

Slide 13

Slide 13 text

Why Jetpack Compose? ● Declarative UI ● Concise and less boilerplate

Slide 14

Slide 14 text

Why Jetpack Compose? ● Declarative UI ● Concise and less boilerplate ● Real-time preview and faster iteration

Slide 15

Slide 15 text

Why Jetpack Compose? ● Declarative UI ● Concise and less boilerplate ● Real-time preview and faster iteration ● Kotlin integration and interoperability

Slide 16

Slide 16 text

Why Jetpack Compose? ● Declarative UI ● Concise and less boilerplate ● Real-time preview and faster iteration ● Kotlin integration and interoperability ● Reusable UI components

Slide 17

Slide 17 text

View vs Jetpack Compose View Jetpack compose MainActivity.kt activity_main.xml MainActivity.kt Composable Screen 1 Composable Screen N

Slide 18

Slide 18 text

View vs Jetpack Compose // MainActivity.kt class MainActivity: Activity() { override fun onCreate(++.) { setContentView(R.layout.activity_main) } } // activity_main.xml +/LinearLayout> View // MainActivity.kt class MainActivity: Activity() { override fun onCreate(++.) { setContent{ Greeting() } } } @Composable fun Greeting(){ Text(“Hello World”) } Jetpack Compose

Slide 19

Slide 19 text

Who is using Jetpack Compose? Reference: developer.android.com/jetpack/compose/adopt

Slide 20

Slide 20 text

Jetpack Compose in Android Studio

Slide 21

Slide 21 text

Setting Up Project

Slide 22

Slide 22 text

Start composing…

Slide 23

Slide 23 text

Basics of Jetpack Compose

Slide 24

Slide 24 text

Composable Function ● A function that is used to create a UI element in Jetpack Compose. ● Declarative (describe “what” the UI should look like)

Slide 25

Slide 25 text

Text @Composable fun Demo(name: String){ Text(text = "Hello $name!") } // Demo(name = “Surat”) Hello Surat!

Slide 26

Slide 26 text

Button @Composable fun Demo() { Button(onClick = { ** Do Something */ }) { Text("Click Me") } }

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Without Layouts @Composable fun Demo() { Text("A") Text("B") Text("C") } A B C

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Row @Composable fun Demo() { Row{ Text("A") Text("B") Text("C") } } A BC

Slide 31

Slide 31 text

Box @Composable fun Demo() { Box(Modifier.size(28.dp)) { Text("A", modifier = Modifier.align(Alignment.TopStart)) Text("B", modifier = Modifier.align(Alignment.Center)) Text("C", modifier = Modifier.align(Alignment.BottomEnd)) } } A B C

Slide 32

Slide 32 text

Layouts

Slide 33

Slide 33 text

More Composable Functions ● LazyColumn ● LazyRow ● ConstraintLayout ● Spacer ● ... and much more

Slide 34

Slide 34 text

Modiﬁer ● Change the appearance and behavior of composables. ● Example: setting background color, adding padding, making elements clickable, and more.

Slide 35

Slide 35 text

Modiﬁer @Composable fun Demo() { Box(Modifier.background(Color.Yellow)) { Text( text = "Hello", modifier = Modifier .padding(8.dp) .background(Color.Red) ) } } Hello

Slide 36

Slide 36 text

State ● State in Jetpack Compose refers to the data that can change and affect the UI of your app. ● State is any value that can change over time. ● Update UI by calling same composable with new arguments.

Slide 37

Slide 37 text

Recomposition🔁 ● Any time a state is updated a recomposition takes place. ● Whenever state changes, whoever is consuming state is recomposed. ● Triggered By Events : Changes to state variables, user input, or other events trigger recomposition, ● Only rebuild the parts of the UI that are affected by the changes. instead of calling whole function. Event Composable UI-Redraw

Slide 38

Slide 38 text

Recomposition🔁

Slide 39

Slide 39 text

Recomposition @Composable fun Demo() { Column { val count = remember { mutableStateOf(0) } Button(onClick = { count.value++ }) { Text(text = ”Click me”) } Text(text = "Button Clicks: ${count.value}") } } Button Clicks: 0

Slide 40

Slide 40 text

Remember val someClass Composition 1 Recomposition 2 Recomposition 3 SomeClass@111 SomeClass@222 SomeClass@333 Without remember {} @Composable fun Detail(name: String) { val someClass = SomeClass() Text(name) } @Composable fun Detail(name: String) { val someClass = remember { SomeClass() } Text(name) } With remember {} val someClass Composition 1 Recomposition 2 Recomposition 3 SomeClass@111 SomeClass@111 SomeClass@111

Slide 41

Slide 41 text

Let’s see Jetpack Compose In action 󰟲

Slide 42

Slide 42 text

Other beneﬁts ● Easy and powerful animations 🪄 ● Theming ● Easy UI testing 🧪

Slide 43

Slide 43 text

That’s all!👏

Slide 44

Slide 44 text

Resources to learn Jetpack Compose ● developer.android.com/jetpack/compose ● github.com/android/compose-samples ● github.com/android/nowinandroid ● medium.com/androiddevelopers ● youtube.com/c/AndroidDevelopers/videos Ofﬁcial Resources ● composables.com ● github.com/Gurupreet/ComposeCookBook ● youtube.com/@CheezyCode ● jetpackcompose.app Unofﬁcial Resources

Slide 45

Slide 45 text

Thank you! Happy Composing🚀 Bhoomi Vaghasiya 📱Android Developer @bhoomivaghasiya @bhoomi_0104