Introduction Jetpack Compose

A simple explanation about the new UI toolkit for Android Development -- Jetpack Compose.

Transcript

1. Introduction to Jetpack Compose Responsive and user-friendly UI designs for Android apps
2. M Taufiq Hidayat Android Developer @ XL Axiata Mentor @Makkode Academy
3. What is Jetpack Compose? The idea behind the framework Jetpack Compose is a new and fully declarative way to design and render Android user interfaces. It relies on composable functions, modifiers and reacting to state changes to display beautiful, material-design-inspired UI using Kotlin!
5. Compose Lifecycle
7. Benefits of using Jetpack Compose Less code Do more with less code and avoid entire classes of bugs. Code is simpler and easier to maintain Intuitive Just describe your UI, and Compose takes care of the rest. As app state changes, your UI automatically updates. Accelerates Development Compatible with all your existing code so you can adopt when and where you want. Iterate fast with live previews and full Android Studio support. Powerful Create beautiful apps with direct access to the Android platform APIs and built-in support for Material Design, Dark theme, animations, and more
8. Layout in compose
9. Column Row Box Constraint Layout
10. Alignment
11. 1. Column 2. Row 3. Box
12. Modifier
13. Modifiers allow you to decorate or augment a composable
14. List of Compose modifiers | Jetpack Compose | Android Developers
15. State
16. Any Value that can change over time
17. @Composable fun CartItem() { var quantity = ... ¯\_(ツ)_/¯ ... ? Row { Button(onClick = { quantity++ }) { Text("+") } Text(quantity.toString()) Button(onClick = { quantity-- }) { Text("-") } } } How to keep track of the quantity?
18. @Composable fun CartItem() { var quantity: Int = 1 Row { Button(onClick = { quantity++ }) { Text("+") } Text(quantity.toString()) Button(onClick = { quantity-- }) { Text("-") } } } State not tracked by Compose
19. @Composable fun CartItem() { var quantity: Int = 1 Row { Button(onClick = { quantity++ }) { Text("+") } Text(quantity.toString()) Button(onClick = { quantity-- }) { Text("-") } } } State not tracked by Compose This state is not tracked by Compose
20. State changes need to be tracked by Compose
21. Compose State APIs • State<T> • MutableState<T> interface State<out T> { val value: T } interface MutableState<T> : State<T> { override var value: T ... } I I
22. @Composable fun CartItem() { val quantity: MutableState<Int> = mutableStateOf(1) Row { Button(onClick = { quantity.value++ }) { Text("+") } Text(quantity.value.toString()) Button(onClick = { quantity.value-- }) { Text("-") } } } State tracked and remembered by Compose
23. Three way to create state
24. @Composable fun CartItem() { val quantity = remember { mutableStateOf(1) } Row { Button(onClick = { quantity.value++ }) { Text("+") } Text(quantity.value.toString()) Button(onClick = { quantity.value-- }) { Text("-") } } } State tracked and remembered by Compose
25. State created in composables needs to be remembered
26. @Composable fun CartItem() { val quantity = remember { mutableStateOf(1) } Row { Button(onClick = { quantity.value++ }) { Text("+") } Text(quantity.value.toString()) Button(onClick = { quantity.value-- }) { Text("-") } } } State tracked and remembered by Compose
27. @Composable fun CartItem() { val quantity = remember { mutableStateOf(1) } Row { Button(onClick = { quantity.value++ }) { Text("+") } Text(quantity.value.toString()) Button(onClick = { quantity.value-- }) { Text("-") } } } State tracked and remembered by Compose
28. @Composable fun CartItem() { var quantity by rememberSaveable { mutableStateOf(1) } Row { Button(onClick = { quantity++ }) { Text("+") } Text(quantity.toString()) Button(onClick = { quantity-- }) { Text("-") } } } Property delegate
29. @Composable fun CartItem() { val quantity = rememberSaveable { mutableStateOf(1) } Row { Button(onClick = { quantity.value++ }) { Text("+") } Text(quantity.value.toString()) Button(onClick = { quantity.value-- }) { Text("-") } } } BONUS — rememberSaveable State survives configuration changes
30. Lazy Layout
31. How about List? 1 2 1. LazyColumn produces a vertical scrolling list of an unknown length 2. LazyRow produces a horizontal scrolling list of an unknown length
32. Say goodbye to Recylerview and Adapter
33. Migration strategy in Existing App
34. Use ComposeView
35. buildFeatures { ... compose true } dependencies { val composeBom = platform("androidx.compose:compose-bom:2022.10.00") implementation composeBom implementation("androidx.compose.material:material") implementation("androidx.compose.foundation:foundation") implementation("androidx.compose.ui:ui") implementation("androidx.compose.ui:ui-tooling-preview") } 1. app/build.gradle
36. 2. Use compose view 3. Set into fragment or activity
37. Use AbstractComposeView
38. Bridge between androidView and Jetpack compose, decouple all the needed Jetpack Compose code into a Class
41. THANK YOU