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

Material All The World - Android Developer Days...

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.

Hasan Hosgel

May 12, 2015
Tweet

More Decks by Hasan Hosgel

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. Next Migration Idea Material All The World | Hasan Hosgel

    Migrate step by step and per page/ feature
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. Base Activity with AppCompat v22.0.0 v22.1.0 Material All The World

    | Hasan Hosgel • ActionBarActivtiy • AppCompatActivity or use of AppCompatDelegate
  16. Theming Material All The World | Hasan Hosgel Image Source

    http://developer.android.com/training/material/theme.html
  17. 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>
  18. 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>
  19. 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>
  20. 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>
  21. 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>
  22. Theming Material All The World | Hasan Hosgel AndroidManifest.xml: <manifest

    ...> <application android:theme="@style/Theme.MyTheme" ...> ... </application> </manifest>
  23. Theming Material All The World | Hasan Hosgel AndroidManifest.xml: <manifest

    ...> <application android:theme="@style/Theme.MyTheme" ...> ... </application> </manifest>
  24. Migration from StaggeredGridView to RecyclerView Material All The World |

    Hasan Hosgel •  LayoutManager "   In our case StaggeredGridLayoutManager
  25. Migration from StaggeredGridView to RecyclerView Material All The World |

    Hasan Hosgel •  LayoutManager "   In our case StaggeredGridLayoutManager
  26. 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
  27. 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()
  28. 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
  29. Problems Material All The World | Hasan Hosgel • Ripple is

    not pre Lollipop (LL) • Not every UI Widget is available through AppCompat
  30. 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
  31. 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
  32. 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
  33. Problems Material All The World | Hasan Hosgel • Ripple is

    not pre Lollipop (LL) • Not every UI Widget is available through AppCompat
  34. 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
  35. 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
  36. 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
  37. Our solution Material All The World | Hasan Hosgel Documentation

    describes following: drawerToggle.setDrawerIndicatorEnabled(false); getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  38. 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?
  39. 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);
  40. 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.
  41. 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(); } });
  42. 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
  43. Now everything is materialized! Material All The World | Hasan

    Hosgel Image Source http://www.bhmpics.com/success_kid-wallpapers.html
  44. 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);
  45. 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