Tweet
Tweet

Slide 1

Slide 1 text

www.immobilienscout24.de www.immobilienscout24.de Material All the World Android Developer Days | 12.05.2015 | Hasan Hosgel

Slide 2

Slide 2 text

+HasanHosgel @alosdev alosdev alosdev CO-Organizer Developer About me Material All The World | Hasan Hosgel

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Current State phone Material All The World | Hasan Hosgel

Slide 5

Slide 5 text

Current State 7 inch Material All The World | Hasan Hosgel

Slide 6

Slide 6 text

We are smart developers Image Source https://www.flickr.com/photos/theinfamousgdub/1765952198 Material All The World | Hasan Hosgel

Slide 7

Slide 7 text

Our First Migration Idea Material All The World | Hasan Hosgel Rewrite complete UI Layer

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Evaluation through product management and stakeholders Image Source https://www.flickr.com/photos/nickhubbard/15935627570 Material All The World | Hasan Hosgel

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Started again from the ground Image source: http://www.flickr.com/photos/hertenberger/1434191066/ Material All The World | Hasan Hosgel

Slide 13

Slide 13 text

Next Migration Idea Material All The World | Hasan Hosgel

Slide 14

Slide 14 text

Next Migration Idea Material All The World | Hasan Hosgel Migrate step by step and per page/ feature

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Evaluation through product management and stakeholders Image Source https://www.flickr.com/photos/nickhubbard/15935627570 Material All The World | Hasan Hosgel

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Start the work Source: http://www.flickr.com/photos/16210667@N02/9172895225 Material All The World | Hasan Hosgel

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Base Activity with AppCompat v22.0.0 Material All The World | Hasan Hosgel

Slide 27

Slide 27 text

Base Activity with AppCompat v22.0.0 Material All The World | Hasan Hosgel ● ActionBarActivtiy

Slide 28

Slide 28 text

Base Activity with AppCompat v22.0.0 v22.1.0 Material All The World | Hasan Hosgel ● ActionBarActivtiy ● AppCompatActivity or use of AppCompatDelegate

Slide 29

Slide 29 text

Theming Material All The World | Hasan Hosgel Image Source http://developer.android.com/training/material/theme.html

Slide 30

Slide 30 text

Theming Material All The World | Hasan Hosgel values/themes.xml: <!-- 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>

Slide 31

Slide 31 text

Theming Material All The World | Hasan Hosgel values/themes.xml: <!-- 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>

Slide 32

Slide 32 text

Theming Material All The World | Hasan Hosgel values/themes.xml: <!-- 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>

Slide 33

Slide 33 text

Theming Material All The World | Hasan Hosgel values/themes.xml: <!-- 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>

Slide 34

Slide 34 text

Theming Material All The World | Hasan Hosgel values/themes.xml: <!-- 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>

Slide 35

Slide 35 text

Theming Material All The World | Hasan Hosgel AndroidManifest.xml: ...

Slide 36

Slide 36 text

Theming Material All The World | Hasan Hosgel AndroidManifest.xml: ...

Slide 37

Slide 37 text

Migration from StaggeredGridView to RecyclerView Material All The World | Hasan Hosgel

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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 " onCreateViewHolder() " onBindViewHolder()

Slide 42

Slide 42 text

We faced some problems Image Source https://www.flickr.com/photos/roolrool/4758613588 Material All The World | Hasan Hosgel

Slide 43

Slide 43 text

Problems Material All The World | Hasan Hosgel

Slide 44

Slide 44 text

Problems Material All The World | Hasan Hosgel ● Ripple is not pre Lollipop (LL)

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Problems Material All The World | Hasan Hosgel ● Ripple is not pre Lollipop (LL)

Slide 47

Slide 47 text

Problems Material All The World | Hasan Hosgel ● Ripple is not pre Lollipop (LL) ● Not every UI Widget is available through AppCompat

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Still missing Material All The World | Hasan Hosgel ●  ProgressBar ●  SeekBar

Slide 52

Slide 52 text

Problems Material All The World | Hasan Hosgel ● Ripple is not pre Lollipop (LL) ● Not every UI Widget is available through AppCompat

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Design Material All The World | Hasan Hosgel

Slide 55

Slide 55 text

Reality Material All The World | Hasan Hosgel

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Our solution Material All The World | Hasan Hosgel

Slide 59

Slide 59 text

Our solution Material All The World | Hasan Hosgel Documentation describes following: drawerToggle.setDrawerIndicatorEnabled(false); getSupportActionBar().setDisplayHomeAsUpEnabled(true);

Slide 60

Slide 60 text

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?

Slide 61

Slide 61 text

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);

Slide 62

Slide 62 text

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.

Slide 63

Slide 63 text

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(); } });

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Material phone (work in progress) Material All The World | Hasan Hosgel

Slide 66

Slide 66 text

Material 7 inch (work in progress) Material All The World | Hasan Hosgel

Slide 67

Slide 67 text

Material 10 inch (work in progress) Material All The World | Hasan Hosgel

Slide 68

Slide 68 text

Acceptance test by the stakeholders Image Source http://pixabay.com/de/katze-hauskate-tier-augen-blick-278187/ Material All The World | Hasan Hosgel

Slide 69

Slide 69 text

And… they are satisfied Image Source https://www.flickr.com/photos/marcus_t_ward/10715983613 Material All The World | Hasan Hosgel

Slide 70

Slide 70 text

Now everything is materialized! Material All The World | Hasan Hosgel Image Source http://www.bhmpics.com/success_kid-wallpapers.html

Slide 71

Slide 71 text

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);

Slide 72

Slide 72 text

Material All The World | Hasan Hosgel

Slide 73

Slide 73 text

Material All The World | Hasan Hosgel

Slide 74

Slide 74 text

Material All The World | Hasan Hosgel

Slide 75

Slide 75 text

Material All The World | Hasan Hosgel

Slide 76

Slide 76 text

Q & A Source: http://www.flickr.com/photos/21496790@N06/5065834411/ Material All The World | Hasan Hosgel

Slide 77

Slide 77 text

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