Droidcon Berlin: Navigation and the Single Activity: Learnings from a Skeptic

Fragments have often been the controversial, and to some, the stuff of nightmares, with the inconsistency of lifecycle events, complex UI interaction, and unexpected behaviours making many Android developers suspicious of their usage.

But with the development and recent stable publication of the navigation library, it may be the right time to give them a chance. Giving Fragments a second chance is not something I’d ever thought I’d be saying, but it’s a fantastic opportunity to find a solution to sharing data across a single screen.

Explore with me as I walk you through my experience implementing the navigation library and safeargs, and how I used them to implement type safe argument bindings, and how you can utilise the once troubled framework type to your advantage.

Transcript

1. Navigation and the Single Activity
   Learnings from a Skeptic
   @askashdavies
   

   View Slide

2. Random Slides
   Cheese
   @askashdavies
   

   View Slide

3. Navigation and the Single Activity
   Learnings from a Skeptic
   @askashdavies
   

   View Slide

4. @askashdavies
   

   View Slide

5. @askashdavies
   

   View Slide

6. class MainActivity : AppCompatActivity {
   private val message: EditText
   get() = findViewById(R.id.message)
   override fun onCreate(savedInstanceState: Bundle) {
   /* ... */
   }
   fun sendMessage() {
   val intent = Intent(this, DisplayMessageActivity::class.java)
   intent.putExtra(DisplayMessageActivity.EXTRA_MESSAGE, message.text.toString())
   startActivity(intent)
   }
   }
   @askashdavies
   

   View Slide

7. !
   @askashdavies
   

   View Slide

8. "Once we have gotten in to this entry-point to your UI, we really
   don't care how you organise the flow inside."
   — Dianne Hackborn, Android Framework team, 2016
   @askashdavies
   

   View Slide

9. !
   @askashdavies
   

   View Slide

10. View Slide

11. public class MainActivity extends FragmentActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.news_articles);
    // Check that the activity is using the layout version with the fragment_container FrameLayout
    if (findViewById(R.id.fragment_container) != null) {
    // However, if we're being restored from a previous state, then we don't need to do anything,
    // and should return or else we could end up with overlapping fragments.
    if (savedInstanceState != null) {
    return;
    }
    // Create a new Fragment to be placed in the activity layout
    HeadlinesFragment firstFragment = new HeadlinesFragment();
    // In case this activity was started with special instructions from an
    // Intent, pass the Intent's extras to the fragment as arguments
    firstFragment.setArguments(getIntent().getExtras());
    // Add the fragment to the 'fragment_container' FrameLayout
    getSupportFragmentManager()
    .beginTransaction()
    .add(R.id.fragment_container, firstFragment)
    .commit();
    }
    }
    }
    @askashdavies
    

    View Slide

12. public class MainActivity extends FragmentActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.news_articles);
    // Check that the activity is using the layout version with the fragment_container FrameLayout
    if (findViewById(R.id.fragment_container) != null) {
    // However, if we're being restored from a previous state, then we don't need to do anything,
    // and should return or else we could end up with overlapping fragments.
    if (savedInstanceState != null) {
    return;
    }
    // Create a new Fragment to be placed in the activity layout
    HeadlinesFragment firstFragment = new HeadlinesFragment();
    // In case this activity was started with special instructions from an
    // Intent, pass the Intent's extras to the fragment as arguments
    firstFragment.setArguments(getIntent().getExtras());
    // Add the fragment to the 'fragment_container' FrameLayout
    getSupportFragmentManager()
    .beginTransaction()
    .add(R.id.fragment_container, firstFragment)
    .commit();
    }
    }
    }
    @askashdavies
    

    View Slide

