Android Lollipop - Webinar am 11.12.2014
0 likes•1,676 views
The document discusses Material Design and its backward compatibility for mobile development, specifically for Android, outlining key components, setup dependencies, and UI elements such as CardView and RecyclerView. It includes examples of code for creating custom styles, implementing action bar drawer toggles, and creating adapters for RecyclerView. The document emphasizes the importance of using Material Design themes and layouts in mobile applications.
Android Lollipop - Webinar am 11.12.2014
- 1. Material Design Backwards Compatibility
- 2. 2 About Me • Mobile Development • Android • iOS • REST-Api Design • Cloud Infrastructure +Angelo Rüggeberg @s3xy4ngyc http://s3xy4ngyc.github.io
- 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
- 7. Distribution • Devices having Android 5.0 officially: • Nexus 5 • Nexus 7 • Nexus 9 • LG G3 6
- 10. Dependencies 8
- 11. 9
- 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. 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. 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. Apply Material Theme 10
- 16. 11
- 18. 11 android: Theme.Material android: Theme.Material.Light
- 19. Theme.AppCompat Theme.AppCompat.Light 11 android: Theme.Material android: Theme.Material.Light
- 20. Apply Material Theme 12
- 21. Apply Material Theme • Custom Style Extending Appcompat Style 12
- 22. Apply Material Theme • Custom Style Extending Appcompat Style • Things to note: 12
- 23. Apply Material Theme • Custom Style Extending Appcompat Style • Things to note: • No more @android duplicates 12
- 24. Apply Material Theme • Custom Style Extending Appcompat Style • Things to note: • No more @android duplicates • No more v14+ Style Folder 12
- 25. 13
- 26. 13
- 27. 13
- 28. 13
- 29. 13
- 30. 13
- 31. 13
- 32. Apply Material Theme 14
- 33. Apply Material Theme • Ui Elements that Get Material Design: • EditText • Spinner • CheckBox • RadioButton • Switch • CheckedTextView 14
- 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. Action Bar Drawer Toggle 15
- 36. 16 Action Bar Drawer Toggle
- 37. 16 Action Bar Drawer Toggle
- 38. Action Bar Drawer Toggle 17
- 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. 18
- 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. 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. 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. 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. 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. Card View 19
- 47. Card View 20
- 48. Card View • Support for rounded Corners • Elevation Shadows 20
- 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. 21
- 51. 22
- 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. Recycler View 23
- 54. Recycler View 24
- 55. Recycler View • „Replacement“ for ListView • Implements the ViewHolderPattern • Improved Recycling • LayoutManager • Vertical List View • Horizontal List View • Staggered Grid View 24
- 56. 25
- 57. 25 Layout:
- 58. 25 Layout:
- 59. 25 Layout: Code:
- 60. 25 Layout: Code:
- 61. 26
- 62. 27 Recycler View - Adapter
- 63. 27 Recycler View - Adapter Old Adapter: class MenuAdapterOld extends ArrayAdapter<String> {
- 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. 28 Recycler View - Adapter
- 66. 28 private ArrayList<String> mDataset; private OnItemClickListener mListener; public MenuAdapter(ArrayList<String> myDataset, OnItemClickListener listener) { mDataset = myDataset; mListener = listener; } Recycler View - Adapter
- 67. 29 Recycler View - Adapter
- 68. 29 private ArrayList<String> mDataset; private OnItemClickListener mListener; public MenuAdapter(ArrayList<String> myDataset, OnItemClickListener listener) { mDataset = myDataset; mListener = listener; } Recycler View - Adapter
- 69. 29 private ArrayList<String> mDataset; private OnItemClickListener mListener; public MenuAdapter(ArrayList<String> myDataset, OnItemClickListener listener) { mDataset = myDataset; mListener = listener; } Recycler View - Adapter
- 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. 30 Recycler View - Adapter
- 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. 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. 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. 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. 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. 31 Recycler View - Adapter
- 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. 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. 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. 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. 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. 32
- 84. 32 • Linear Layout Manager
- 85. 32 • Linear Layout Manager • Supports Smooth Scrolling
- 86. 32 • Linear Layout Manager • Supports Smooth Scrolling
- 87. 33
- 88. 33 • Linear Layout Manager
- 89. 33 • Linear Layout Manager • Orientation Horizontal
- 90. 33 • Linear Layout Manager • Orientation Horizontal
- 91. 34
- 92. 34 • Staggered Grid Layout Manager
- 93. 34 • Staggered Grid Layout Manager • Grid Size can be defined
- 94. 34 • Staggered Grid Layout Manager • Grid Size can be defined • Supports Vertical and Horizontal Scrolling
- 95. 34 • Staggered Grid Layout Manager • Grid Size can be defined • Supports Vertical and Horizontal Scrolling
- 96. Toolbar 35
- 98. Toolbar 37
- 99. Toolbar • ActionBar == Toolbar • Toolbar is a ViewGroup • Styleable • Positionable 37
- 100. 38 Layout: Code:
- 102. Limitations 40
- 103. Limitations 41
- 104. 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
- 105. Limitations 42
- 106. Limitations • Elements not Included: • Fancy Material Progressbars • Buttons • Flat • Raised • Round / Floating • Sliders • Snackbars 42
- 107. Limitations 43
- 108. Limitations • Things not Supported on Pre 5.0: • Activity transitions • Touch feedback • Reveal animations • Path-based animations • Vector drawables • Drawable tinting 43
- 109. 44 Useful Links
- 110. 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
- 112. Questions? AngeloRüggeberg twitter.com/ s3xy4ngyc google.com/+ s3xy4ngyc .github.io github.com/ s3xy4ngyc