Road to Single Activity

Over the last few years, the number of projects using Jetpack Compose is increasing.
Our project at U-NEXT is one example: we previously used AndroidView to build our UI, but we recently adopted Compose and revamped our UI architecture, including the screen transition mechanism, by using Navigation Compose.

However, we faced several problems afterwards.
Specifically, our app uses a Navigation Bar/Rail with separate tabs (Top-level Destinations) for each major function, so the NavGraph is divided into those units.
However, due to the specifications allowing each function to closely collaborate with each other, screen transitions across functions occur frequently.
Furthermore, some of these screens are called by deep links, so the screen transitions are very complex.
Until now, this problem was solved by sharing such screens between multiple Activities, but this required reconfiguring Local Composition and having a NavGraph for each Activity, which increased operational costs.

Therefore, we decided for such cases to abandon the solution of using Activities sharing screens, and instead took another step in revamping the UI architecture by making full use of Navigation Compose, aiming for a Single Activity.

In this session, based on examples from our own projects, I will introduce the following points in detail, with a focus on how to use Navigation Compose.
- How to gradually migrate UI architecture from AndroidView to Compose
- Examples of app development with complex screen transition specifications

Keywords
- Navigation Compose
- Nested NavGraph
- Common NavGraph
- Type safe navigation
- Default argument
- Multi back stack management
- Top-level Destination’s back stack management
- Navigation Bar/Rail control with WindowInset consideration
- Screen Transition by Deep links
- Compose Destinations (OSS)

Transcript