13. public class MainActivity extends FragmentActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.news_articles);
    // Check that the activity is using the layout version with the fragment_container FrameLayout
    if (findViewById(R.id.fragment_container) != null) {
    // However, if we're being restored from a previous state, then we don't need to do anything,
    // and should return or else we could end up with overlapping fragments.
    if (savedInstanceState != null) {
    return;
    }
    // Create a new Fragment to be placed in the activity layout
    HeadlinesFragment firstFragment = new HeadlinesFragment();
    // In case this activity was started with special instructions from an
    // Intent, pass the Intent's extras to the fragment as arguments
    firstFragment.setArguments(getIntent().getExtras());
    // Add the fragment to the 'fragment_container' FrameLayout
    getSupportFragmentManager()
    .beginTransaction()
    .add(R.id.fragment_container, firstFragment)
    .commit();
    }
    }
    }
    @askashdavies
    

    View Slide

14. Activity Lifecycle != Fragment Lifecycle
    @askashdavies
    

    View Slide

15. Activity Lifecycle != Fragment Lifecycle != View Lifecycle
    @askashdavies
    

    View Slide

16. Jose Alcerreca | Lifecycles cheet sheet beta1 (AndroidP/Jetpack 1.0)
    

    View Slide

17. ➡ ⬆ ➡
    @askashdavies
    

    View Slide

18. (supportFragmentManager || childFragmentManager)?
    @askashdavies
    

    View Slide

19. @askashdavies
    

    View Slide

20. Bundles
    @askashdavies
    

    View Slide

21. FragmentFactory
    androidx.fragment:fragment:1.1.0-beta01
    @askashdavies
    

    View Slide

22. Fragments?
    @askashdavies
    

    View Slide

23. Fragments?
    @askashdavies
    

    View Slide

24. Activity Capabilities
    @askashdavies
    

    View Slide

25. Shared Element
    Transition (API 21+)
    @askashdavies
    

    View Slide

26. CompatShims < Enough
    @askashdavies
    

    View Slide

27. android.app.Fragment
    androidx.fragment.app.Fragment
    @askashdavies
    

    View Slide

28. Scopes
    @askashdavies
    

    View Slide

29. Scopes
    @askashdavies
    

    View Slide

30. Scopes
    @askashdavies
    

    View Slide

31. Scopes
    @askashdavies
    

    View Slide

32. !"
    @askashdavies
    

    View Slide

33. @askashdavies
    

    View Slide

34. @askashdavies
    

    View Slide

35. Android JetPack
    @askashdavies
    

    View Slide

36. Android JetPack
    @askashdavies
    

    View Slide

37. Android JetPack
    @askashdavies
    

    View Slide

38. Android JetPack
    @askashdavies
    

    View Slide

39. Android JetPack: Navigation
    @askashdavies
    

    View Slide

40. Android JetPack: Navigation
    • Libraries
    !
    • Plugin
    "
    • Tooling
    #
    @askashdavies
    

    View Slide

41. • Fragment transactions
    • Up and back actions
    • Standardised transition resources
    • Deep link implementation
    • Easy navigation patterns
    • Type safe arguments
    @askashdavies
    

    View Slide

42. Principles of Navigation
    @askashdavies
    

    View Slide

43. Fixed Start Destination
    @askashdavies
    

    View Slide

44. State as Stack
    @askashdavies
    

    View Slide

45. ⬆
    @askashdavies
    

    View Slide

46. ⬆
    @askashdavies
    

    View Slide

47. Deep Link Simulates Manual Navigation
    @askashdavies
    

    View Slide

48. JetPack: Navigation
    @askashdavies
    

    View Slide

49. Navigation Graph
    @askashdavies
    

    View Slide

50. View Slide

51. Destination Types
    • Activity
    • Fragment
    • Dialog (2.1.0+)
    @askashdavies
    

    View Slide

52. Destination Types (Custom)
    developer.android.com/guide/navigation/navigation-add-new
    • Extend Navigator with your type
    • Provide Destination implementation
    • Configure arguments after inflation
    • Augment NavController
    @askashdavies
    

    View Slide

