This document contains notes from a presentation on navigation architecture components. It discusses navigation graphs, navigation hosts, navigation controllers, safe args for passing data between fragments, and deep linking. Code samples are provided for setting up navigation in activities, fragments, and navigation drawers. Issues and resources for further learning about navigation architecture are also listed.

1. Navigation Architecture Component
2018/06/15 Dev #2 WWDC & Google IO
tech vein (@kwmt27)

2. Who are you?
▸ ( )
▸ tech vein ( )
▸ (Android iOS)
▸ GitHub: kwmt twitter: kwmt27
▸ Google I/O2018
2

3. 3
RPG
ChiiQ
Android/iOS

4. 4
https://www.slideshare.net/yasi_life/navigation-architecture-component

5. ▸ Navigation & Navigation
5
▸ Navigation
▸
▸
▸
▸ Google IO 2018 ←

6. ▸
6
▸ Navigation
▸ Navigation
▸ New Destination Type
▸ Navigation Architecture Component

7. /37Navigation 7

8. /37Navigation
▸
▸ 1.0.0-alpha02 (6/7 updated)
8

9. /37Navigation
▸ Fragment
▸ DeepLink
▸
▸
9
Navigation

10. ▸ Navigation & Navigation
10
▸ Navigation
▸
▸
▸
▸ Google IO 2018

11. /37Navigation
▸
11
implementation 'android.arch.navigation:navigation-fragment:1.0.0-alpha02'
implementation ‘android.arch.navigation:navigation-ui:1.0.0-alpha02'
implementation ‘android.arch.navigation:navigation-fragment-ktx:1.0.0-alpha02’
implementation ‘android.arch.navigation:navigation-ui-ktx:1.0.0-alpha02’
classpath 'android.arch.navigation:navigation-safe-args-gradle-plugin:1.0.0-alpha02'
▸ Navigation Drawer Bottom Navigation
▸ Kotlin
▸ Safe Args Gradle

12. /37Navigation 12
▸
▸ Destination
▸ Destination Fragment Activity

13. /37Navigation
▸ Android Studio 3.2
▸
▸ navigation
▸ xml
13

14. /37Navigation 14

15. /37Navigation 15
action

16. /37
<navigation …
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name=“net.kwmt27.codesearch.ui.HomeFragment">
<action
android:id="@+id/nextAction"
app:destination="@id/nextFragment" />
</fragment>
<fragment
android:id=“@+id/nextFragment“
android:name="net.kwmt27.codesearch.ui.NextFragment"/>
</navigation>
<navigation …
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name=“net.kwmt27.codesearch.ui.HomeFragment">
<action
android:id="@+id/nextAction"
app:destination="@id/nextFragment" />
</fragment>
<fragment
android:id=“@+id/nextFragment“
android:name="net.kwmt27.codesearch.ui.NextFragment"/>
</navigation>
Navigation 16
<navigation …
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name=“net.kwmt27.codesearch.ui.HomeFragment">
<action
android:id="@+id/nextAction"
app:destination="@id/nextFragment" />
</fragment>
<fragment
android:id=“@+id/nextFragment“
android:name="net.kwmt27.codesearch.ui.NextFragment"/>
</navigation>
<navigation …
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name=“net.kwmt27.codesearch.ui.HomeFragment">
<action
android:id="@+id/nextAction"
app:destination="@id/nextFragment" />
</fragment>
<fragment
android:id=“@+id/nextFragment“
android:name="net.kwmt27.codesearch.ui.NextFragment"/>
</navigation>
<navigation …
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name=“net.kwmt27.codesearch.ui.HomeFragment">
<action
android:id="@+id/nextAction"
app:destination="@id/nextFragment" />
</fragment>
<fragment
android:id=“@+id/nextFragment“
android:name="net.kwmt27.codesearch.ui.NextFragment"/>
</navigation>

17. /37Navigation 17
NavHost

18. /37Navigation 18
<LinearLayout…>
<android.support.v7.widget.Toolbar … />
<fragment…
android:id="@+id/my_nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/mobile_navigation"
app:defaultNavHost="true"
/>
<android.support.design.widget.BottomNavigationView…/>
</LinearLayout>
<LinearLayout…>
<android.support.v7.widget.Toolbar … />
<fragment…
android:id="@+id/my_nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/mobile_navigation"
app:defaultNavHost="true"
/>
<android.support.design.widget.BottomNavigationView…/>
</LinearLayout>
<LinearLayout…>
<android.support.v7.widget.Toolbar … />
<fragment…
android:id="@+id/my_nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/mobile_navigation"
app:defaultNavHost="true"
/>
<android.support.design.widget.BottomNavigationView…/>
</LinearLayout>
<LinearLayout…>
<android.support.v7.widget.Toolbar … />
<fragment…
android:id="@+id/my_nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/mobile_navigation"
app:defaultNavHost="true"
/>
<android.support.design.widget.BottomNavigationView…/>
</LinearLayout>

19. /37Navigation 19
val button: Button = view.findViewById(R.id.next)
button.setOnClickListener {
Navigation.findNavController(it).navigate(R.id.nextFragment)
}
R.id.nextAction
action id
▸ NavController#navigate
▸ NavController
▸ Navigation#findNavController

