The Android community adopts Jetpack Compose more and more each day. But what about our existing apps? Adopting existing apps to Jetpack Compose might be an overwhelming task when the migration is not planned well. In this talk, we will see the Compose migration strategy used in DNB. We will briefly talk about the interoperability APIs and how they are used in this migration process. We will also talk about how we are adopting our internal design system to Jetpack Compose. Finally, we will discuss the challenges we faced during this migration.

1. Migrating a large-scale
banking app to Compose
S. Fatih Giris
@fatih_grs

2. Jetpack Compose

3. How to migrate existing apps to
Compose?

4. Agenda
• Integrating Compose
• Interoperability APIs
• Migration strategies
• Migration at DNB
• Take-aways

5. Integrating Compose
• Entirely Compose
• View based UI + Compose
• Composables inside Views
• Views inside composables

6. Interoperability APIs
• ComponentActivity.setContent
• ComposeView (View)
• AndroidView (Composable)

7. Migration Strategies
• Top-down
• Bottom-up

8. Top-down
• Start with the top most view
• Go deeper and deeper ⬇

9. Top-down
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
fragment_top_down.xml

10. Top-down
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
fragment_top_down.xml
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
fancy_content.xml

11. Top-down
<androidx.compose.ui.platform.ComposeView
android:id="@+id/composeView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
fancy_content.xml
fragment_top_down.xml

12. Top-down
class TopDownFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(
R.layout.fragment_top_down,
container,
false
)
}
}
TopDownFragment.kt

13. Top-down
class TopDownFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return ComposeView(requireContext())
}
}
TopDownFragment.kt

14. Top-down
return ComposeView(requireContext())
TopDownFragment.kt

15. Top-down
return ComposeView(requireContext()).apply {
// Dispose the Composition when viewLifecycleOwner is destroyed
setViewCompositionStrategy(
ViewCompositionStrategy.DisposeOnLifecycleDestroyed(viewLifecycleOwner)
)
setContent {
// Compose World
}
}
TopDownFragment.kt

16. Top-down
return ComposeView(requireContext()).apply {
// Dispose the Composition when viewLifecycleOwner is destroyed
setViewCompositionStrategy(
ViewCompositionStrategy.DisposeOnLifecycleDestroyed(viewLifecycleOwner)
)
setContent {
// Compose World
// Vertical Linear Layout
Column {
// Add views as AndroidView by creating
// programatically or inflating from XML
}
}
}
TopDownFragment.kt

17. Top-down
setContent {
// Vertical Linear Layout
Column {
}
}
TopDownFragment.kt

18. Top-down
setContent {
// Vertical Linear Layout
Column {
AndroidView(
modifier = Modifier.fillMaxSize(),
factory = { context ->
// Inflate it from XML
inflater.inflate(
R.layout.fancy_content,
container,
false
)
},
update = { view ->
// View's been inflated or state read in
// this block has been updated
}
)
}
} TopDownFragment.kt

19. Top-down
setContent {
// Vertical Linear Layout
Column {
AndroidView(
modifier = Modifier.fillMaxSize(),
factory = { context ->
// Create view programatically
// android.widget.Button
Button(requireContext())
},
update = { view ->
// View's been inflated or state read in
// this block has been updated
}
)
}
}
TopDownFragment.kt

20. Top-down
setContent {
// Vertical Linear Layout
Column {
Button(onClick = {}) {
Text("I am a compose button”)
}
}
}
TopDownFragment.kt

21. Bottom-up
• Start with the inner most UI elements
• Go up and up ⬆

22. Bottom-up
fragment_bottom_up.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

23. Bottom-up
fragment_bottom_up.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.compose.ui.platform.ComposeView
android:id="@+id/buttonComposeView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

24. Bottom-up
class BottomUpFragment : Fragment() {
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
buttonComposeView.apply {
// Configure ComposeView
}
}
}
BottomUpFragment.kt

25. Bottom-up
buttonComposeView.apply {
// Configure ComposeView
}
BottomUpFragment.kt

26. Bottom-up
buttonComposeView.apply {
// Dispose the Composition when viewLifecycleOwner is destroyed
setViewCompositionStrategy(
ViewCompositionStrategy.DisposeOnLifecycleDestroyed(viewLifecycleOwner)
)
}
BottomUpFragment.kt

