Working with Fragments and Keeping Your Sanity - DroidCon Zagreb 2016

At a first glance fragments may seem simple enough to use, however diving deeper reveals that fragments have a complex lifecycle (~ 14 lifecycle methods), and a lot of edge cases and pitfalls that need to be given special attention.

Transcript

1. Working with Fragments Keeping your SANITY &
2. Consumer Product Center Ido Feins Android Tech Lead
4. paypal.me/ifeins
6. Why Fragments? • Multi-pane UI. • Greater flexibility: • As many methods as you like. • Pass non Parcelable/Serializable objects. • What about the bad stuff?
7. Agenda • Fragments lifecycle • Transitioning between fragments • Handling rotation
8. Case Study: PayPal Send Money flow Click me!
9. ContactFragment AmountFragment ReviewFragment SpinnerFragment
10. Fragments Lifecycle
11. onCreate onCreateView onViewCreated onActivityCreated onSaveInstanceState onViewStateRestored onDestroyView onAttach onDetach onStart onPause onStop onResume onDestroy
12. 14 LIFECYCLE METHODS ?!?!?!
13. • Fragment state • View state
14. mSelectedCurrency mContact mMoneyView mCurrencyLabel mNumberPadView mAmount mNextButtonListener
15. Why do we even need to store state?
16. Fragment state class AmountFragment extends Fragment { onCreate(Bundle state) { if (state != null) { mSelectedCurrency = state.getState("state_currency"); } } }
17. Fragment state class AmountFragment extends Fragment { onCreate(Bundle state) { if (state != null) { mSelectedCurrency = state.getState("state_currency"); class AmountFragment extends Fragment { } else { Bundle args = getArguments(); mSelectedCurrency = args.getString("arg_default_curr"); } } }
18. Fragment state class AmountFragment extends Fragment { onCreate(Bundle state) {...} onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); outState.putString("state_currency", mSelectedCurrency); } } class AmountFragment extends Fragment { onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); outState.putString("state_currency", mSelectedCurrency); } }
19. View state class AmountFragment extends Fragment { onCreate(Bundle state) {...} onSaveInstanceState(Bundle outState) {...} onCreateView(LayoutInflater inflater, ...) { View view = inflater.inflate(...); mMoneyView = (MoneyView) view.findViewById(...); mMoneyView.setCurrency(mSelectedCurrency); return view; } } class AmountFragment extends Fragment { onCreateView(LayoutInflater inflater, ...) { View view = inflater.inflate(...); mMoneyView = (MoneyView) view.findViewById(...); mMoneyView.setCurrency(mSelectedCurrency); return view; } }
20. View state class AmountFragment extends Fragment { onCreate(Bundle savedInstanceState) {...} onSaveInstanceState(Bundle outState) {...} onCreateView(LayoutInflater inflater, ...) {...} onDestroyView() { mMoneyView = null; super.onDestroyView(); } } onDestroyView() { mMoneyView = null; super.onDestroyView(); }
21. What happens when we get it wrong? class AmountFragment extends Fragment { onCreateView(...) { View view = inflater.inflate(...); mMoneyView = (MoneyView) view.findViewById(...); if (state != null) { // can be overridden with null! mSelectedCurrency = state.getState("state_currency"); } mMoneyView.setCurrency(mSelectedCurrency); } }
22. What happens when we get it wrong? class AmountFragment extends Fragment { onCreateView(...) { View view = inflater.inflate(...); mMoneyView = (MoneyView) view.findViewById(...); if (state != null) { // can be overridden with null! mSelectedCurrency = state.getState("state_currency"); } mMoneyView.setCurrency(mSelectedCurrency); } } class AmountFragment extends Fragment { if (state != null) { // can be overridden with null! mSelectedCurrency = state.getState("state_currency"); } } }
23. onDestroyView onCreateView
24. What about saving view state?
25. onSaveInstanceState(Bundle outState) { outState.putBoolean("state_del_enabled", mNumPadView.isDelEnabled()) } Delete button enabled? NumPadView
26. Rotation Rotation onDestroyView onSaveInstanceState
27. class AmountFragment extends Fragment { onCreate(SavedInstanceState state) { if (state != null) { mAmount = state.getState("state_amount"); } else { mAmount = 0; } } onCreateView(...) { mNumPadView.setDelEnabled(mAmount > 0); } }
28. class NumPadView extends GridLayout { setDelEnabled(boolean enabled) { mDeleteButton.setEnabled(enabled); mDelEnabled = enabled; } Parcelable onSaveInstanceState() { ... SavedState savedState = new SavedState(superState); savedState.mDelEnabled = mDelEnabled; return savedState; } onRestoreInstanceState(Parcelable state) { ... setDelEnabled(savedState.mDelEnabled); } }
29. Don’t mix fragment and view state Fragment’s state - onCreate, onSaveInstanceState View’s state - onCreateView, SavedState, onDestroyView
30. Transitioning between fragments
31. FragmentTransaction private void moveToAmountFragment() { AmountFragment amountFragment = new AmountFragment(); FragmentTransaction transaction = beginTransaction(); transaction.addToBackStack(null); transaction.replace(R.id.container, amountFragment); transaction.commit(); }
32. layout_activity.xml FrameLayout @id/container <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Fragments go here! --> </FrameLayout> layout_activity.xml
33. Add or replace? private void moveToAmountFragment() { AmountFragment amountFragment = new AmountFragment(); FragmentTransaction transaction = beginTransaction(); transaction.addToBackStack(null); transaction.commit(); } private void moveToAmountFragment() { transaction.replace(R.id.container, amountFragment); }
34. layout_activity.xml FrameLayout @id/container layout_activity.xml FrameLayout @id/container Replace
35. layout_activity.xml FrameLayout @id/container layout_activity.xml FrameLayout @id/container Add
36. To add or not to add (to backstack)? private void moveToAmountFragment() { AmountFragment amountFragment = new AmountFragment(); FragmentTransaction transaction = beginTransaction(); transaction.replace(R.id.container, amountFragment); transaction.commit(); } private void moveToAmountFragment() { transaction.addToBackStack(null); }
37. ✓
38. ✘
39. Committing transactions private void moveToAmountFragment() { AmountFragment amountFragment = new AmountFragment(); FragmentTransaction transaction = beginTransaction(); transaction.addToBackStack(null); transaction.replace(R.id.container, amountFragment); transaction.commit(); } transaction.commit();
40. When to commit?
41. IllegalStateException: Can not perform this action after onSaveInstanceState at android.support.v4.app.FragmentManagerImpl.checkStateLoss at android.support.v4.app.FragmentManagerImpl.enqueueAction at android.support.v4.app.BackStackRecord.commitInternal at android.support.v4.app.BackStackRecord.commit
42. onCreate
43. onCreate onStart
44. onCreate onStart
45. onCreate onStart onResume
46. onCreate onStart onResume Running activity
47. onCreate onStart onResume Running activity onPause
48. onCreate onStart onResume Running activity onPause onSaveInstanceState
49. onCreate onStart onResume Running activity onPause onSaveInstanceState onStop
50. onCreate onStart onResume Running activity onPause onSaveInstanceState onStop onDestroy
51. onCreate onStart onResume Running activity onPause onSaveInstanceState onStop onDestroy
52. • Unsafe: • onActivityResult • onRequestPermissionsResult • Async callbacks
53. SendMoneyFlowActivity AddPaymentFlowActivity startActivityForResult onActivityResult
54. onActivityResult onActivityResult(int reqCode, ...) { if (reqCode == LINK_CARD_CODE) { mCardLinked = true; } }
55. onActivityResult onResumeFragments() { super.onResumeFragments(); if (mCardLinked) { mCardLinked = false; SpinnerFragment spinner = new SpinnerFragment(); FragmentTransaction transaction = beginTransaction(); transaction.replace(R.id.container, spinner); transaction.commit(); // re-run send money } }
56. Async callbacks public void onSendMoneyResult(SendMoneyResult result) { if (mResumedFragments) { moveToSuccessPage(result); // commits transaction } else { mRetainedFragment.setResult(result); } }
57. Async callbacks protected void onResumeFragments() { super.onResumeFragments(); mResumedFragments = true; SendMoneyResult result = mRetainedFragment.getResult(); if (result != null && <not already in success page>) { moveToSuccessPage(result); } }
58. Use FragmentTransaction.replace (90% of the cases) Don’t add intermediate pages to backstack Safe commits: onCreate onResumeFragments Unsafe commits: onActivityResult / onRequestPermissionResult Async callbacks
59. Handling rotation
60. • Avoiding stale objects • Avoiding duplicate “work” • State restoration (Bundle) • Commit transactions in safe points • Avoiding stale objects • Avoiding duplicate “work”
61. Avoiding stale objects
62. class ContactFragment extends Fragment { displayContacts(List<Contact> contacts) { ... } private class FetchContactsTask extends AsyncTask { List<Contact> doInBackground(...) { // fetch contacts from the server } onPostExecute(List<Contact> contacts) { // = ContactFragment.this.displayContacts(contacts) displayContacts(contacts); } } }
63. class ContactFragment extends Fragment { displayContacts(List<Contact> contacts) { ... } private class FetchContactsTask extends AsyncTask { List<Contact> doInBackground(...) { // fetch contacts from the server } onPostExecute(List<Contact> contacts) { // = ContactFragment.this.displayContacts(contacts) displayContacts(contacts); } } } onPostExecute(List<Contact> contacts) { // = ContactFragment.this.displayContacts(contacts) displayContacts(contacts); }
64. AsyncTask fetchContacts result ContactFragment #1 execute ContactFragment #2 Rotation result F A I L
65. Do not use AsyncTask
66. Use Loaders They automatically reconnect to the last loader's cursor when being recreated after a configuration change.
67. class ContactFragment implements LoaderCallbacks<Long> { displayContacts(List<Contact> contacts) { ... } onResume() { getLoaderManager().initLoader(LOADER_ID, null, this); } Loader<Long> onCreateLoader(...) { return new ContactsLoader(getContext()); } onLoadFinished(..., List<Contact> contacts) { displayContacts(contacts); } }
68. class ContactFragment implements LoaderCallbacks<Long> { displayContacts(List<Contact> contacts) { ... } onResume() { getLoaderManager().initLoader(LOADER_ID, null, this); } Loader<Long> onCreateLoader(...) { return new ContactsLoader(getContext()); } onLoadFinished(..., List<Contact> contacts) { displayContacts(contacts); } } class ContactFragment implements LoaderCallbacks<Long> { Loader<Long> onCreateLoader(...) { return new ContactsLoader(getContext()); } onLoadFinished(..., List<Contact> contacts) { displayContacts(contacts); } }
69. onResume() { getLoaderManager().initLoader(LOADER_ID, null, this); } class ContactFragment implements LoaderCallbacks<Long> { displayContacts(List<Contact> contacts) { ... } onResume() { getLoaderManager().initLoader(LOADER_ID, null, this); } Loader<Long> onCreateLoader(...) { return new ContactsLoader(getContext()); } onLoadFinished(..., List<Contact> contacts) { displayContacts(contacts); } }
70. Loader fetchContacts result ContactFragment #1 onResume: initLoader ContactFragment #2 Rotation onResume: initLoader result
71. Avoiding Duplicate Work
72. Use Loaders They automatically reconnect to the last loader's cursor when being recreated after a configuration change. Thus, they don't need to re-query their data.
73. Just Loaders?
74. Retained Fragments
75. class OperationFragment extends Fragment { public interface Listener { void onSuccess(Result result); } onCreate(Bundle state) { super.onCreate(state); setRetainInstance(true); } sendMoney(Contact contact, MoneyValue amount) { execute(new OperationListener() { onSuccess(result) { ((Listener) getActivity()).onSuccess(result); } }); } }
76. class OperationFragment extends Fragment { public interface Listener { void onSuccess(Result result); } onCreate(Bundle state) { super.onCreate(state); setRetainInstance(true); } sendMoney(Contact contact, MoneyValue amount) { execute(new OperationListener() { onSuccess(result) { ((Listener) getActivity()).onSuccess(result); } }); } } onCreate(Bundle state) { super.onCreate(state); setRetainInstance(true); }
77. class OperationFragment extends Fragment { public interface Listener { void onSuccess(Result result); } onCreate(Bundle state) { super.onCreate(state); setRetainInstance(true); } sendMoney(Contact contact, MoneyValue amount) { execute(new OperationListener() { onSuccess(result) { ((Listener) getActivity()).onSuccess(result); } }); } } public interface Listener { void onSuccess(Result result); }
78. class OperationFragment extends Fragment { public interface Listener { void onSuccess(Result result); } onCreate(Bundle state) { super.onCreate(state); setRetainInstance(true); } sendMoney(Contact contact, MoneyValue amount) { execute(new OperationListener() { onSuccess(result) { ((Listener) getActivity()).onSuccess(result); } }); } } sendMoney(Contact contact, MoneyValue amount) { execute(new OperationListener() { onSuccess(result) { ((Listener) getActivity()).onSuccess(result); } }); }
79. class SendMoneyFlowActivity { onCreate(...) { mOpFragment = findFragmentByTag(OP_FRAGMENT_TAG); if (mOpFragment == null) { mOpFragment = new OperationFragment(); FragmentTransaction transaction = beginTransaction(); transaction.add(mOpFragment, OP_FRAGMENT_TAG); transaction.commit(); } } onAmountSelected(MoneyValue amount) { mOpFragment.sendMoney(mContact, amount); } }
80. class SendMoneyFlowActivity { onCreate(...) { mOpFragment = findFragmentByTag(OP_FRAGMENT_TAG); if (mOpFragment == null) { mOpFragment = new OperationFragment(); FragmentTransaction transaction = beginTransaction(); transaction.add(mOpFragment, OP_FRAGMENT_TAG); transaction.commit(); } } onAmountSelected(MoneyValue amount) { mOpFragment.sendMoney(mContact, amount); } } class SendMoneyFlowActivity { onCreate(...) { mOpFragment = findFragmentByTag(OP_FRAGMENT_TAG); } }
81. class SendMoneyFlowActivity { onCreate(...) { mOpFragment = findFragmentByTag(OP_FRAGMENT_TAG); if (mOpFragment == null) { mOpFragment = new OperationFragment(); FragmentTransaction transaction = beginTransaction(); transaction.add(mOpFragment, OP_FRAGMENT_TAG); transaction.commit(); } } onAmountSelected(MoneyValue amount) { mOpFragment.sendMoney(mContact, amount); } } if (mOpFragment == null) { mOpFragment = new OperationFragment(); FragmentTransaction transaction = beginTransaction(); transaction.add(mOpFragment, OP_FRAGMENT_TAG); transaction.commit(); }
82. class SendMoneyFlowActivity { onCreate(...) { mOpFragment = findFragmentByTag(OP_FRAGMENT_TAG); if (mOpFragment == null) { mOpFragment = new OperationFragment(); FragmentTransaction transaction = beginTransaction(); transaction.add(mOpFragment, OP_FRAGMENT_TAG); transaction.commit(); } } onAmountSelected(MoneyValue amount) { mOpFragment.sendMoney(mContact, amount); } } onAmountSelected(MoneyValue amount) { mOpFragment.sendMoney(mContact, amount); }
83. Android Service? • Modes of operation: • Bound • Started
84. Rotation is your friend :)
86. Thank you! @ifeins