Lesson 6:

App navigation

This work is licensed under the

Android Development with Kotlin Apache 2 license. 1
v1.0
About this lesson
Lesson 6: App navigation
● Multiple activities and intents
● App bar, navigation drawer, and menus
● Fragments
● Navigation in an app
● More custom navigation behavior
● Navigation UI
● Summary

This work is licensed under the

Android Development with Kotlin Apache 2 license. 2
Multiple activities and
intents

This work is licensed under the

Android Development with Kotlin Apache 2 license. 3
Multiple screens in an app
Sometimes app functionality may be separated into multiple screens.

Examples:
● View details of a single item (for example, product in a shopping
app)
● Create a new item (for example, new email)
● Show settings for an app
● Access services in other apps (for example, photo gallery or browse
documents)
This work is licensed under the
Android Development with Kotlin Apache 2 license. 4
Intent

Requests an action from another app component, such as another

Activity

● An Intent usually has two primary pieces of information:

○ Action to be performed (for example, ACTION_VIEW,
ACTION_EDIT, ACTION_MAIN)
○ Data to operate on (for example, a person’s record in the
contacts database)
● Commonly used to specify a request to transition to another
Activity Android Development with Kotlin
This work is licensed under the
Apache 2 license. 5
Explicit intent

● Fulfills a request using a specific component

● Navigates internally to an Activity in your app
● Navigates to a specific third-party app or another app
you've written

This work is licensed under the

Android Development with Kotlin Apache 2 license. 6
Explicit intent examples
Navigate between activities in your app:
fun viewNoteDetail() {
val intent = Intent(this, NoteDetailActivity::class.java)
intent.putExtra(NOTE_ID, note.id)
startActivity(intent)
}
Navigate to a specific external app:
fun openExternalApp() {
val intent = Intent("com.example.workapp.FILE_OPEN")
if (intent.resolveActivity(packageManager) != null) {
startActivity(intent)
}
}
This work is licensed under the
Android Development with Kotlin Apache 2 license. 7
Implicit intent

● Provides generic action the app can perform

● Resolved using mapping of the data type and action to
known components
● Allows any app that matches the criteria to handle the
request

This work is licensed under the

Android Development with Kotlin Apache 2 license. 8
Implicit intent example

fun sendEmail() {
val intent = Intent(Intent.ACTION_SEND)
intent.type = "text/plain"
intent.putExtra(Intent.EXTRA_EMAIL, emailAddresses)
intent.putExtra(Intent.EXTRA_TEXT, "How are you?")

if (intent.resolveActivity(packageManager) != null) {
startActivity(intent)
}
}

This work is licensed under the

Android Development with Kotlin Apache 2 license. 9
App bar, navigation
drawer, and menus

This work is licensed under the

Android Development with Kotlin Apache 2 license. 10
App bar

This work is licensed under the

Android Development with Kotlin Apache 2 license. 11
Navigation drawer

This work is licensed under the

Android Development with Kotlin Apache 2 license. 12
Menu
Define menu items in XML menu resource (located in res/menu folder)

<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
app:showAsAction="never" />
</menu>
This work is licensed under the
Android Development with Kotlin Apache 2 license. 13
More menu options
<menu>
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_home"
android:icon="@drawable/ic_menu_camera"
android:title="@string/menu_home" />
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="@string/menu_gallery" />
<item
android:id="@+id/nav_slideshow"
android:icon="@drawable/ic_menu_slideshow"
android:title="@string/menu_slideshow" />
</group>
</menu>
This work is licensed under the
Android Development with Kotlin Apache 2 license. 14
 Options menu example
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item android:id="@+id/action_intent"
android:title="@string/action_intent" />

<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
app:showAsAction="never" />
</menu>
This work is licensed under the
Android Development with Kotlin Apache 2 license. 15
Inflate options menu

override fun onCreateOptionsMenu(menu: Menu): Boolean {

menuInflater.inflate(R.menu.main, menu)
return true
}

This work is licensed under the