27. Bottom-up
buttonComposeView.apply {
// Dispose the Composition when viewLifecycleOwner is destroyed
setViewCompositionStrategy(
ViewCompositionStrategy.DisposeOnLifecycleDestroyed(viewLifecycleOwner)
)
setContent {
// In Compose world
}
}
BottomUpFragment.kt

28. Bottom-up
buttonComposeView.apply {
// Dispose the Composition when viewLifecycleOwner is destroyed
setViewCompositionStrategy(
ViewCompositionStrategy.DisposeOnLifecycleDestroyed(viewLifecycleOwner)
)
setContent {
// In Compose world
Button(onClick = {}) {
Text(text = "I am migrated Button")
}
}
}
BottomUpFragment.kt

29. Bottom-up
fragment_bottom_up.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.compose.ui.platform.ComposeView
android:id="@+id/buttonComposeView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

30. Bottom-up
fragment_bottom_up.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.compose.ui.platform.ComposeView
android:id="@+id/buttonComposeView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<androidx.compose.ui.platform.ComposeView
android:id="@+id/textComposeView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

31. Bottom-up
fragment_bottom_up.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>

32. Bottom-up
fragment_bottom_up.xml
<androidx.compose.ui.platform.ComposeView
android:id="@+id/fragmentComposeView"
android:layout_width="match_parent"
android:layout_height="match_parent" />

33. Voilà 🎉

34. Design System at DNB
• Eufemia Design System 🌈
• Theming
• Core components (EufemiaTextView, EufemiaButton etc.)
• Tetris 📱(WIP)
• Common UI components (Toolbar etc.)

35. Design System at DNB
Eufemia
App1
App2
uses
uses

36. Design System at DNB
Eufemia
Tetris
(WIP)
App1
App2
uses
uses
uses

37. How?

38. Migration Plan
• Start with Eufemia & Tetris
• Eufemia
• Migrate design system to Compose (colours, shapes, typography)
• Convert each component to Compose one by one
• Tetris
• Create Components as composables from the scratch
• Use AndroidView for Eufemia Android Views

39. Migration Plan
• Pick a screen in the app
• Apply bottom-up approach
• Create components in Tetris & Eufemia
• Iterate for all screens

40. During Migration
Eufemia
Compose
Tetris
Compose
App1
App2
uses
uses
uses
Eufemia
uses

41. After Migration
Eufemia
Compose
Tetris
Compose
App1
App2
uses
uses
uses

42. Migration of Apps
Activity + Fragment

43. Migration of Apps
Activity + Fragment
• Single Activity
• Jetpack Navigation

44. Migration of Apps
• No Fragment
• Activity sets content
• Navigate between composables
• Requires navigation-compose

45. How to replace Fragments with Composables?

46. We don’t for now

47. Migration Plan
Activity + Fragment + Compose

48. Migration Plan
• Only change the way views are
presented (ComposeView +
Composables)
• No change in navigation
• After all screens are migrated,
remove fragments

49. Compose POC

50. Compose POC
Toolbar
Header
Selectable item

51. Compose POC
• Android Studio: Bumblebee Canary 1
• Android Gradle Plugin: 7.1.0-alpha01
• Kotlin: 1.5.21
• Compose: 1.0.1

52. Compose POC
Gradle Android cache fix plugin + AGP 7.1.0-alpha01 incompatibility
✅ Bypass version check or comment out the plugin :)

53. Compose POC
Hilt 2.38.1 + AGP 7.1.0-alpha01 bug*
*https://github.com/google/dagger/issues/2618
✅ Update AGP to 7.1.0-alpha06

54. Compose POC
2 files found with path 'META-INF/ui_release.kotlin_module' from inputs:
- /Users/fatih/.gradle/caches/transforms-3/90edb5b9f55f1931b87d2b5c8a7aa61d/…
- /Users/fatih/.gradle/caches/transforms-3/52dda4f473a3d3633ea54e66766f28d2/…
✅ Exclude META-INF/ui_release.kotlin_module in packaging options

55. Compose POC
✅ Update all Kotlin versions to the same version

56. Compose POC
Toolbar ✅
Header ✅
Selectable item ✅

57. Compose POC
✅ Update androidx.activity version to 1.3.0

58. Compose POC

59. Migration Status
• Eufemia
• Theming: Colors, typography, shape ✅
• Core components 🚧
• Tetris 🚧
• Apps 🚧

60. Take-aways
• Plan your migration
• POC
• Make use of interoperability APIs
• Stick to the migration plan

61. THANKS ♥