Material All The World - Android Developer Days 2015

This session gives you an insight of our migration to lollipop. The application shouldn't only used from Lollipop onwards. So we had to be downward compatible. I show you how to use the app-compat support library as well RecyclerView and CardView. It also contains some technics/ workarounds so we accomplish nearly the same look and feel of the application in different api levels. This talk doesn't go deep into animation, with is also a large part of Material. This session aims developers, who have already an application and for the ones, who want to create downward compatible ones.

Transcript

1. www.immobilienscout24.de www.immobilienscout24.de Material All the World Android Developer Days | 12.05.2015 | Hasan Hosgel
2. +HasanHosgel @alosdev alosdev alosdev CO-Organizer Developer About me Material All The World | Hasan Hosgel
3. About ImmobilienScout24 Germany’s largest real estate listing company. > 10.5 Mio. Monthly unique users > 1.5 Mio. real estates > 300 Mio. detail views > 1500 Servers > 10 Mio. App downloads > 5 Mio. Android > 60% mobile traffic Material All The World | Hasan Hosgel
4. Current State phone Material All The World | Hasan Hosgel
5. Current State 7 inch Material All The World | Hasan Hosgel
6. We are smart developers Image Source https://www.flickr.com/photos/theinfamousgdub/1765952198 Material All The World | Hasan Hosgel
7. Our First Migration Idea Material All The World | Hasan Hosgel Rewrite complete UI Layer
8. Our First Migration Idea Material All The World | Hasan Hosgel Rewrite complete UI Layer • Pro "   Everything new "   State of the art "   New employees understand the complex code
9. Our First Migration Idea Material All The World | Hasan Hosgel Rewrite complete UI Layer • Pro "   Everything new "   State of the art "   New employees understand the complex code • Contra "   Risk "   High time effort "   Stakeholders wait ~2 month for new features
10. Evaluation through product management and stakeholders Image Source https://www.flickr.com/photos/nickhubbard/15935627570 Material All The World | Hasan Hosgel
11. Our First Migration Idea Material All The World | Hasan Hosgel Rewrite complete UI Layer • Pro "   Everything new "   State of the art "   New employees understand the complex code • Contra "   Risk "   High time effort "   Stakeholders wait ~2 month for new features rejected
12. Started again from the ground Image source: http://www.flickr.com/photos/hertenberger/1434191066/ Material All The World | Hasan Hosgel
13. Next Migration Idea Material All The World | Hasan Hosgel
14. Next Migration Idea Material All The World | Hasan Hosgel Migrate step by step and per page/ feature
15. Next Migration Idea Material All The World | Hasan Hosgel Migrate step by step and per page/ feature • Use the new Navigation Drawer with the ToolBar
16. Next Migration Idea Material All The World | Hasan Hosgel Migrate step by step and per page/ feature • Use the new Navigation Drawer with the ToolBar • Change base theme to AppCompat one
17. Next Migration Idea Material All The World | Hasan Hosgel Migrate step by step and per page/ feature • Use the new Navigation Drawer with the ToolBar • Change base theme to AppCompat one • Use SnackBar instead of Crouton " https://github.com/nispok/snackbar
18. Next Migration Idea Material All The World | Hasan Hosgel Migrate step by step and per page/ feature • Use the new Navigation Drawer with the ToolBar • Change base theme to AppCompat one • Use SnackBar instead of Crouton " https://github.com/nispok/snackbar "   remove the UndoBar
19. Next Migration Idea Material All The World | Hasan Hosgel Migrate step by step and per page/ feature • Use the new Navigation Drawer with the ToolBar • Change base theme to AppCompat one • Use SnackBar instead of Crouton " https://github.com/nispok/snackbar "   remove the UndoBar • Migrate from etsy’s StaggeredGridView to RecyclerView with StaggeredLayoutManager
20. Next Migration Idea Material All The World | Hasan Hosgel Migrate step by step and per page/ feature • Use the new Navigation Drawer with the ToolBar • Change base theme to AppCompat one • Use SnackBar instead of Crouton " https://github.com/nispok/snackbar "   remove the UndoBar • Migrate from etsy’s StaggeredGridView to RecyclerView with StaggeredLayoutManager • Redesign FirstPage
21. Evaluation through product management and stakeholders Image Source https://www.flickr.com/photos/nickhubbard/15935627570 Material All The World | Hasan Hosgel
22. Next Migration Idea Material All The World | Hasan Hosgel Migrate step by step and per page/ function • Use the new Navigation Drawer with the ToolBar • Change base theme to AppCompat • Use SnackBar instead of Crouton " https://github.com/nispok/snackbar "   remove the UndoBar • Migrate from etsy’s StaggeredGridView to RecyclerView with StaggeredLayoutManager • Redesign FirstPage approved
23. Start the work Source: http://www.flickr.com/photos/16210667@N02/9172895225 Material All The World | Hasan Hosgel
24. Used libraries: Material All The World | Hasan Hosgel • com.android.support:support-v4:22.0.0 • com.android.support:appcompat-v7:22.0.0 • com.android.support:recyclerview-v7:22.0.0 • com.android.support:cardview-v7:22.0.0
25. Used libraries: Material All The World | Hasan Hosgel • com.android.support:support-v4:22.0.0 • com.android.support:appcompat-v7:22.0.0 • com.android.support:recyclerview-v7:22.0.0 • com.android.support:cardview-v7:22.0.0 • com.nispok:snackbar:2.7.5
26. Base Activity with AppCompat v22.0.0 Material All The World | Hasan Hosgel
27. Base Activity with AppCompat v22.0.0 Material All The World | Hasan Hosgel • ActionBarActivtiy
28. Base Activity with AppCompat v22.0.0 v22.1.0 Material All The World | Hasan Hosgel • ActionBarActivtiy • AppCompatActivity or use of AppCompatDelegate
29. Theming Material All The World | Hasan Hosgel Image Source http://developer.android.com/training/material/theme.html
30. Theming Material All The World | Hasan Hosgel values/themes.xml: <style name="Theme.MyTheme" parent="Theme.AppCompat.Light"> <!-- colorPrimary is used for the default action bar background --> <item name=”colorPrimary”>@color/my_awesome_color</item> <!-- colorPrimaryDark is used for the status bar --> <item name=”colorPrimaryDark”>@color/my_awesome_darker_color</ item> <!-- colorAccent is used as the default value for colorControlActivated, which is used to tint widgets --> <item name=”colorAccent”>@color/accent</item> </style>
31. Theming Material All The World | Hasan Hosgel values/themes.xml: <style name="Theme.MyTheme" parent="Theme.AppCompat.Light"> <!-- colorPrimary is used for the default action bar background --> <item name=”colorPrimary”>@color/my_awesome_color</item> <!-- colorPrimaryDark is used for the status bar --> <item name=”colorPrimaryDark”>@color/my_awesome_darker_color</ item> <!-- colorAccent is used as the default value for colorControlActivated, which is used to tint widgets --> <item name=”colorAccent”>@color/accent</item> </style>
32. Theming Material All The World | Hasan Hosgel values/themes.xml: <style name="Theme.MyTheme" parent="Theme.AppCompat.Light"> <!-- colorPrimary is used for the default action bar background --> <item name=”colorPrimary”>@color/my_awesome_color</item> <!-- colorPrimaryDark is used for the status bar --> <item name=”colorPrimaryDark”>@color/my_awesome_darker_color</ item> <!-- colorAccent is used as the default value for colorControlActivated, which is used to tint widgets --> <item name=”colorAccent”>@color/accent</item> </style>
33. Theming Material All The World | Hasan Hosgel values/themes.xml: <style name="Theme.MyTheme" parent="Theme.AppCompat.Light"> <!-- colorPrimary is used for the default action bar background --> <item name=”colorPrimary”>@color/my_awesome_color</item> <!-- colorPrimaryDark is used for the status bar --> <item name=”colorPrimaryDark”>@color/my_awesome_darker_color</ item> <!-- colorAccent is used as the default value for colorControlActivated, which is used to tint widgets --> <item name=”colorAccent”>@color/accent</item> </style>
34. Theming Material All The World | Hasan Hosgel values/themes.xml: <style name="Theme.MyTheme" parent="Theme.AppCompat.Light"> <!-- colorPrimary is used for the default action bar background --> <item name=”colorPrimary”>@color/my_awesome_color</item> <!-- colorPrimaryDark is used for the status bar --> <item name=”colorPrimaryDark”>@color/my_awesome_darker_color</ item> <!-- colorAccent is used as the default value for colorControlActivated, which is used to tint widgets --> <item name=”colorAccent”>@color/accent</item> </style>
35. Theming Material All The World | Hasan Hosgel AndroidManifest.xml: <manifest ...> <application android:theme="@style/Theme.MyTheme" ...> ... </application> </manifest>
36. Theming Material All The World | Hasan Hosgel AndroidManifest.xml: <manifest ...> <application android:theme="@style/Theme.MyTheme" ...> ... </application> </manifest>
37. Migration from StaggeredGridView to RecyclerView Material All The World | Hasan Hosgel
38. Migration from StaggeredGridView to RecyclerView Material All The World | Hasan Hosgel •  LayoutManager "   In our case StaggeredGridLayoutManager
39. Migration from StaggeredGridView to RecyclerView Material All The World | Hasan Hosgel •  LayoutManager "   In our case StaggeredGridLayoutManager
40. Migration from StaggeredGridView to RecyclerView Material All The World | Hasan Hosgel •  LayoutManager "   In our case StaggeredGridLayoutManager •  Class extending RecyclerView.ViewHolder " No OnItemClickListener ! add your own during the creation
41. Migration from StaggeredGridView to RecyclerView Material All The World | Hasan Hosgel •  LayoutManager "   In our case StaggeredGridLayoutManager •  Class extending RecyclerView.ViewHolder " No OnItemClickListener ! add your own during the creation •  Adapter extending RecyclerView.Adapter<VH extends ViewHolder> " onCreateViewHolder() " onBindViewHolder()
42. We faced some problems Image Source https://www.flickr.com/photos/roolrool/4758613588 Material All The World | Hasan Hosgel
43. Problems Material All The World | Hasan Hosgel
44. Problems Material All The World | Hasan Hosgel • Ripple is not pre Lollipop (LL)
45. Used libraries: Material All The World | Hasan Hosgel • com.android.support:support-v4:22.0.0 • com.android.support:appcompat-v7:22.0.0 • com.android.support:recyclerview-v7:22.0.0 • com.android.support:cardview-v7:22.0.0 • com.nispok:snackbar:2.7.5 • com.balysv:material-ripple:1.0.2
46. Problems Material All The World | Hasan Hosgel • Ripple is not pre Lollipop (LL)
47. Problems Material All The World | Hasan Hosgel • Ripple is not pre Lollipop (LL) • Not every UI Widget is available through AppCompat
48. Widgets available with AppCompat v22.0.0 Material All The World | Hasan Hosgel •  Everything provided by AppCompat’s ToolBar (action modes, etc) •  EditText •  Spinner •  CheckBox •  RadioButton •  SwitchCompat •  CheckedTextView
49. Widgets available with AppCompat v22.0.0 v22.1.0 Material All The World | Hasan Hosgel •  Everything provided by AppCompat’s ToolBar (action modes, etc) •  EditText •  Spinner •  CheckBox •  RadioButton •  SwitchCompat •  CheckedTextView •  New: AutoCompleteTextView, Button, MultiAutoCompleteTextView, RatingBar, TextView
50. Wait there is MOAR Material All The World | Hasan Hosgel Now you can also use it via code! ★ •  AppCompatAutoCompleteTextView •  AppCompatButton •  AppCompatCheckBox •  AppCompatCheckedTextView •  AppCompatEditText •  AppCompatMultiAutoCompleteTextView •  AppCompatRadioButton •  AppCompatRatingBar •  AppCompatSpinner •  AppCompatTextView
51. Still missing Material All The World | Hasan Hosgel •  ProgressBar •  SeekBar
52. Problems Material All The World | Hasan Hosgel • Ripple is not pre Lollipop (LL) • Not every UI Widget is available through AppCompat
53. Problems Material All The World | Hasan Hosgel • Ripple is not pre Lollipop (LL) • Not every UI Widget is available through AppCompat • No elevation attribute in fragment or the elevation from children in fragment has no effect
54. Design Material All The World | Hasan Hosgel
55. Reality Material All The World | Hasan Hosgel
56. Problems Material All The World | Hasan Hosgel • Ripple is not pre Lollipop (LL) • Not every UI Widget is available through AppCompat • No elevation attribute in fragment or the elevation from children in fragment has no effect
57. Problems Material All The World | Hasan Hosgel • Ripple is not pre Lollipop (LL) • Not every UI Widget is available through AppCompat • No elevation attribute in fragment or the elevation from children in fragment has no effect • Changing DrawerToggle to UpButton and back programmatically
58. Our solution Material All The World | Hasan Hosgel
59. Our solution Material All The World | Hasan Hosgel Documentation describes following: drawerToggle.setDrawerIndicatorEnabled(false); getSupportActionBar().setDisplayHomeAsUpEnabled(true);
60. Our solution Material All The World | Hasan Hosgel Documentation describes following: drawerToggle.setDrawerIndicatorEnabled(false); getSupportActionBar().setDisplayHomeAsUpEnabled(true); It only works after the orientation change. So what to do now?
61. Our solution Material All The World | Hasan Hosgel Documentation describes following: drawerToggle.setDrawerIndicatorEnabled(false); getSupportActionBar().setDisplayHomeAsUpEnabled(true); It only works after the orientation change. So what to do now? getSupportActionBar().setDisplayHomeAsUpEnabled(false); drawerToggle.setDrawerIndicatorEnabled(true); drawerToggle.setDrawerIndicatorEnabled(false); getSupportActionBar().setDisplayHomeAsUpEnabled(true);
62. Our solution Material All The World | Hasan Hosgel Documentation describes following: drawerToggle.setDrawerIndicatorEnabled(false); getSupportActionBar().setDisplayHomeAsUpEnabled(true); It only works after the orientation change. So what to do now? getSupportActionBar().setDisplayHomeAsUpEnabled(false); drawerToggle.setDrawerIndicatorEnabled(true); drawerToggle.setDrawerIndicatorEnabled(false); getSupportActionBar().setDisplayHomeAsUpEnabled(true); But wait there is still a problem. The UpButton doesn‘t trigger onOptionsItemSelected.
63. Our solution Material All The World | Hasan Hosgel Documentation describes following: drawerToggle.setDrawerIndicatorEnabled(false); getSupportActionBar().setDisplayHomeAsUpEnabled(true); It only works after the orientation change. So what to do now? getSupportActionBar().setDisplayHomeAsUpEnabled(false); drawerToggle.setDrawerIndicatorEnabled(true); drawerToggle.setDrawerIndicatorEnabled(false); getSupportActionBar().setDisplayHomeAsUpEnabled(true); But wait there is still a problem. The UpButton doesn‘t trigger onOptionsItemSelected. drawerToggle.setToolbarNavigationClickListener(new OnClickListener() { public void onClick(View v) { onBackPressed(); } });
64. Problems Material All The World | Hasan Hosgel • Ripple is not pre Lollipop (LL) • Not every UI Widget is available through AppCompat • No elevation attribute in fragment or the elevation from children in fragment has no effect • Changing DrawerToggle to UpButton and back programmatically
65. Material phone (work in progress) Material All The World | Hasan Hosgel
66. Material 7 inch (work in progress) Material All The World | Hasan Hosgel
67. Material 10 inch (work in progress) Material All The World | Hasan Hosgel
68. Acceptance test by the stakeholders Image Source http://pixabay.com/de/katze-hauskate-tier-augen-blick-278187/ Material All The World | Hasan Hosgel
69. And… they are satisfied Image Source https://www.flickr.com/photos/marcus_t_ward/10715983613 Material All The World | Hasan Hosgel
70. Now everything is materialized! Material All The World | Hasan Hosgel Image Source http://www.bhmpics.com/success_kid-wallpapers.html
71. Drawable Tinting in AppCompat v22.1.0 Material All The World | Hasan Hosgel Drawable drawable = ...; // Wrap the drawable so that future tinting calls work // on pre-v21 devices. Always use the returned drawable. drawable = DrawableCompat.wrap(drawable); // We can now set a tint DrawableCompat.setTint(drawable, Color.RED); // ...or a tint list DrawableCompat.setTintList(drawable, myColorStateList); // ...and a different tint mode DrawableCompat.setTintMode(drawable, PorterDuff.Mode.SRC_OVER);
72. Material All The World | Hasan Hosgel
73. Material All The World | Hasan Hosgel
74. Material All The World | Hasan Hosgel
75. Material All The World | Hasan Hosgel
76. Q & A Source: http://www.flickr.com/photos/21496790@N06/5065834411/ Material All The World | Hasan Hosgel
77. www.immobilienscout24.de www.immobilienscout24.de Thanks for your Attention! İlginiz için teşekkürler! Contact: +HasanHosgel Twitter: @alosdev Github: alosdev ImmobilienScout24 still searches for developers: http://www.immobilienscout24.de/unternehmen/jobs-karriere.html Material All The World https://speakerdeck.com/alosdev/material-all-the-world-android-developer- days-2015