Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Material Design and Backwards Compatibility

9,342 views

Published on

Slides from Inovex Meetup November 2014

Material Design and Backwards Compatibility

  1. 1. Material Design Backwards Compatibility
  2. 2. 2 About Me • Mobile Development • Android • iOS • REST-Api Design • Cloud Infrastructure +Angelo Rüggeberg @s3xy4ngyc http://s3xy4ngyc.github.io
  3. 3. Sample app • Source Available at Github: https://github.com/ s3xy4ngyc/Android-L-Samples • Available at Google Play: https://play.google.com/ store/apps/details? id=s3xy.de.lsamples 3
  4. 4. 4
  5. 5. Distribution 5
  6. 6. Distribution 6
  7. 7. Distribution • Devices having Android 5.0 officially: • Nexus 5 • Nexus 7 • Nexus 9 • LG G3 6
  8. 8. Distribution 7
  9. 9. Distribution 7
  10. 10. Dependencies 8
  11. 11. 9
  12. 12. 9 dependencies { compile 'com.android.support:support-v4:21.0.2' compile 'com.android.support:appcompat-v7:21.0.2' compile 'com.android.support:cardview-v7:21.0.2' compile 'com.android.support:recyclerview-v7:21.0.2' compile 'com.android.support:gridlayout-v7:21.0.2' compile 'com.android.support:mediarouter-v7:21.0.2' compile 'com.android.support:palette-v7:21.0.2' compile 'com.android.support:support-v13:21.0.2' compile 'com.android.support:leanback-v17:21.0.2' compile 'com.android.support:support-annotations:21.0.2' }
  13. 13. 9 dependencies { compile 'com.android.support:support-v4:21.0.2' compile 'com.android.support:appcompat-v7:21.0.2' compile 'com.android.support:cardview-v7:21.0.2' compile 'com.android.support:recyclerview-v7:21.0.2' compile 'com.android.support:gridlayout-v7:21.0.2' compile 'com.android.support:mediarouter-v7:21.0.2' compile 'com.android.support:palette-v7:21.0.2' compile 'com.android.support:support-v13:21.0.2' compile 'com.android.support:leanback-v17:21.0.2' compile 'com.android.support:support-annotations:21.0.2' } ‚//material Theme, ActionBar, etc.
  14. 14. 9 dependencies { compile 'com.android.support:support-v4:21.0.2' compile 'com.android.support:appcompat-v7:21.0.2' compile 'com.android.support:cardview-v7:21.0.2' compile 'com.android.support:recyclerview-v7:21.0.2' compile 'com.android.support:gridlayout-v7:21.0.2' compile 'com.android.support:mediarouter-v7:21.0.2' compile 'com.android.support:palette-v7:21.0.2' compile 'com.android.support:support-v13:21.0.2' compile 'com.android.support:leanback-v17:21.0.2' compile 'com.android.support:support-annotations:21.0.2' } ‚//material Theme, ActionBar, etc. ‚//New Components for Pre 5.0
  15. 15. Apply Material Theme 10
  16. 16. 11
  17. 17. 11 android: Theme.Material
  18. 18. 11 android: Theme.Material android: Theme.Material.Light
  19. 19. Theme.AppCompat Theme.AppCompat.Light 11 android: Theme.Material android: Theme.Material.Light
  20. 20. Apply Material Theme 12
  21. 21. Apply Material Theme • Custom Style Extending Appcompat Style 12
  22. 22. Apply Material Theme • Custom Style Extending Appcompat Style • Things to note: 12
  23. 23. Apply Material Theme • Custom Style Extending Appcompat Style • Things to note: • No more @android duplicates 12
  24. 24. Apply Material Theme • Custom Style Extending Appcompat Style • Things to note: • No more @android duplicates • No more v14+ Style Folder 12
  25. 25. 13
  26. 26. 13
  27. 27. 13
  28. 28. 13
  29. 29. 13
  30. 30. 13
  31. 31. 13
  32. 32. Apply Material Theme 14
  33. 33. Apply Material Theme • Ui Elements that Get Material Design: • EditText • Spinner • CheckBox • RadioButton • Switch • CheckedTextView 14
  34. 34. Apply Material Theme • Ui Elements that Get Material Design: • EditText • Spinner • CheckBox • RadioButton • Switch • CheckedTextView • All Other UI Elements do not get Styled and Need Custom Styling/Views 14
  35. 35. Action Bar Drawer Toggle 15
  36. 36. 16 Action Bar Drawer Toggle
  37. 37. 16 Action Bar Drawer Toggle
  38. 38. Action Bar Drawer Toggle 17
  39. 39. Action Bar Drawer Toggle • import android.support.v7.app.ActionBarDrawerT oggle • Extend from ActionBarActivity • Init DrawerToggle with Drawer Layout • Assign DrawerToggle to DrawerLayout 17
  40. 40. 18
  41. 41. 18 DrawerLayout mDrawerLayout; ActionBarDrawerToggle drawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my); drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.app_name, R.string.app_name) { }; mDrawerLayout.setDrawerListener(drawerToggle); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); }
  42. 42. 18 DrawerLayout mDrawerLayout; ActionBarDrawerToggle drawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my); drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.app_name, R.string.app_name) { }; mDrawerLayout.setDrawerListener(drawerToggle); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); }
  43. 43. 18 DrawerLayout mDrawerLayout; ActionBarDrawerToggle drawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my); drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.app_name, R.string.app_name) { }; mDrawerLayout.setDrawerListener(drawerToggle); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); }
  44. 44. 18 DrawerLayout mDrawerLayout; ActionBarDrawerToggle drawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my); drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.app_name, R.string.app_name) { }; mDrawerLayout.setDrawerListener(drawerToggle); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); }
  45. 45. 18 DrawerLayout mDrawerLayout; ActionBarDrawerToggle drawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my); drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.app_name, R.string.app_name) { }; mDrawerLayout.setDrawerListener(drawerToggle); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); }
  46. 46. Card View 19
  47. 47. Card View 20
  48. 48. Card View • Support for rounded Corners • Elevation Shadows 20
  49. 49. Card View • Support for rounded Corners • Elevation Shadows • Limitations: • On Pre-L no Clipping for Children with Round Corners • On Pre-L Adds Padding to Draw Shadows 20
  50. 50. 21
  51. 51. 22
  52. 52. 22 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/cardView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:background="?android:selectableItemBackground" app:cardCornerRadius="2dp" app:cardElevation="5dp" app:cardPreventCornerOverlap="true" app:cardUseCompatPadding="true"> <!-- Place Your Textviews etc. in here --> <LinearLayout...> </android.support.v7.widget.CardView>
  53. 53. Recycler View 23
  54. 54. Recycler View 24
  55. 55. Recycler View • „Replacement“ for ListView • Implements the ViewHolderPattern • Improved Recycling • LayoutManager • Vertical List View • Horizontal List View • Staggered Grid View 24
  56. 56. 25
  57. 57. 25 Layout:
  58. 58. 25 Layout:
  59. 59. 25 Layout: Code:
  60. 60. 25 Layout: Code:
  61. 61. 26
  62. 62. 27 Recycler View - Adapter
  63. 63. 27 Recycler View - Adapter Old Adapter: class MenuAdapterOld extends ArrayAdapter<String> {
  64. 64. 27 Recycler View - Adapter Old Adapter: class MenuAdapterOld extends ArrayAdapter<String> { New Adapter: import android.support.v7.widget.RecyclerView; public class MenuAdapter extends RecyclerView.Adapter<MenuAdapter.ViewHolder> {
  65. 65. 28 Recycler View - Adapter
  66. 66. 28 private ArrayList<String> mDataset; private OnItemClickListener mListener; public MenuAdapter(ArrayList<String> myDataset, OnItemClickListener listener) { mDataset = myDataset; mListener = listener; } Recycler View - Adapter
  67. 67. 29 Recycler View - Adapter
  68. 68. 29 private ArrayList<String> mDataset; private OnItemClickListener mListener; public MenuAdapter(ArrayList<String> myDataset, OnItemClickListener listener) { mDataset = myDataset; mListener = listener; } Recycler View - Adapter
  69. 69. 29 private ArrayList<String> mDataset; private OnItemClickListener mListener; public MenuAdapter(ArrayList<String> myDataset, OnItemClickListener listener) { mDataset = myDataset; mListener = listener; } Recycler View - Adapter
  70. 70. 29 private ArrayList<String> mDataset; private OnItemClickListener mListener; public MenuAdapter(ArrayList<String> myDataset, OnItemClickListener listener) { mDataset = myDataset; mListener = listener; } Recycler View - Adapter @Override public int getItemCount() { return mDataset.size(); }
  71. 71. 30 Recycler View - Adapter
  72. 72. 30 public static class ViewHolder extends RecyclerView.ViewHolder { ImageView mPhoto; TextView mPhotoTitle; CardView mCardView; public ViewHolder(View itemView) { super(itemView); mPhoto = (ImageView) itemView.findViewById(R.id.photo); mPhotoTitle = (TextView) itemView.findViewById(R.id.photoTitle); mCardView = (CardView) itemView.findViewById(R.id.cardView); } } Recycler View - Adapter
  73. 73. 30 public static class ViewHolder extends RecyclerView.ViewHolder { ImageView mPhoto; TextView mPhotoTitle; CardView mCardView; public ViewHolder(View itemView) { super(itemView); mPhoto = (ImageView) itemView.findViewById(R.id.photo); mPhotoTitle = (TextView) itemView.findViewById(R.id.photoTitle); mCardView = (CardView) itemView.findViewById(R.id.cardView); } } Recycler View - Adapter
  74. 74. 30 public static class ViewHolder extends RecyclerView.ViewHolder { ImageView mPhoto; TextView mPhotoTitle; CardView mCardView; public ViewHolder(View itemView) { super(itemView); mPhoto = (ImageView) itemView.findViewById(R.id.photo); mPhotoTitle = (TextView) itemView.findViewById(R.id.photoTitle); mCardView = (CardView) itemView.findViewById(R.id.cardView); } } Recycler View - Adapter
  75. 75. 30 public static class ViewHolder extends RecyclerView.ViewHolder { ImageView mPhoto; TextView mPhotoTitle; CardView mCardView; public ViewHolder(View itemView) { super(itemView); mPhoto = (ImageView) itemView.findViewById(R.id.photo); mPhotoTitle = (TextView) itemView.findViewById(R.id.photoTitle); mCardView = (CardView) itemView.findViewById(R.id.cardView); } } Recycler View - Adapter
  76. 76. 30 public static class ViewHolder extends RecyclerView.ViewHolder { ImageView mPhoto; TextView mPhotoTitle; CardView mCardView; public ViewHolder(View itemView) { super(itemView); mPhoto = (ImageView) itemView.findViewById(R.id.photo); mPhotoTitle = (TextView) itemView.findViewById(R.id.photoTitle); mCardView = (CardView) itemView.findViewById(R.id.cardView); } } Recycler View - Adapter
  77. 77. 31 Recycler View - Adapter
  78. 78. 31 @Override public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { View v = LayoutInflater.from(viewGroup.getContext()).inflate(rowLayout, viewGroup, false); return new ViewHolder(v); } @Override public void onBindViewHolder(final ViewHolder viewHolder, final int i) { Photo p = photos.get(i); mPicasso.load(p.getUrl()).error(android.R.drawable.stat_notify_error).placeholder(android.R. drawable.stat_notify_sync).into(viewHolder.mPhoto); viewHolder.mPhotoTitle.setText(p.getId()); if (viewHolder.mPhotographerTitle != null) { viewHolder.mPhotographerTitle.setText(p.getTitle()); } viewHolder.mCardView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mListener.onClick(viewHolder.mPhoto, i); } }); } Recycler View - Adapter
  79. 79. 31 @Override public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { View v = LayoutInflater.from(viewGroup.getContext()).inflate(rowLayout, viewGroup, false); return new ViewHolder(v); } @Override public void onBindViewHolder(final ViewHolder viewHolder, final int i) { Photo p = photos.get(i); mPicasso.load(p.getUrl()).error(android.R.drawable.stat_notify_error).placeholder(android.R. drawable.stat_notify_sync).into(viewHolder.mPhoto); viewHolder.mPhotoTitle.setText(p.getId()); if (viewHolder.mPhotographerTitle != null) { viewHolder.mPhotographerTitle.setText(p.getTitle()); } viewHolder.mCardView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mListener.onClick(viewHolder.mPhoto, i); } }); } Recycler View - Adapter
  80. 80. 31 @Override public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { View v = LayoutInflater.from(viewGroup.getContext()).inflate(rowLayout, viewGroup, false); return new ViewHolder(v); } @Override public void onBindViewHolder(final ViewHolder viewHolder, final int i) { Photo p = photos.get(i); mPicasso.load(p.getUrl()).error(android.R.drawable.stat_notify_error).placeholder(android.R. drawable.stat_notify_sync).into(viewHolder.mPhoto); viewHolder.mPhotoTitle.setText(p.getId()); if (viewHolder.mPhotographerTitle != null) { viewHolder.mPhotographerTitle.setText(p.getTitle()); } viewHolder.mCardView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mListener.onClick(viewHolder.mPhoto, i); } }); } Recycler View - Adapter
  81. 81. 31 @Override public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { View v = LayoutInflater.from(viewGroup.getContext()).inflate(rowLayout, viewGroup, false); return new ViewHolder(v); } @Override public void onBindViewHolder(final ViewHolder viewHolder, final int i) { Photo p = photos.get(i); mPicasso.load(p.getUrl()).error(android.R.drawable.stat_notify_error).placeholder(android.R. drawable.stat_notify_sync).into(viewHolder.mPhoto); viewHolder.mPhotoTitle.setText(p.getId()); if (viewHolder.mPhotographerTitle != null) { viewHolder.mPhotographerTitle.setText(p.getTitle()); } viewHolder.mCardView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mListener.onClick(viewHolder.mPhoto, i); } }); } Recycler View - Adapter
  82. 82. 31 @Override public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { View v = LayoutInflater.from(viewGroup.getContext()).inflate(rowLayout, viewGroup, false); return new ViewHolder(v); } @Override public void onBindViewHolder(final ViewHolder viewHolder, final int i) { Photo p = photos.get(i); mPicasso.load(p.getUrl()).error(android.R.drawable.stat_notify_error).placeholder(android.R. drawable.stat_notify_sync).into(viewHolder.mPhoto); viewHolder.mPhotoTitle.setText(p.getId()); if (viewHolder.mPhotographerTitle != null) { viewHolder.mPhotographerTitle.setText(p.getTitle()); } viewHolder.mCardView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mListener.onClick(viewHolder.mPhoto, i); } }); } Recycler View - Adapter
  83. 83. 32
  84. 84. 32 • Linear Layout Manager
  85. 85. 32 • Linear Layout Manager • Supports Smooth Scrolling
  86. 86. 32 • Linear Layout Manager • Supports Smooth Scrolling
  87. 87. 33
  88. 88. 33 • Linear Layout Manager
  89. 89. 33 • Linear Layout Manager • Orientation Horizontal
  90. 90. 33 • Linear Layout Manager • Orientation Horizontal
  91. 91. 34
  92. 92. 34 • Staggered Grid Layout Manager
  93. 93. 34 • Staggered Grid Layout Manager • Grid Size can be defined
  94. 94. 34 • Staggered Grid Layout Manager • Grid Size can be defined • Supports Vertical and Horizontal Scrolling
  95. 95. 34 • Staggered Grid Layout Manager • Grid Size can be defined • Supports Vertical and Horizontal Scrolling
  96. 96. Toolbar 35
  97. 97. Toolbar 37
  98. 98. Toolbar • ActionBar == Toolbar • Toolbar is a ViewGroup • Styleable • Positionable 37
  99. 99. 38 Layout: Code:
  100. 100. 39 Standalone Widget:
  101. 101. Limitations 40
  102. 102. Limitations 41
  103. 103. Limitations • Activity Transitions are Possible, BUT won’t be applied on PRE 5.0 Devices • Many „New“ Ui Elements are not available in the API, thus require separate Implementation/Style. 41
  104. 104. Limitations 42
  105. 105. Limitations • Elements not Included: • Fancy Material Progressbars • Buttons • Flat • Raised • Round / Floating • Sliders • Snackbars 42
  106. 106. Limitations 43
  107. 107. Limitations • Things not Supported on Pre 5.0: • Activity transitions • Touch feedback • Reveal animations • Path-based animations • Vector drawables • Drawable tinting 43
  108. 108. 44 Useful Links
  109. 109. Useful Links • Official Documentation: http://developer.android.com/tools/ support-library/index.html • Index for Open Source Libraries: https://android-arsenal.com/ • e.G. Missing Ui Elements 45
  110. 110. Questions? AngeloRüggeberg twitter.com/ s3xy4ngyc google.com/+ s3xy4ngyc .github.io github.com/ s3xy4ngyc

×