Adopting Jetpack Compose in Your Existing Project - GDG DevFest Bangkok 2024

"Adopting Jetpack Compose in your existing project" at GDG DevFest Bangkok 2024

Transcript

1. Adopting Jetpack Compose in Your Existing Project Bangkok Somkiat Khitwongwattana Android GDE
2. Less code Intuitive Accelerate development Powerful Why Jetpack Compose?
3. Less code Intuitive Accelerate development Powerful Why Jetpack Compose?
4. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout> Build an UI with XML
5. class MainActivity : AppCompatActivity() { private val binding: ActivityMainBinding by lazy { ... } override fun onCreate(savedInstanceState: Bundle?) { ... binding.button.setOnClickListener { // Do something } } } View binding
6. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { ... setContent { ComposeAppTheme { Box( modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center, ) { Button(onClick = { // Do something }) { Text(text = "Button") Build an UI with Jetpack Compose
7. setContent { ComposeAppTheme { Box( ... ) { Button(onClick = { // Do something }) { Text(text = "Button") } } } } Build an UI with Jetpack Compose
8. Less code Intuitive Accelerate development Powerful Why Jetpack Compose?
9. <Button android:id="@+id/button3" android:text="Button 3" android:visibility="gone" /> <LinearLayout> <Button android:id="@+id/button1" android:text="Button 1" /> <Button android:id="@+id/button2" android:text="Button 2" /> </LinearLayout> Readability
10. <Button android:id="@+id/button3" android:text="Button 3" android:visibility="gone" /> <LinearLayout> <Button android:id="@+id/button1" android:text="Button 1" /> <Button android:id="@+id/button2" android:text="Button 2" /> </LinearLayout> Readability
11. val button1: Button = /* ... */ val button2: Button = /* ... */ val button3: Button = /* ... */ val isPurchased = false button1.visibility = if (isPurchased) View.GONE else View.VISIBLE button2.visibility = if (isPurchased) View.GONE else View.VISIBLE button3.visibility = if (isPurchased) View.VISIBLE else View.GONE Readability
12. val button1: Button = /* ... */ val button2: Button = /* ... */ val button3: Button = /* ... */ val isPurchased = true button1.visibility = if (isPurchased) View.GONE else View.VISIBLE button2.visibility = if (isPurchased) View.GONE else View.VISIBLE button3.visibility = if (isPurchased) View.VISIBLE else View.GONE Readability
13. val isPurchased: Boolean = ... Box( ... ) { if (isPurchased) { Button( ... ) { Text("Button 3") } } else { Row( ... ) { Button( ... ) { Text("Button 1") } Spacer( ... ) Button( ... ) { Text("Button 2") } } } } Readability
14. Less code Intuitive Accelerate development Powerful Why Jetpack Compose?
15. data class Item( val id: String, val text: String, ) Dynamic list UI
16. <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/textViewItem" android:layout_width="match_parent" android:layout_height="wrap_content" /> </FrameLayout> Dynamic list UI
17. <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout> Dynamic list UI
18. class ItemViewHolder( private val binding: LayoutListItemBinding ) : ViewHolder(binding.root) { fun bind(item: Item) { binding.textViewItem.text = item.text } } Dynamic list UI
19. class ListAdapter(private val items: List<Item>) : RecyclerView.Adapter<ItemViewHolder>() { override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = ItemViewHolder( LayoutListItemBinding.inflate(LayoutInflater.from(parent.context), parent, false) ) override fun getItemCount(): Int = items.size override fun onBindViewHolder(holder: ItemViewHolder, position: Int) { items.getOrNull(position)?.let { holder.bind(it.text) } } } Dynamic list UI
20. val items: List<Item> = /* ... */ val context: Context = /* ... */ with(binding.recyclerView) { layoutManager = LinearLayoutManager( context, LinearLayoutManager.VERTICAL, false, ) adapter = ListAdapter(items) } Dynamic list UI
21. @Composable fun ListContent(items: List<Item>) { LazyColumn(modifier = Modifier.fillMaxSize()) { items( items = items, key = { item -> item.id } ) { item -> Text( modifier = Modifier.fillMaxWidth(), text = item.text, ) } } Dynamic list UI
22. Less code Intuitive Accelerate development Powerful Why Jetpack Compose?
23. var activated by remember { mutableStateOf(true) } val contentColor by animateColorAsState( ... ) val containerColor by animateColorAsState( ... ) val scale by animateFloatAsState( ... ) Button( modifier = Modifier.scale(scale), colors = ButtonDefaults.buttonColors( containerColor = containerColor, contentColor = contentColor, ), onClick = { activated = !activated }, ) { Text(if (activated) "Activated" else "Inactivated") } Animation
24. Jetpack Compose 1.7.5 is now available
25. Declarative programming paradigm Declarative paradigm shift Dynamic content Recomposition Thinking in Compose
26. Declarative paradigm shift • Relatively stateless and don't expose setter or getter functions • Update the UI by passing the different arguments • Unidirectional data flow
27. State flows down
28. Event flows up
29. @Composable fun ProfileContent(name: String, status: String, onEditProfile: () -> Unit) { Row { Box{ Image( ... ) IconButton(onClick = onEditProfile) { ... } } Column { Text(name) Text(status) } } } State flows down and event flows up
30. @Composable fun ProfileContent(name: String, status: String, onEditProfile: () -> Unit) { Row { Box{ Image( ... ) IconButton(onClick = onEditProfile) { ... } } Column { Text(name) Text(status) } } } State flows down and event flows up
31. @Composable fun ProfileContent(name: String, status: String, onEditProfile: () -> Unit) { Row { Box{ Image( ... ) IconButton(onClick = onEditProfile) { ... } } Column { Text(name) Text(status) } } } State flows down and event flows up
32. @Composable fun ProfileContent(name: String, status: String, onEditProfile: () -> Unit) { Row { Box{ Image( ... ) IconButton(onClick = onEditProfile) { ... } } Column { Text(name) Text(status) } } } State flows down and event flows up
33. @Composable fun TopThreeItems(items: List<String>) { Column { HeaderContent() items.take(3).forEach { item -> ItemContent(item) } } } Dynamic content
34. @Composable fun TopThreeItems(items: List<String>) { Column { HeaderContent() items.take(3).forEach { item -> ItemContent(item) } } } Recomposition New value update
35. @Composable fun TopThreeItems(items: List<String>) { Column { HeaderContent() items.take(3).forEach { item -> ItemContent(item) } } } Recomposition Skip
36. @Composable fun TopThreeItems(items: List<String>) { Column { HeaderContent() items.take(3).forEach { item -> ItemContent(item) } } } Recomposition Recomposition
37. Get started Jetpack Compose for Android Developers https://developer.android.com/courses/jetpack-compose/course
38. Get started
39. Get started https://github.com/android/nowinandroid
40. Get started https://github.com/chrisbanes/tivi
41. Why should you adopt Jetpack Compose?
42. Chance for the big improvement Animate with a few lines of code Powerful preview in Android Studio Testable without view ID Friendly for sub-component creation Benefit for teams
43. Powerful preview in Android Studio
44. @Composable fun MainScreen( ... ) { Column( ... ) { Profile( modifier = Modifier.testTag("profile"), ... ) ... } } Testable without view ID
45. <node index="0" text="" resource-id="" class="android.view.View" package="com.akexorcist.devfest" content-desc="" checkable="false" checked="false" clickable="false" enabled="true" focusable="false" focused="false" scrollable="false" long-clickable="false" password="false" selected="false" bounds="[0,66][79,132]"> <node index="0" text="Android" resource-id="" class="android.widget.TextView" package="com.akexorcist.devfest" content-desc="" checkable="false" checked="false" clickable="false" enabled="true" focusable="false" focused="false" scrollable="false" long-clickable="false" password="false" selected="false" bounds="[0,66][79,132]" /> </node> Testable without view ID
46. <node index="0" text="" resource-id="" class="android.view.View" package="com.akexorcist.devfest" content-desc="" checkable="false" checked="false" clickable="false" enabled="true" focusable="false" focused="false" scrollable="false" long-clickable="false" password="false" selected="false" bounds="[0,66][79,132]"> <node index="0" text="Android" resource-id="" class="android.widget.TextView" package="com.akexorcist.devfest" content-desc="" checkable="false" checked="false" clickable="false" enabled="true" focusable="false" focused="false" scrollable="false" long-clickable="false" password="false" selected="false" bounds="[0,66][79,132]" /> </node> Testable without view ID
47. <node index="0" text="" resource-id="" class="android.view.View" package="com.akexorcist.devfest" content-desc="" checkable="false" checked="false" clickable="false" enabled="true" focusable="false" focused="false" scrollable="false" long-clickable="false" password="false" selected="false" bounds="[0,66][79,132]"> <node index="0" text="Android" resource-id="" class="android.widget.TextView" package="com.akexorcist.devfest" content-desc="" checkable="false" checked="false" clickable="false" enabled="true" focusable="false" focused="false" scrollable="false" long-clickable="false" password="false" selected="false" bounds="[0,66][79,132]" /> </node> Testable without view ID
48. Friendly for sub-component creation
49. Fragment Friendly for sub-component creation Fragment Fragment Fragment ViewModel ViewModel ViewModel ViewModel ViewModel
50. View Friendly for sub-component creation View View View ViewModel
51. Compose Friendly for sub-component creation Compose Compose Compose ViewModel ViewModel ViewModel ViewModel ViewModel
52. @Composable fun FirstSection(viewModel: FirstViewModel = koinViewModel()) { ... } @Composable fun SecondSection(viewModel: SecondViewModel = koinViewModel()) { ... } @Composable fun ThirdSection(viewModel: ThirdViewModel = koinViewModel()) { ... } @Composable fun FourthSection(viewModel: FourthViewModel = koinViewModel()) { ... } Friendly for sub-component creation
53. @Composable fun MainScreen(viewModel: MainViewModel = koinViewModel()) { Column { FirstSection() SecondSection() ThirdSection() FourthSection() } } Friendly for sub-component creation
54. @Composable fun MainScreen(viewModel: MainViewModel = koinViewModel()) { LazyColumn { item(key = "first") { FirstSection() } item(key = "second") { SecondSection() } item(key = "third") { ThirdSection() } item(key = "fourth") { FourthSection() } } } Friendly for sub-component creation
55. Activity Result Requesting Runtime Permissions ViewModel Data Streams Asynchronous Operations Availability
56. Screen Navigation Dependency Injection Google Maps Navigation Drawer Bottom Sheet Availability
57. Nested Scrolling Material 3 Components Dialog Snackbar Image Loading Availability
58. WindowInsets Handling screen size changed Availability UI Testing
59. Compose preview generation with Gemini
60. Things to know Debug build performance Profile installer for better performance No cost from XML layout inflation Efficiently handle deep UI trees Smart recompositions
61. Sunflower app https://github.com/android/sunflower
62. APK Size Based on information from the Sunflower app Views only 2,252 KB 3,034 KB 2,966 KB Mixed Views and Compose Compose-only
63. Build Time Based on information from the Sunflower app Views only 299.47 ms 399.09 ms 342.16 ms Mixed Views and Compose Compose-only
64. Tivi app https://github.com/chrisbanes/tivi
65. Based on information from the Tivi app v1.0.0-rc01 APK Size Views only 4.14 MB 2.71 MB 2.32 MB Fragment and Compose Compose-only
66. Method Count Based on information from the Tivi app v1.0.0-rc01 Views only 40,029 35,165 23,689 Fragment and Compose Compose-only
67. In the other side Different knowledge Few performance overhead based on complexity Fewer third-party libraries compared to the View Limited legacy support
69. Approach to integrating Jetpack Compose New Features Simple Component or Screen Redesign Features
70. Fragment Layout Layout View Layout View View Compose
71. Activity Activity Activity Activity Activity View View View Compose
72. Activity Fragment Fragment Fragment Fragment View View View Compose
73. Activity Activity Activity Fragment Navigation View Compose Fragment View Compose Compose
74. Activity Activity Activity Fragment Navigation View Compose Fragment View Compose Compose
75. Activity Fragment Fragment Fragment Navigation View Compose Fragment View Compose Compose
76. Activity Fragment Fragment Fragment Navigation View Compose Fragment View Compose Compose
77. Activity Fragment Fragment Fragment Navigation View Compose Fragment View Compose Compose
78. Codebase Navigation Existing UI Component & Design System Analytics Testing Things to think about
79. Compose in Activity Fragment View Compose View in
80. class MainActivity: ComponentActivity() { override fun onCreate( ... ) { ... setContent { // In Compose world } } } Compose in Activity
81. class HomeFragment : Fragment() { override fun onCreateView( ... ): View { return ComposeView(requireContext()).apply { setViewCompositionStrategy( ... ) setContent { // In Compose world } } } } Compose in Fragment
82. Compose in View <?xml version="1.0" encoding="utf-8"?> <FrameLayout> ... <androidx.compose.ui.platform.ComposeView android:id="@+id/composeView" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout>
83. val composeView = findViewById<ComposeView>(R.id.composeView) composeView.apply { setViewCompositionStrategy( ... ) setContent { // In Compose world } } Compose in View
84. @Composable fun AndroidCustomView(title: String, onClick: () -> Unit) { AndroidView( factory = { context -> CustomView(context).apply { setOnClickListener(onClick) } }, update = { view -> view.setTitle(title) } ) View in Compose
85. Codebase preparation for seamless feature development Start with small, incremental changes Learning resources for future adopters Negotiate with the product's decision-maker To make it happen
86. API Maturity Learning resources Libraries & tools Backward compatibility Multiplatform supported Jetpack Compose is now production-ready Performance Wide Adoption
87. "Any code you built with views will become technical debt" Florina Muntenescu
88. Thank you Bangkok