Android Development with Kotlin Apache 2 license. 16
Handle menu options selected
override fun onOptionsItemSelected(item: MenuItem): Boolean {

when (item.itemId) {
R.id.action_intent -> {
val intent = Intent(Intent.ACTION_WEB_SEARCH)
intent.putExtra(SearchManager.QUERY, "pizza")
if (intent.resolveActivity(packageManager) != null) {
startActivity(intent)
}
}
else -> Toast.makeText(this, item.title,
Toast.LENGTH_LONG).show()
...
This work is licensed under the
Android Development with Kotlin Apache 2 license. 17
 Fragments

This work is licensed under the

Android Development with Kotlin Apache 2 license. 18
Fragments for tablet layouts

This work is licensed under the

Android Development with Kotlin Apache 2 license. 19
Fragment

● Represents a behavior or portion of the UI in an activity

("microactivity")
● Must be hosted in an activity
● Lifecycle tied to host activity's lifecycle
● Can be added or removed at runtime

This work is licensed under the

Android Development with Kotlin Apache 2 license. 20
Note about fragments

Use the AndroidX version of the Fragment class.

(androidx.fragment.app.Fragment).

Don't use the platform version of the Fragment class

(android.app.Fragment), which was deprecated.

This work is licensed under the

Android Development with Kotlin Apache 2 license. 21
Navigation within an
app

This work is licensed under the

Android Development with Kotlin Apache 2 license. 22
Navigation component
● Collection of libraries and tooling, including an integrated
editor, for creating navigation paths through an app
● Assumes one Activity per graph with many Fragment
destinations
● Consists of three major parts:
○ Navigation graph
○ Navigation Host (NavHost)
○ Navigation Controller (NavController)

This work is licensed under the

Android Development with Kotlin Apache 2 license. 23
Add dependencies

In build.gradle, under
dependencies:
implementation "androidx.navigation:navigation-fragment-ktx:
$nav_version"

implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

This work is licensed under the

Android Development with Kotlin Apache 2 license. 24
Navigation host (NavHost)

<fragment
android:id="@+id/nav_host"

android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="@navigation/nav_graph_name"/>

This work is licensed under the

Android Development with Kotlin Apache 2 license. 25
Navigation graph
New resource type located in res/navigation
directory
● XML file containing all of your navigation
destinations and actions
● Lists all the (Fragment/Activity)
destinations that can be navigated to
● Lists the associated actions to traverse
between them
● Optionally lists animations for entering or
exiting
This work is licensed under the
Android Development with Kotlin Apache 2 license. 26
Navigation Editor in Android
Studio

This work is licensed under the

Android Development with Kotlin Apache 2 license. 27
Creating a Fragment
● Extend Fragment class
● Override onCreateView()
● Inflate a layout for the Fragment that you have defined in XML

class DetailFragment : Fragment() {

override fun onCreateView(inflater: LayoutInflater, container:

ViewGroup?,
savedInstanceState: Bundle?): View? {
return inflater.inflate(R.layout.detail_fragment, container,
false)
}
} Android Development with Kotlin
This work is licensed under the
28
Apache 2 license.
Specifying Fragment
destinations
● Fragment destinations are denoted by the action tag in
the navigation graph.
● Actions can be defined in XML directly or in the Navigation
Editor by dragging from source to destination.
● Autogenerated action IDs take the form of
action_<sourceFragment>_to_<destinationFragment>.

This work is licensed under the

Android Development with Kotlin Apache 2 license. 29
Example fragment destination
<fragment
android:id="@+id/welcomeFragment"

android:name="com.example.android.navigation.WelcomeFragment
"
android:label="fragment_welcome"
tools:layout="@layout/fragment_welcome" >

<action

android:id="@+id/action_welcomeFragment_to_detailFragment"
app:destination="@id/detailFragment" />
This work is licensed under the
</fragment> Android Development with Kotlin Apache 2 license. 30
Navigation Controller
(NavController)
NavController manages UI navigation in a navigation
host.
● Specifying a destination path only names the action,
but it doesn’t execute it.
● To follow a path, use NavController.

This work is licensed under the

Android Development with Kotlin Apache 2 license. 31
 Example NavController

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

...
val navController = findNavController(R.id.myNavHostFragment)
}
fun navigateToDetail() {

navController.navigate(R.id.action_welcomeFragment_to_detailFragment)
}
}

This work is licensed under the

Android Development with Kotlin Apache 2 license. 32
 More custom
navigation behavior

This work is licensed under the

Android Development with Kotlin Apache 2 license. 33
Passing data between
destinations
Using Safe Args:
● Ensures arguments have a valid type
● Lets you provide default values
● Generates a <SourceDestination>Directions class with methods
for every action in that destination
● Generates a class to set arguments for every named action
● Generates a <TargetDestination>Args class providing access to
the destination's arguments

This work is licensed under the

Android Development with Kotlin Apache 2 license. 34
Setting up Safe Args
In the project build.gradle file:
buildscript {
repositories {
google()
}
dependencies {
classpath "androidx.navigation:navigation-safe-args-gradle-plugin:
$nav_version"
}
}
In the app's or module's build.gradle file:
apply plugin: "androidx.navigation.safeargs.kotlin"

This work is licensed under the

Android Development with Kotlin Apache 2 license. 35
Sending data to a Fragment

1. Create arguments the destination fragment will expect.

2. Create action to link from source to destination.
3. Set the arguments in the action method on
<Source>FragmentDirections.
4. Navigate according to that action using the Navigation
Controller.
5. Retrieve the arguments in the destination fragment.
This work is licensed under the
Android Development with Kotlin Apache 2 license. 36
Destination arguments
<fragment
android:id="@+id/multiplyFragment"
android:name="com.example.arithmetic.MultiplyFragment"
android:label="MultiplyFragment" >
<argument
android:name="number1"
app:argType="float"
android:defaultValue="1.0" />
<argument
android:name="number2"
app:argType="float"
android:defaultValue="1.0" />
</fragment>
This work is licensed under the
Android Development with Kotlin Apache 2 license. 37
 Supported argument types