53. nav_graph.xml
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/navigation"
    app:startDestination="@+id/fragmentMain">
    android:id="@+id/fragmentMain"
    android:name="com.google.sample.MainFragment"
    android:label="@string/main_title"
    tools:layout="@layout/main_fragment">
    android:id="@+id/mainToViewBalance"
    app:destination="@+id/fragmentViewBalance"/>
    
    android:id="@+id/fragmentViewBalance"
    android:name="com.google.sample.ViewBalanceFragment"
    android:label="@string/view_balance_title"
    tools:layout="@layout/view_balance_fragment" />
    
    @askashdavies
    

    View Slide

54. Resource Inflation
    @askashdavies
    

    View Slide

55. NavHostFragment
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:navGraph="@navigation/nav_graph" />
    @askashdavies
    

    View Slide

56. NavController
    • Fragment.findNavController()
    • View.findNavController()
    • Activity.findNavController(viewId: Int)
    @askashdavies
    

    View Slide

57. Actions
    viewTransactionsButton.setOnClickListener { view ->
    view.findNavController().navigate(R.id.viewTransactionsAction)
    }
    button.setOnClickListener(
    Navigation.createNavigateOnClickListener(R.id.next_fragment, null)
    )
    @askashdavies
    

    View Slide

58. Deep Links
    @askashdavies
    

    View Slide

59. Deep Links
    
    package="com.example.myapplication">
    
    
    ...
    
    ...
    
    
    
    @askashdavies
    

    View Slide

60. Deep Links
    android:id="@+id/profile"
    android:name=".ProfileActivity">
    
    
    @askashdavies
    

    View Slide

61. Navigation Styles
    @askashdavies
    

    View Slide

62. Navigation Styles
    Toolbar
    @askashdavies
    

    View Slide

63. Navigation Styles
    Bottom
    @askashdavies
    

    View Slide

64. Navigation Styles
    Drawer
    @askashdavies
    

    View Slide

65. NavigationUI
    setupWithNavController()
    @askashdavies
    

    View Slide

66. class AwesomeActivity : AppCompatActivity() {
    private val controller: NavController by lazy(NONE) { findNavController(this, R.id.host) }
    private val drawer: DrawerLayout by lazy(NONE) { findViewById(R.id.drawer) }
    private val toolbar: Toolbar by lazy(NONE) { findViewById(R.id.toolbar) }
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.awesome_activity)
    toolbar.setupWithNavController(controller, drawer)
    }
    }
    @askashdavies
    

    View Slide

67. NavigationUI
    NavigationUI.setupActionBarWithNavController(
    activity: AppCompatActivity,
    controller: NavController,
    configuration: AppBarConfiguration
    )
    NavigationUI.setupWithNavController(
    toolbar: Toolbar,
    controller: NavController,
    configuration: AppBarConfiguration
    )
    @askashdavies
    

    View Slide

68. NavigationUI: AppBarConfiguration
    • Top level destinations
    • Drawer layout
    • Fallback "up" listener
    @askashdavies
    

    View Slide

69. OnDestinationChangedListener
    NavController.addOnDestinationChangedListener
    interface OnDestinationChangedListener {
    fun onDestinationChanged(
    controller: NavController,
    destination: NavDestination,
    arguments: Bundle?
    );
    }
    @askashdavies
    

    View Slide

70. Bundles
    @askashdavies
    

    View Slide

71. Honourable Mention
    Eugenio Marletti: Android Extras Delegates
    github.com/Takhion/android-extras-delegates
    @askashdavies
    

    View Slide

72. Android Extras Delegates
    class SomeActivity : Activity() {
    companion object : ActivityCompanion(
    intentOptions = IntentOptions,
    kclass = SomeActivity::class
    )
    object IntentOptions {
    var Intent.someExtra by IntentExtra.String()
    }
    }
    @askashdavies
    

    View Slide

73. SafeArgs
    @askashdavies
    

    View Slide

