breaking the rules:
dynamic navigation in
modularized apps
sumayyah ahmed
Slide 2
Slide 2 text
about me
Github: https://github.com/sumayyah
LinkedIn: https://www.linkedin.com/in/sumayyah-ahmed
Slide 3
Slide 3 text
Everything is modularized
Everything is scoped
encapsulated
reusable
what could be better?
Slide 4
Slide 4 text
how do we navigate?
Slide 5
Slide 5 text
A B
Slide 6
Slide 6 text
A B
Slide 7
Slide 7 text
A B
Slide 8
Slide 8 text
A B
A B
Slide 9
Slide 9 text
nav components introduced scoping
Slide 10
Slide 10 text
Activity
NavHostFragment
NavController
Nav Graph XML: All the destinations in the flow
Handles communication between view layer and nav logic
Slide 11
Slide 11 text
Activity
NavHostFragment
NavController
Nav Graph
Handles communication between view layer and nav logic
Compose version 1 - interoperable
Composable Composable
Fragment
Composable Composable
Fragment
Slide 12
Slide 12 text
Composable
NavHost
Nav Graph
Handles communication between view layer and nav logic
Compose version 2 - 100% Compose
Activity
Composable
Composable
Composable
NavHostController
Slide 13
Slide 13 text
A B
Slide 14
Slide 14 text
Module A Module B Module C
Slide 15
Slide 15 text
Module A Module B Module C
NavGraph
Activity
NavGraph
Activity
NavGraph
Activity
NavGraph
Activity
Slide 16
Slide 16 text
Module A Module B Module C
NavGraph
Activity
NavGraph
Activity
NavGraph
Activity
NavGraph
Activity
?
Slide 17
Slide 17 text
default: maintain encapsulation
Slide 18
Slide 18 text
NavGraph NavGraph
Module A Module B
Activity A Activity B
Slide 19
Slide 19 text
by default, navigation is static
Slide 20
Slide 20 text
what if you have unknowns at runtime?
what if navigation is custom to a particular user type?
A->B->C is different from D->E->C?
Slide 21
Slide 21 text
navigation can be dynamic
Slide 22
Slide 22 text
now let’s start breaking the rules
Slide 23
Slide 23 text
Graph A
Fragment A
Fragment B
Fragment C
Fragment A
Activity A
Graph 1
Activity B
Graph 2
Fragment A
Fragment B
Fragment C
Fragment A
Slide 24
Slide 24 text
Graph A
Fragment A
Fragment B
Fragment C
Fragment A
Activity A
Graph 1
Activity B
Graph 2
Fragment A
Fragment B
Fragment C
Fragment A
deep links
Slide 25
Slide 25 text
Destination Graph
25
Slide 26
Slide 26 text
Destination Graph
26
Source
Slide 27
Slide 27 text
Destination Graph
27
Source Graph
Slide 28
Slide 28 text
Destination Graph
28
Source Graph
Slide 29
Slide 29 text
Destination Graph
29
Source Graph
Source Code
Slide 30
Slide 30 text
Case 1: Interoperable Compose
Activity
NavHostFragment
NavController
Nav Graph
Composable Composable
Fragment
Composable Composable
Fragment
Slide 31
Slide 31 text
Deep linking remains the same!
Case 1: Interoperable Compose
Slide 32
Slide 32 text
Destination Graph
32
Source Graph
Source Code
Slide 33
Slide 33 text
Case 2: 100% Compose
Composable
NavHost
NavHostController
Nav Graph
Activity
Composable
Composable
Composable
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Destination Graph
38
Slide 39
Slide 39 text
Destination Graph
39
Source Graph
Slide 40
Slide 40 text
Destination Graph
40
Source Graph
Source Code
Slide 41
Slide 41 text
Destination Graph
41
Source Graph
Source Code
Slide 42
Slide 42 text
how does the navigation work?
Slide 43
Slide 43 text
inflation time!
Slide 44
Slide 44 text
NavController
SparseArray
NavGraph::class.java NavDestination
NavDestination
NavDestination
mNavGraph
BackStack via Activity
reference
Fragment 1
NavGraph
Fragment 2
Slide 45
Slide 45 text
Navigator
NavDestination T::class.java
Deep Links
Actions Declared in
code
Created by
NavComponents
Actions
Navigator
Slide 46
Slide 46 text
Navigator
NavDestination T::class.java
Deep Links
Actions Declared in
code
Created by
NavComponents
Actions
Navigator
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
array
NavGraph::class.java
uri
R.id.fragmentA
R.id.fragmentB
R.id.graph2
NavDestination
NavDestination
NavDestination
Slide 49
Slide 49 text
array
NavGraph::class.java
uri
R.id.fragmentA
R.id.fragmentB
R.id.graph2
NavDestination
NavDestination
NavDestination
Slide 50
Slide 50 text
array
NavGraph::class.java
uri
R.id.fragmentA
R.id.fragmentB
R.id.graph2
NavDestination
NavDestination
NavDestination
array
NavDestination
Navigator
NavDestination
NavDestination
R.id.fragmentA
R.id.fragmentB
NavDestination
NavDestination
NavDestination
Navigator
adds this fragment
to backstack
Slide 54
Slide 54 text
Breaking rule #2: making graphs mutable
Slide 55
Slide 55 text
what if you don’t know where to go till runtime?
Fragment A
Fragment A
??
Fragment B
Module
Slide 56
Slide 56 text
Fragment A
Fragment B
Fragment C
Fragment E
??
Slide 57
Slide 57 text
you can modify graphs at runtime
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Fragment A
Fragment B
Fragment C
Fragment E
NavDestination
Fragment D
Module
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
Breaking rule #3:
Data sharing in non-traditional ways
Slide 66
Slide 66 text
How do fragments in the stack react to this unknown destination?
Fragment A
Fragment A
??
Fragment B
What if Fragment B needs to know what happens in Fragment ??
They don’t share a ViewModel or Activity or data store
Slide 67
Slide 67 text
Fragment A
Fragment A
??
Fragment B
How do we share data across a backstack?
Slide 68
Slide 68 text
NavGraphViewModels
Slide 69
Slide 69 text
SavedStateHandle
Slide 70
Slide 70 text
NavBackStackEntry
NavController SavedStateRegistry
ViewModelStore
NavDestination
Fragment
Backstack
NavBackStackEntry
NavBackStackEntry
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
Fragment A
Fragment B
Slide 73
Slide 73 text
Fragment A
Fragment B
??
Slide 74
Slide 74 text
Fragment A
Fragment B
Slide 75
Slide 75 text
The fundamentals of Android navigation are the same:
backstack, intents, etc
What has changed: access and responsibilities
Compose doesn’t change a whole lot regarding navigation