Type Type Syntax Supports Default Supports
app:argType=<type> Values Null
Values
Integer "integer" Yes No
Float "float" Yes No
Long "long" Yes No
Boolean "boolean" Yes ("true" or No
"false")
String "string" Yes Yes
Array above type + "[]" Yes (only "@null") Yes
(for example, "string[]"
"long[]")
Enum Fully qualified name of the enum Yes No
This work is licensed under the
Android Development with Kotlin 38
Resource reference "reference" YesApache 2 license. No
Supported argument types: Custom
classes
Type Type Syntax Supports Default Supports Null
app:argType=<type> Values Values
Serializable Fully qualified class name Yes (only "@null") Yes

Parcelable Fully qualified class name Yes (only "@null") Yes

This work is licensed under the

Android Development with Kotlin Apache 2 license. 39
Create action from source to
destination
In nav_graph.xml:
<fragment
android:id="@+id/fragment_input"
android:name="com.example.arithmetic.InputFragment">

<action
android:id="@+id/action_to_multiplyFragment"
app:destination="@id/multiplyFragment" />

</fragment>

This work is licensed under the

Android Development with Kotlin Apache 2 license. 40
Navigating with actions
In InputFragment.kt:
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding.button.setOnClickListener {
val n1 = binding.number1.text.toString().toFloatOrNull() ?:
0.0
val n2 = binding.number2.text.toString().toFloatOrNull() ?:
0.0

val action =
InputFragmentDirections.actionToMultiplyFragment(n1, n2)
view.findNavController().navigate(action)
}
} This work is licensed under the
Android Development with Kotlin Apache 2 license. 41
Retrieving Fragment arguments
class MultiplyFragment : Fragment() {
val args: MultiplyFragmentArgs by navArgs()
lateinit var binding: FragmentMultiplyBinding
override fun onViewCreated(view: View, savedInstanceState:
Bundle?) {
super.onViewCreated(view, savedInstanceState)
val number1 = args.number1
val number2 = args.number2
val result = number1 * number2
binding.output.text = "${number1} * ${number2} = ${result}"
}

} This work is licensed under the

Android Development with Kotlin Apache 2 license. 42
Navigation UI

This work is licensed under the

Android Development with Kotlin Apache 2 license. 43
Menus revisited

override fun onOptionsItemSelected(item: MenuItem): Boolean {

val navController =
findNavController(R.id.nav_host_fragment)
return item.onNavDestinationSelected(navController) ||
super.onOptionsItemSelected(item)

This work is licensed under the

Android Development with Kotlin Apache 2 license. 44
DrawerLayout for navigation
drawer
<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/drawer_layout" ...>

<fragment

android:name="androidx.navigation.fragment.NavHostFragment"
android:id="@+id/nav_host_fragment" ... />

<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
app:menu="@menu/activity_main_drawer" ... />

</androidx.drawerlayout.widget.DrawerLayout>
This work is licensed under the
Android Development with Kotlin Apache 2 license. 45
Finish setting up navigation
drawer
Connect DrawerLayout to navigation graph:

val appBarConfiguration = AppBarConfig(navController.graph,

drawer)

Set up NavigationView for use with a NavController:

val navView = findViewById<NavigationView>(R.id.nav_view)
navView.setupWithNavController(navController)

This work is licensed under the

Android Development with Kotlin Apache 2 license. 46
Understanding the back stack
State 1 State 2 State 3

Activity 3

Activity 2 Activity 2 Activity 2

Activity 1 Activity 1 Activity 1

Back stack Back stack Back stack

This work is licensed under the
Android Development with Kotlin Apache 2 license.
Fragments and the back stack
State 1 State 2 State 3

Fragment 2

Fragment 1 Fragment 1 Fragment 1

Activity 2 Activity 2 Activity 2

Activity 1 Activity 1 Activity 1

Back stack Back stack Back stack

This work is licensed under the
Android Development with Kotlin Apache 2 license.
 Summary

This work is licensed under the

Android Development with Kotlin Apache 2 license. 49
Summary
In Lesson 6, you learned how to:
● Use explicit and implicit intents to navigate between Activities
● S
tructure apps using fragments instead of putting all UI code in th
e Activity
● Handle navigation with NavGraph, NavHost, and NavController
● Use Safe Args to pass data between fragment destinations
● Use NavigationUI to hook up top app bar, navigation drawer, and
bottom navigation
● Android keeps a back stack of all the destinations you’ve visited,
with each new destination being pushed onto the stack.
This work is licensed under the
Android Development with Kotlin Apache 2 license. 50
Learn more
● Principles of navigation
● Navigation component
● Pass data between destinations
● NavigationUI

This work is licensed under the

Android Development with Kotlin Apache 2 license. 51
Pathway

Practice what you’ve learned by

completing the pathway:
Lesson 6: App navigation

This work is licensed under the

Android Development with Kotlin Apache 2 license. 52