74. SafeArgs: Directions
    MainFragmentDirections.mainToViewBalance()
    android:id="@+id/fragmentMain"
    android:name="com.google.sample.MainFragment"
    android:label="@string/main_title"
    tools:layout="@layout/main_fragment">
    android:id="@+id/mainToViewBalance"
    app:destination="@+id/fragmentViewBalance"/>
    
    @askashdavies
    

    View Slide

75. SafeArgs: Directions
    android:id="@+id/fragmentViewBalance"
    android:name="com.google.sample.ViewBalanceFragment"
    android:label="@string/view_balance_title"
    tools:layout="@layout/view_balance_fragment">
    android:name="balanceAmount"
    app:argType="integer"/>
    
    @askashdavies
    

    View Slide

76. SafeArgs: Args
    class MainFragment: Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    viewTransactionsButton.setOnClickListener { view ->
    MainFragmentDirections.mainToViewBalance(100)
    }
    }
    }
    class ViewBalanceFragment : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    val args = ViewBalanceFragmentArgs.fromBundle(arguments!!)
    balance.setText(String.format("%.2d", args.balanceAmount))
    }
    }
    @askashdavies
    

    View Slide

77. SafeArgs: Generated Args
    data class ViewBalanceFragmentArgs(val balanceAmount: Int) : NavArgs {
    @Suppress("CAST_NEVER_SUCCEEDS")
    fun toBundle(): Bundle {
    val result = Bundle()
    result.putInt("balanceAmount", this.balanceAmount)
    return result
    }
    companion object {
    @JvmStatic
    fun fromBundle(bundle: Bundle): FinanceBorrowerFragmentArgs {
    bundle.setClassLoader(FinanceBorrowerFragmentArgs::class.java.classLoader)
    val __balanceAmount : Int
    if (bundle.containsKey("balanceAmount")) {
    __balanceAmount = bundle.getInt("balanceAmount")
    } else {
    throw IllegalArgumentException("Required argument \"balanceAmount\" is missing and does not have an android:defaultValue")
    }
    return FinanceBorrowerFragmentArgs(__balanceAmount)
    }
    }
    }
    @askashdavies
    

    View Slide

78. SafeArgs: Generated Directions
    class MainFragmentDirections private constructor() {
    private data class MainToViewBalance(val balanceAmount: Int) : NavDirections {
    override fun getActionId(): Int = R.id.mainToViewBalance
    @Suppress("CAST_NEVER_SUCCEEDS")
    override fun getArguments(): Bundle {
    val result = Bundle()
    result.putInt("balanceAmount", this.index)
    return result
    }
    }
    companion object {
    fun mainToViewBalance(balanceAmount: Int): NavDirections = BorrowerToBorrower(index, financeBorrower)
    }
    }
    @askashdavies
    

    View Slide

79. Single Source of Truth
    @askashdavies
    

    View Slide

80. SafeArgs: Activities
    @askashdavies
    

    View Slide

81. SafeArgs: Activities
    class MainActivity : Activity {
    override fun onCreate(savedInstanceState: Bundle) {
    super.onCreate(savedInstanceState)
    val args = ViewBalanceActivityArgs(100)
    val intent = Intent(this, ViewBalanceActivity::class.java)
    startActivity(intent, bundle.toBundle())
    }
    }
    @askashdavies
    

    View Slide

82. SafeArgs: Getting Started
    buildscript {
    repositories {
    google()
    }
    dependencies {
    classpath "androidx.navigation:navigation-safe-args-gradle-plugin:2.0.0"
    }
    }
    apply plugin: 'androidx.navigation.safeargs.kotlin'
    @askashdavies
    

    View Slide

83. !
    Migrating
    @askashdavies
    

    View Slide

84. !
    Migrating
    @askashdavies
    

    View Slide

85. !
    Migrating
    Move screen behaviour away from activities
    @askashdavies
    

    View Slide

86. !
    Migrating
    Create new activity for Fragment's
    @askashdavies
    

    View Slide