1. Road to Single Activity
2. About me yurihondo Software Engineer@U-NEXT Moving in with the in-laws next month - wish me luck! X : yurihondo @yuyuyuyuyuri
3. Motivation When overhauling the screen transition mechanism with Navigation Compose, we gained some serious pain knowledge. Sharing it.
4. Covered Topics • Gradual Migration from AndroidView to Compose Using Navigation • Examples of Using Navigation in Apps with Complex Screen Transitions
5. NOT Covered Topics • Basics of Navigation Setup and More • Knowledge for Migrating Layouts to Compose
6. Environment Compose: 1.6.X Navigation: 2.7.7
7. Environment Compose: 1.6.X Navigation: 2.7.7
8. Screen Transition Sample Navigation 2.7.7 https://github.com/yurihondo/screentransitionsample Navigation 2.8.x https://github.com/yurihondo/screentransitionsample/tree/feature/navigation_v2.8.x Compose Destinations https://github.com/yurihondo/screentransitionsample/tree/feature/compose_destinations
9. Agenda • Background • Good-bye Fragment • Hello Single Activity
10. Background
11. Background • About U-NEXT app • Migrations
12. Background • About U-NEXT app • Migrations
15. Large Screens
16. Common Screens
17. Deep Links Dummy Title ストーリー. ダミーストーリー。ダミーストーリー。 ... Intent
18. U-NEXT app for Android ▪ Large Screens ▪ Common Screens ▪ Deep Links
19. Background • About U-NEXT app • Migrations
20. Activity Activity Activity Framgent Fragment Transaction
21. Main Activity Common Screen (Activity) Activity Activity Activity
22. Fragment Compose
23. Activity Activity Activity Nav Graph Navigation Screen （Compose）
24. Single Activity Nav Graph Navigation Screen （Compose）
25. The cost of multiple Activities 1. Common Settings: Cost of setting things like CompositionLocal across all Activities 2. NavHost: Cost of implementing NavHost for each Activity
26. The cost of multiple Activities 1. Common Settings: Cost of setting things like CompositionLocal across all Activities 2. NavHost: Cost of implementing NavHost for each Activity Improve app maintainability and scalability
27. Migration Step1: Abolish Fragments and migrate the app to Full-Navigation Step2: Switch to a Single Activity architecture
28. Good-bye Fragment
29. Legacy screen transition mechanism
30. Activity Container (Fragment) Screen Screen Screen (Fragment) Screen (Composable)
31. Activity Container (Fragment) Screen Screen Screen (Fragment) Screen (Composable)
32. Video Container (Fragment) Book Container (Fragment) Search Container (Fragment)
33. Screen Screen Activity Container (Fragment) Screen (Fragment) Screen (Composable)
34. Search Container (Fragment) Video Container (Fragment) Book Container (Fragment) Activity hide show ・・・ hide
35. Screen Screen Activity Container (Fragment) Screen (Fragment) Screen (Composable)
36. NavGraph Activity Screen (Composable) Nested NavGraph
37. NavGraph Activity Screen (Composable) Nested NavGraph Proceed in phases 1. Convert screens to Composables, then create and integrate them into the NavGraph 2. Integration of the created NavGraphs.
38. Good-bye Fragment Phase 1: Graphs by Feature Phase 2-1: Graph Integration Phase 2-2: Adapting to App Specifics
39. Good-bye Fragment Phase 1: Graphs by Feature Phase 2-1: Graph Integration Phase 2-2: Adapting to App Specifics
40. Screen Screen Activity Container (Fragment) Screen (Fragment) Screen (Composable) Activity Screen (Composable) NavGraph Container (Fragment) Phase 1
41. Screen Screen Activity Container (Fragment) Screen (Fragment) Screen (Composable)
42. Container (Fragment) Container (Fragment) Graph Screen (Composable) Graph Screen (Composable) Feature Feature
43. Screen Conversion 1 2 3 Add to NavHost NavGraph Setup
44. NavGraph Setup Screen Conversion 1 2 3 Add to NavHost
45. Fragments using XML layouts will migrate to Compose UI...
46. Add to NavHost NavGraph Setup Screen Conversion 1 2 3
51. Container (Fragment) Container (Fragment) Graph Screen (Composable) Graph Screen (Composable) Common Screen
52. Container (Fragment) Container (Fragment) Graph Screen (Composable) Graph Screen (Composable) Common Screen Common Graph
54. Can be added as a NavGraph destination, but can't navigate back to the original NavHost's destination from the target Activity.
55. Add to NavHost NavGraph Setup Screen Conversion 1 2 3
59. NavGraphへ 集約 NavGraph 作成 Screen Compose化 1 2 3 Completed Compose Conversion and NavGraph Definition for All Screens
60. Activity Screen (Composable) NavGraph Container (Fragment)
61. Good-bye Fragment Phase 1: Graphs by Feature Phase 2-1: Graph Integration Phase 2-2: Adapting to App Specifics
62. NavGraph Activity Screen (Composable) Nested NavGraph Activity Screen (Composable) NavGraph Container (Fragment) Phase 2
63. Activity MainGraph Video Graph Book Graph Search Graph ・・・
64. Safely Continue Feature Development During Refactoring Feature development Refactoring
65. New Root Debug menu OLD Root
67. Switching core UI invocation processes using mechanisms like Feature Flags
68. New Root OLD Root
69. Long-term migration work is feasible Refactoring Feature development
71. NavGraph Activity Screen (Composable) Nested NavGraph
72. Good-bye Fragment Phase 1: Graphs by Feature Phase 2-1: Graph Integration Phase 2-2: Adapting to App Specifics
74. ❶ ❷ ❸ Back
75. ❶ ❷ ❸ ❹ Back Back
76. ❶ ❷ ❸ ❹
77. Video Graph Book Graph Search Graph Library Graph ❶ ❷
78. Video Graph Book Graph Search Graph Library Graph ❶ ❷ • Tab-Graph Mapping • Graph Switching Process
88. ❶ ❷ ❸ ❹ Back Back
89. BookGraph BackStackEntry BackStackEntry SearchGraph BackStackEntry BackStackEntry Back
90. BookGraph BackStackEntry BackStackEntry SearchGraph BackStackEntry BackStackEntry
91. BookGraph BackStackEntry BackStackEntry SearchGraph BackStackEntry
92. BookGraph BackStackEntry BackStackEntry SearchGraph BackStackEntry • Controlling Back Events • Managing Tab Selection History
93. Reference link
95. https://issuetracker.google.com/issues/308445371 Calling BackHandler before NavHost gets overridden by NavHost.
96. If BackStackEntry is the StartRoute of a Graph, it should navigate to the previous Tab (Graph).
97. Building a System to Manage Tab Selection History
104. BookGraph BackStackEntry BackStackEntry SearchGraph BackStackEntry BackStackEntry navigate pop
105. Full-Compose + Full-Navigation
106. Hello Single Activity
107. Core Essentials: • Screen Reassignment • Backing Result Update
108. Core Essentials: • Screen Reassignment • Backing Result Update
109. MainActivity XxxActivity MainGraph NestedGraph Graph Composable
110. MainActivity XxxActivity MainGraph NestedGraph Graph Composable
111. Core Essentials: • Screen Reassignment • Backing Result Update
112. Activity Composable Result Composable
113. Composable Result Composable
114. Composable Result Composable
116. Additional Essentials: • Controlling Tab Visibility • DeepLinks
117. Additional Essentials: • Controlling Tab Visibility • DeepLinks
119. Tab visibility behavior: 1. Hide 2. Same As Parent
128. Won't the display break when returning to a SAME_AS_PARENT Destination...?
129. HIDE SAME AS PARENT SHOW Parent
130. HIDE SAME AS PARENT SHOW Parent
131. HIDE SAME AS PARENT SHOW Parent
132. HIDE SAME AS PARENT SHOW Parent • Detecting Back Navigation • Restoring Tab visibility
133. currentBackStackを ハックする
134. https://github.com/yurihondo/screentransitionsample
135. Screen B currentBackStack Screen A Screen B Screen C Parent
138. Additional Essentials: • Controlling Tab Visibility • DeepLinks
139. Dummy Title ストーリー. ダミーストーリー。ダミーストーリー。 ... Intent
140. Screen (Activity) DeepLinks Activity TaskStack Builder WEB Intent Screen (Activity) Intent Intent
141. Controlling the BackStack is challenging...
142. MainActivity DeepLinks Activity TaskStack Builder WEB Intent Intent MainGraph Navigate
147. Single Activity
148. Conclusion
149. Effect of the Work • Reduced workload and issues related to adding new screens • Deeper understanding of Navigation implementation Lessons Learned • The challenge of balancing Navigation principles with custom UX • Tailoring Navigation to better fit our environment
150. Screen Transition Sample Navigation 2.7.7 https://github.com/yurihondo/screentransitionsample Navigation 2.8.x https://github.com/yurihondo/screentransitionsample/tree/feature/navigation_v2.8.x Compose Destinations https://github.com/yurihondo/screentransitionsample/tree/feature/compose_destinations
151. Thanks