Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Oh, the places you'll go! Cracking Navigation on Android

Oh, the places you'll go! Cracking Navigation on Android

" You’re building your app, you’re out on your way,
Activity to fragment, you’ll add deep links one day.
Notifications, transitions, you pass arguments, too,
Just a messy piece of cake, for a developer like you!
But then the user hits back, or up or away -
What should happen? You’re lost! The road starts to sway!

They talk about launch modes, affinity, activity stack...
We will deep-dive to those,
then learn the new stuff from Jetpack! "

*** Presented at Android Summit, and Andorid NYC meetup, on August 2018.

Britt Barak

August 16, 2018
Tweet

More Decks by Britt Barak

Other Decks in Programming

Transcript

  1. Cracking Navigation on Android
    @BrittBarak

    View full-size slide

  2. @BrittBarak
    Congratulation
    Today is your day.
    You’re building your app!
    You’re off and away
    @BrittBarak

    View full-size slide

  3. @BrittBarak
    You’re on your own
    You know what you know
    And you are the DEV that
    decides where your USER will go!
    @BrittBarak

    View full-size slide

  4. Britt Barak
    DevRel @ Nexmo
    Google Developer Expert
    Women Techmakers Israel
    Britt Barak @brittBarak

    View full-size slide

  5. @BrittBarak
    App
    Activity
    @BrittBarak

    View full-size slide

  6. @BrittBarak
    App
    Activities are welcome!
    com.nexmo.brittApp
    Activity
    Activity2
    Activity3
    @BrittBarak

    View full-size slide

  7. @BrittBarak
    App
    Activities are welcome!
    com.nexmo.brittApp
    Activity
    Activity2
    Activity3
    @BrittBarak

    View full-size slide

  8. @BrittBarak
    com.vonage.britt
    App
    @BrittBarak

    View full-size slide

  9. @BrittBarak
    Our lives are PERFECT!
    @BrittBarak

    View full-size slide

  10. @BrittBarak

    Expect when they’re not.
    Because sometime, they won’t
    @BrittBarak

    View full-size slide

  11. @BrittBarak
    Modify Navigation Behaviour
    • AndroidManifest: launchMode
    • Code: Intent Flags
    @BrittBarak

    View full-size slide

  12. @BrittBarak
    Standard

    View full-size slide

  13. @BrittBarak
    conversationList

    View full-size slide

  14. @BrittBarak
    conversationList
    conversation

    View full-size slide

  15. @BrittBarak
    conversationList
    conversation
    conversation

    View full-size slide

  16. @BrittBarak
    conversationList
    conversation
    conversation
    conversation

    View full-size slide

  17. @BrittBarak
    Single Top

    View full-size slide

  18. @BrittBarak
    conversation
    conversationList

    View full-size slide

  19. @BrittBarak
    conversation
    conversation
    conversationList

    View full-size slide

  20. @BrittBarak
    conversation
    onNewIntent()
    conversationList

    View full-size slide

  21. @BrittBarak
    conversation
    conversation
    conversationList

    View full-size slide

  22. @BrittBarak
    conversation
    conversation
    phoneCall
    conversationList

    View full-size slide

  23. @BrittBarak
    conversation
    conversation
    phoneCall
    conversationList

    View full-size slide

  24. @BrittBarak
    conversation
    conversation
    phoneCall
    conversation
    conversationList

    View full-size slide

  25. @BrittBarak
    conversation
    conversation
    conversationList
    conversation
    phoneCall

    View full-size slide

  26. @BrittBarak
    convoList

    View full-size slide

  27. @BrittBarak
    convoList
    Search

    View full-size slide

  28. @BrittBarak
    convoList
    Search
    onNewIntent()

    View full-size slide

  29. @BrittBarak
    convoList
    Search
    onNewIntent()

    View full-size slide

  30. @BrittBarak
    convoList
    Search

    View full-size slide

  31. @BrittBarak
    convoList

    View full-size slide

  32. @BrittBarak
    But I want 1 instance!

    View full-size slide

  33. @BrittBarak
    Single Task

    View full-size slide

  34. @BrittBarak
    conversationList

    View full-size slide

  35. @BrittBarak
    conversationList
    conversation

    View full-size slide

  36. @BrittBarak
    conversation
    conversationList
    phoneCall
    singleTask

    View full-size slide

  37. @BrittBarak
    conversationList
    conversation
    phoneCall
    singleTask
    @BrittBarak

    View full-size slide

  38. @BrittBarak
    conversationList
    conversation
    @BrittBarak
    phoneCall
    singleTask

    View full-size slide

  39. @BrittBarak
    conversationList
    conversation
    @BrittBarak
    phoneCall
    singleTask

    View full-size slide

  40. @BrittBarak
    conversationList
    conversation
    conversation
    @BrittBarak
    phoneCall
    singleTask

    View full-size slide

  41. @BrittBarak
    conversationList
    conversation conversation
    @BrittBarak
    phoneCall
    singleTask

    View full-size slide

  42. @BrittBarak
    conversationList
    conversation
    phoneCall
    singleTask
    conversation
    @BrittBarak
    phoneCall
    singleTask

    View full-size slide

  43. @BrittBarak
    conversationList
    conversation
    phoneCall
    singleTask
    @BrittBarak
    phoneCall
    singleTask

    View full-size slide

  44. @BrittBarak
    conversationList
    conversation onNewIntent( )
    @BrittBarak
    phoneCall
    singleTask

    View full-size slide

  45. @BrittBarak
    conversationList
    conversation
    phoneCall
    singleTask
    @BrittBarak

    View full-size slide

  46. @BrittBarak
    conversationList
    conversation
    phoneCall
    singleTask
    @BrittBarak

    View full-size slide

  47. @BrittBarak
    conversationList
    conversation
    @BrittBarak

    View full-size slide

  48. @BrittBarak
    conversationList
    conversation

    View full-size slide

  49. @BrittBarak
    conversationList

    View full-size slide

  50. @BrittBarak
    conversation
    phoneCall
    singleTask

    View full-size slide

  51. @BrittBarak
    Single Instance

    View full-size slide

  52. @BrittBarak
    conversationList

    View full-size slide

  53. @BrittBarak
    conversationList
    conversation

    View full-size slide

  54. @BrittBarak
    conversationList
    phoneCall
    singleInstance
    conversation

    View full-size slide

  55. @BrittBarak
    conversationList
    phoneCall
    singleInstance
    conversation
    @BrittBarak

    View full-size slide

  56. @BrittBarak
    conversationList phoneCall
    singleInstance
    conversation
    @BrittBarak

    View full-size slide

  57. @BrittBarak
    conversationList phoneCall
    singleInstance
    conversation
    @BrittBarak

    View full-size slide

  58. @BrittBarak
    conversationList
    conversation
    phoneCall
    singleInstance
    conversation
    @BrittBarak
    Nah ah!

    View full-size slide

  59. @BrittBarak
    conversationList
    conversation
    phoneCall
    singleInstance
    conversation
    @BrittBarak

    View full-size slide

  60. @BrittBarak
    conversationList
    conversation
    phoneCall
    singleInstance
    conversation
    @BrittBarak

    View full-size slide

  61. @BrittBarak
    conversationList
    conversation
    phoneCall
    singleInstance
    conversation
    phoneCall
    singleInstance
    @BrittBarak

    View full-size slide

  62. @BrittBarak
    conversationList
    conversation
    phoneCall
    singleInstance
    phoneCall
    singleInstance
    conversation
    @BrittBarak

    View full-size slide

  63. @BrittBarak
    conversationList
    conversation
    phoneCall
    singleInstance
    onNewIntent( )
    conversation
    @BrittBarak

    View full-size slide

  64. @BrittBarak
    conversationList phoneCall
    singleInstance
    conversation
    conversation
    @BrittBarak

    View full-size slide

  65. @BrittBarak
    Make your task visible!!
    @BrittBarak

    View full-size slide

  66. @BrittBarak
    Document

    View full-size slide

  67. @BrittBarak
    We’re done!
    we have only Activities!

    @BrittBarak

    View full-size slide

  68. @BrittBarak

    Expect when we don’t.
    Because sometime,
    we won’t
    @BrittBarak

    View full-size slide

  69. @BrittBarak
    App
    Activity
    Activities are welcome!
    com.nexmo.brittApp
    @BrittBarak

    View full-size slide

  70. @BrittBarak
    App
    Activity
    Activities are welcome!
    com.nexmo.brittApp
    Fragment1
    @BrittBarak

    View full-size slide

  71. @BrittBarak
    App
    Activity
    Activities are welcome!
    com.nexmo.brittApp
    Fragment1
    Fragment2
    @BrittBarak

    View full-size slide

  72. @BrittBarak
    App
    Activity
    Activities are welcome!
    com.nexmo.brittApp
    Fragment1
    Fragment2
    @BrittBarak

    View full-size slide

  73. @BrittBarak
    App
    Activity
    Activities are welcome!
    com.nexmo.brittApp
    Fragment1
    @BrittBarak

    View full-size slide

  74. @BrittBarak
    App
    Activities are welcome!
    com.nexmo.brittApp
    @BrittBarak

    View full-size slide

  75. @BrittBarak
    @BrittBarak

    View full-size slide

  76. @BrittBarak
    NavigationComponent
    • Alpha
    • Android Studio 3.2+
    • Focus on Fragments on a single Activity

    View full-size slide

  77. @BrittBarak
    android:id="@+id/nav_graph">
    //. . .

    View full-size slide

  78. @BrittBarak
    @BrittBarak

    View full-size slide

  79. @BrittBarak
    1. Choose Destinations

    View full-size slide

  80. @BrittBarak
    @BrittBarak

    View full-size slide

  81. @BrittBarak
    convoList conversation
    phoneCall
    Search
    newConvo
    Video
    Text

    View full-size slide

  82. @BrittBarak
    convoList

    View full-size slide

  83. @BrittBarak
    2. Build Flow

    View full-size slide

  84. @BrittBarak
    convoList conversation

    View full-size slide

  85. @BrittBarak
    convoList conversation
    phoneCall
    Search
    newConvo
    Video
    Text

    View full-size slide

  86. @BrittBarak
    convoList conversation
    phoneCall
    Search
    newConvo
    Video
    Text

    View full-size slide

  87. @BrittBarak
    3. Host the Graph

    View full-size slide

  88. @BrittBarak
    Host the Graph
    NavHost
    layout_activity.xml

    View full-size slide

  89. @BrittBarak
    Host the Graph
    NavHostFragment
    NavHost

    View full-size slide

  90. @BrittBarak
    layout_activity.xml

    View full-size slide

  91. @BrittBarak
    layout_activity.xml
    …/>

    View full-size slide

  92. @BrittBarak
    layout_activity.xml
    android:id=“@+id/nav_host_fragment"
    …/>

    View full-size slide

  93. @BrittBarak
    layout_activity.xml
    android:id=“@+id/nav_host_fragment"
    android:name= “androidx.navigation.fragment.
    NavHostFragment"
    …/>

    View full-size slide

  94. @BrittBarak
    layout_activity.xml
    android:id=“@+id/nav_host_fragment"
    android:name= “androidx.navigation.fragment.
    NavHostFragment"
    app:navGraph="@navigation/nav_graph"
    …/>

    View full-size slide

  95. @BrittBarak
    layout_activity.xml
    android:id=“@+id/nav_host_fragment"
    android:name= “androidx.navigation.fragment.
    NavHostFragment"
    app:navGraph="@navigation/nav_graph"
    app:defaultNavHost=“true”
    …/>

    View full-size slide

  96. @BrittBarak
    4. Attach NavHost to UP
    override fun onSupportNavigateUp()=
    findNavController(R.id.nav_host_fragment)
    .navigateUp()

    View full-size slide

  97. @BrittBarak
    5. Navigate
    1. Find NavHost
    •NavHostFragment.findNavController(Fragment)
    •Navigation.findNavController(Activity, int viewId)
    •Navigation.findNavController(View)


    View full-size slide

  98. @BrittBarak
    5. Navigate
    2. Execute navigation
    navController.
    navigate(R.id.viewTransactionsAction)

    View full-size slide

  99. @BrittBarak
    5.1 Navigate from Menu
    android:id=“@+id/convo_list_frag”
    android:icon=“@drawable/ic_list”
    android:title=“@string/all_convos”/>

    View full-size slide

  100. @BrittBarak
    5.1 Navigate from Menu
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
    }

    View full-size slide

  101. @BrittBarak
    5.1 Navigate from Menu
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return NavigationUI.
    onNavDestinationSelected(item,navController)
    }

    View full-size slide

  102. @BrittBarak
    5.1 Navigate from Menu
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return NavigationUI.
    onNavDestinationSelected(item,navController)
    || super.onOptionsItemSelected(item)
    }

    View full-size slide

  103. @BrittBarak
    convoList conversation
    ConvId

    View full-size slide

  104. @BrittBarak
    SafeArgs

    View full-size slide

  105. @BrittBarak
    convoList conversation
    ConvId
    convoListDirection conversationArgs

    View full-size slide

  106. @BrittBarak
    conversationListFragment
    val action =
    ConvoListDirections.

    View full-size slide

  107. @BrittBarak
    conversationListFragment
    val action =
    ConvoListDirections.
    openConvAction(myConversationId)

    View full-size slide

  108. @BrittBarak
    conversationListFragment
    val action =
    ConvoListDirections.
    openConvAction(myConversationId)
    navController.navigate(action)

    View full-size slide

  109. @BrittBarak
    ConversationFragment
    val id =
    ConversationFragmentArgs.

    View full-size slide

  110. @BrittBarak
    ConversationFragment
    val id =
    ConversationFragmentArgs.
    fromBundle(arguments).convId

    View full-size slide

  111. @BrittBarak
    Deeplinks
    • Url link
    • PendingIntent
    • from a notification / widget / slice

    View full-size slide

  112. @BrittBarak
    AndroidManifest.xml




    View full-size slide

  113. @BrittBarak
    PendingIntent for Deeplinks
    PendingIntent deeplink =
    navController.createDeepLink()
    .setDestination(R.id.conversationFragment)
    .setArguments(args)
    .createPendingIntent();

    View full-size slide

  114. @BrittBarak
    PendingIntent for Deeplinks
    PendingIntent deeplink =
    navController.createDeepLink()
    .setDestination(R.id.conversationFragment)
    .setArguments(args)
    .createPendingIntent();

    View full-size slide

  115. @BrittBarak
    PendingIntent for Deeplinks
    PendingIntent deeplink =
    navController.createDeepLink()
    .setDestination(R.id.conversationFragment)
    .setArguments(args)
    .createPendingIntent();

    View full-size slide

  116. @BrittBarak
    convoList conversation
    Handles Back Stack

    View full-size slide

  117. @BrittBarak
    What else can we do with Actions

    View full-size slide

  118. @BrittBarak
    What else can we do with Actions

    View full-size slide

  119. @BrittBarak
    What else can we do with Actions

    View full-size slide

  120. @BrittBarak
    ChatFragment
    CallFragment

    View full-size slide

  121. @BrittBarak
    ChatFragment
    CallFragment
    Enter
    Exit

    View full-size slide

  122. @BrittBarak
    ChatFragment
    CallFragment

    View full-size slide

  123. @BrittBarak
    ChatFragment
    CallFragment

    View full-size slide

  124. @BrittBarak
    ChatFragment
    PopEnter
    PopExit
    CallFragment

    View full-size slide

  125. @BrittBarak
    @BrittBarak

    View full-size slide

  126. @BrittBarak
    “And will you succeed?
    Yes! You will, indeed!
    (98 an 3/4 percent guaranteed)”
    DEV, you’ll move fragments!
    @BrittBarak

    View full-size slide

  127. @BrittBarak
    Thank you!
    Keep in touch
    @BrittBarak

    View full-size slide