Simplify Android Development with Jetpack Compose

Transcript

1. Simplify Android Development with Jetpack Compose Bhoomi Vaghasiya 📱Android Developer @bhoomivaghasiya @bhoomi_0104
2. What is Jetpack Compose?
3. What is Jetpack Compose? • Modern UI toolkit for building native UI
4. What is Jetpack Compose? • Modern UI toolkit for building native UI • Entirely built in Kotlin
5. What is Jetpack Compose? • Modern UI toolkit for building native UI • Entirely built in Kotlin • Do more with Less Code
6. What is Jetpack Compose? • Modern UI toolkit for building native UI • Entirely built in Kotlin • Do more with Less Code • Intuitive Kotlin APIs
7. 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
8. 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
9. Why Jetpack Compose?
10. Why Jetpack Compose?
11. Why Jetpack Compose? • Declarative UI
12. Imperative vs Declarative <ConstraintLayout> <ImageView+> <TextView+> <TextView+> +/ConstraintLayout> val textView = findViewById(R.id.tv) textView.text = ++. Imperative Row{ Image() Column{ Text() Text() } } Declarative
13. Why Jetpack Compose? • Declarative UI • Concise and less boilerplate
14. Why Jetpack Compose? • Declarative UI • Concise and less boilerplate • Real-time preview and faster iteration
15. Why Jetpack Compose? • Declarative UI • Concise and less boilerplate • Real-time preview and faster iteration • Kotlin integration and interoperability
16. Why Jetpack Compose? • Declarative UI • Concise and less boilerplate • Real-time preview and faster iteration • Kotlin integration and interoperability • Reusable UI components
17. View vs Jetpack Compose View Jetpack compose MainActivity.kt activity_main.xml MainActivity.kt Composable Screen 1 Composable Screen N
18. View vs Jetpack Compose // MainActivity.kt class MainActivity: Activity() { override fun onCreate(++.) { setContentView(R.layout.activity_main) } } // activity_main.xml <LinearLayout ++.> <TextView ++. android:text="Hello World" +> +/LinearLayout> View // MainActivity.kt class MainActivity: Activity() { override fun onCreate(++.) { setContent{ Greeting() } } } @Composable fun Greeting(){ Text(“Hello World”) } Jetpack Compose
19. Who is using Jetpack Compose? Reference: developer.android.com/jetpack/compose/adopt
20. Jetpack Compose in Android Studio
21. Setting Up Project
22. Start composing…
23. Basics of Jetpack Compose
24. Composable Function • A function that is used to create a UI element in Jetpack Compose. • Declarative (describe “what” the UI should look like)
25. Text @Composable fun Demo(name: String){ Text(text = "Hello $name!") } // Demo(name = “Surat”) Hello Surat!
26. Button @Composable fun Demo() { Button(onClick = { ** Do Something */ }) { Text("Click Me") } }
27. Image @Composable fun Demo() { Image( painter = painterResource(R.drawable.logo), contentDescription = "Android" ) }
28. Without Layouts @Composable fun Demo() { Text("A") Text("B") Text("C") } A B C
29. Column @Composable fun Demo() { Column { Text("A") Text("B") Text("C") } } A B C
30. Row @Composable fun Demo() { Row{ Text("A") Text("B") Text("C") } } A BC
31. 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
32. Layouts
33. More Composable Functions • LazyColumn • LazyRow • ConstraintLayout • Spacer • ... and much more
34. Modifier • Change the appearance and behavior of composables. • Example: setting background color, adding padding, making elements clickable, and more.
35. Modifier @Composable fun Demo() { Box(Modifier.background(Color.Yellow)) { Text( text = "Hello", modifier = Modifier .padding(8.dp) .background(Color.Red) ) } } Hello
36. 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.
37. 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
38. Recomposition🔁
39. 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
40. 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
41. Let’s see Jetpack Compose In action 󰟲
42. Other benefits • Easy and powerful animations 🪄 • Theming • Easy UI testing 🧪
43. That’s all!👏
44. 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 Official Resources • composables.com • github.com/Gurupreet/ComposeCookBook • youtube.com/@CheezyCode • jetpackcompose.app Unofficial Resources
45. Thank you! Happy Composing🚀 Bhoomi Vaghasiya 📱Android Developer @bhoomivaghasiya @bhoomi_0104