The document discusses various Material Design components and techniques for implementing them in Android, including: - Applying a Material Theme by setting android:Theme.Material - Using CardView for visual cards with rounded corners and shadows - Implementing RecyclerView with adapters for lists and grids - Adding a navigation drawer with ActionBarDrawerToggle

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

5. Distribution
5

6. Distribution
6

7. Distribution
• Devices having Android 5.0 officially:
• Nexus 5
• Nexus 7
• Nexus 9
• LG G3
6

8. Distribution
7

9. Distribution
7

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

17. 11
android:
Theme.Material

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:

101. 39
Standalone Widget:

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