87. !
    Migrating
    Move existing activity logic to fragment
    • FragmentBindings -> ActivityBindings
    •
    onCreate()
    ->
    onCreateView()
    •
    onViewCreated()
    •
    getViewLifecycleOwner()
    @askashdavies
    

    View Slide

88. !
    Migrating
    Initialise fragment in host activity
    @askashdavies
    

    View Slide

89. Initialise fragment in host activity
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.cheese_activity)
    if (savedInstanceState == null) {
    supportFragmentManager
    .beginTransaction()
    .add(R.id.main_content, CheeseListFragment())
    .commit()
    }
    fun navigateToCheeseDetail(productId: String) {
    ...
    }
    }
    @askashdavies
    

    View Slide

90. Pass arguments as necessary
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.cheese_activity)
    if (savedInstanceState == null) {
    val fragment = CheeseListFragment() //
    !
    fragment.arguments = intent.extras
    supportFragmentManager
    .beginTransaction()
    .add(R.id.main_content, fragment)
    .commit()
    }
    fun navigateToCheeseDetail(productId: String) {
    ...
    }
    }
    @askashdavies
    

    View Slide

91. !
    Migrating
    Create navigation graph
    @askashdavies
    

    View Slide

92. Create navigation graph
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:startDestination="@+id/cheeseGraph">
    android:id="@+id/cheeseListFragment"
    android:name="com.sample.CheeseListFragment"
    android:label="@string/cheese_list_title"
    tools:layout="@layout/cheese_list_fragment" />
    android:id="@+id/cheeseDetailsFragment"
    android:name="com.sample.CheeseDetailsFragment"
    android:label="@string/cheese_details_title"
    tools:layout="@layout/cheese_details_fragment" />
    
    @askashdavies
    

    View Slide

93. Create navigation host
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:name="androidx.navigation.fragment.NavHostFragment"
    app:navGraph="@navigation/cheese_list_graph"
    app:defaultNavHost="true" />
    @askashdavies
    

    View Slide

94. !
    Migrating
    class CheeseHostActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.cheese_activity)
    }
    }
    @askashdavies
    

    View Slide

95. Navigation Directions
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:startDestination="@+id/cheeseGraph">
    android:id="@+id/cheeseListFragment"
    android:name="com.sample.CheeseListFragment"
    android:label="@string/cheese_list_title"
    tools:layout="@layout/cheese_list_fragment">
    android:id="@+id/navigateToCheeseDetails"
    app:destination="@+id/cheeseDetailsFragment"/>
    
    android:id="@+id/cheeseDetailsFragment"
    android:name="com.sample.CheeseDetailsFragment"
    android:label="@string/cheese_details_title"
    tools:layout="@layout/cheese_details_fragment">
    android:name="cheeseId"
    app:argType="string" />
    
    
    @askashdavies
    

    View Slide

96. CheeseListFragment
    class CheeseListFragment : Fragment() {
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    cheeseAdapter = CheeseAdapter(cheeseClickCallback)
    binding.productsList.setAdapter(productAdapter)
    }
    ...
    // The callback makes the call to the activity to make the transition.
    private val productClickCallback = ProductClickCallback { cheese ->
    val directions = CheeseListDirections.navigateToCheeseDetails(cheese.id)
    findNavController().navigate(directions)
    }
    }
    @askashdavies
    

    View Slide

97. !
    Profit
    @askashdavies
    

    View Slide

98. onActivityResult?
    @askashdavies
    

    View Slide

99. onActivityResult
    https://issuetracker.google.com/issues/79672220
    @askashdavies
    

    View Slide

100. Jose Alcérreca: LiveData>
     http://bit.ly/2YuSYXi
     @askashdavies
     

     View Slide

101. Dynamic Features
     Coming Soon? ™
     @askashdavies
     

     View Slide

102. Ian Lake: Single Activity: Why, When, and How
     bit.ly/2Jo94x9
     

     View Slide

103. Thanks!
     @askashdavies
     

     View Slide