20. /37Navigation 20
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout" … >
<LinearLayout …>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar" … />
<fragment
android:id="@+id/main_nav_host_fragment"
android:name=“androidx.navigation.fragment.NavHostFragment"
app:defaultNavHost="true"
app:navGraph="@navigation/nav_main" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
…
app:menu="@menu/menu_nav_drawer" />
</android.support.v4.widget.DrawerLayout>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout" … >
<LinearLayout …>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar" … />
<fragment
android:id="@+id/main_nav_host_fragment"
android:name=“androidx.navigation.fragment.NavHostFragment"
app:defaultNavHost="true"
app:navGraph="@navigation/nav_main" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
…
app:menu="@menu/menu_nav_drawer" />
</android.support.v4.widget.DrawerLayout>

21. /37Navigation 21
<menu …>
<item
android:id=“@id/homeFragment" …/>
<item
android:id=“@id/nextFragment" … />
</menu>
Navigation Graph
Destination id

22. /37
class MainActivity : AppCompatActivity() {
private lateinit var drawerLayout: DrawerLayout
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main_activity)
val toolbar: Toolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)
drawerLayout = findViewById(R.id.drawer_layout)
findNavController(R.id.main_nav_host_fragment).apply {
val navView : NavigationView = findViewById(R.id.nav_view)
NavigationUI.setupWithNavController(navView, this)
NavigationUI.setupActionBarWithNavController(
this@MainActivity, this, drawerLayout)
}
}
override fun onSupportNavigateUp(): Boolean =
navigateUp(
drawerLayout,
Navigation.findNavController(this, R.id.main_nav_host_fragment)
)
}
Navigation 22
class MainActivity : AppCompatActivity() {
private lateinit var drawerLayout: DrawerLayout
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main_activity)
val toolbar: Toolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)
drawerLayout = findViewById(R.id.drawer_layout)
findNavController(R.id.main_nav_host_fragment).apply {
val navView : NavigationView = findViewById(R.id.nav_view)
NavigationUI.setupWithNavController(navView, this)
NavigationUI.setupActionBarWithNavController(
this@MainActivity, this, drawerLayout)
}
}
override fun onSupportNavigateUp(): Boolean =
navigateUp(
drawerLayout,
Navigation.findNavController(this, R.id.main_nav_host_fragment)
)
}
DrawerLatyoute NavigationVIew ActionBar
NavController

23. /37Navigation
▸ Bundle
▸ Safe Args Gradle
23

24. /37Navigation 24
apply plugin: 'com.android.application'
apply plugin: 'androidx.navigation.safeargs'
classpath 'android.arch.navigation:navigation-safe-args-gradle-plugin:1.0.0-alpha02'
build.gradle
app/build.gradle

25. /37Navigation 25
<fragment
android:id="@+id/nextFragment"
android:name="net.kwmt27.codesearch.ui.repository.NextFragment"
android:label="@string/title_repository"
tools:layout="@layout/next_fragment" >
<argument
android:name="step"
android:defaultValue="1"
app:type="integer"/>
</fragment>

26. /37Navigation
▸ Fragment + Directions
▸ ( )HomeFragmentDirections
▸ Fragment + Args
▸ ( )NextFragmentArgs
26

27. /37Navigation
▸
27
button.setOnClickListener {
val action = HomeFragmentDirections.nextAction().setStep(5)
Navigation.findNavController(it).navigate(action)
}
val step = arguments?.let {
val safeArgs = NextFragmentArgs.fromBundle(it)
safeArgs.step
}
▸

28. /37Navigation
▸
28
PendingIntent deeplink = Navigation.findNavController(v).createDeepLink()
.setDestination(R.id.android)
.setArguments(args)
.createPendingIntent();

29. /37Navigation
▸ URL
29
<fragment
android:id="@+id/deepLinkFragment"
android:name="net.kwmt27.codesearch.ui.DeepLinkFragment">
<argument
android:name="myarg"
android:defaultValue="Android!"/>
<deepLink app:uri="www.example.com/{myarg}"/>
</fragment>
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<nav-graph android:value="@navigation/nav_main"/>
</activity>
▸ Navigation Graph
▸ AndroidManifest

30. ▸ Navigation & Navigation
30
▸ Navigation
▸
▸
▸
▸ Google IO 2018

31. /37
▸ https://issuetracker.google.com/issues/79672220
▸ navigateForResult
▸ 5/15
31
▸ https://issuetracker.google.com/issues/80267254
▸ 5/25

32. /37
▸ https://issuetracker.google.com/issues/79665225
▸ 5/14
32
▸ https://issuetracker.google.com/issues/79993862
▸ 5/19

33. ▸ Navigation & Navigation
33
▸ Navigation
▸
▸
▸
▸ Google IO 2018

34. /37
▸ Navigation
▸ Navigation Graph
▸
▸
▸
34

35. /37
▸ Implement navigation with the Navigation Architecture Component
▸ https://developer.android.com/topic/libraries/architecture/
navigation/navigation-implementing
▸ Codelabs
▸ https://codelabs.developers.google.com/codelabs/android-
navigation/index.html?index=..%2F..%2Findex#2
▸ Issue Tracker
▸ https://issuetracker.google.com/issues?q=componentid:
409828%20status:open&p=1
35

36. ▸ Navigation & Navigation
36
▸ Navigation
▸
▸
▸
▸ Google IO 2018 ←

37. /3737