Material Design 
Backwards Compatibility
2 
About Me 
• Mobile Development 
• Android 
• iOS 
• REST-Api Design 
• Cloud Infrastructure 
+Angelo Rüggeberg 
@s3xy4ngyc 
http://s3xy4ngyc.github.io
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
Distribution 
5
Distribution 
6
Distribution 
• Devices having Android 5.0 officially: 
• Nexus 5 
• Nexus 7 
• Nexus 9 
• LG G3 
6
Distribution 
7
Distribution 
7
Dependencies 
8
9
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' 
}
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.
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
Apply Material 
Theme 
10
11
11 
android: 
Theme.Material
11 
android: 
Theme.Material 
android: 
Theme.Material.Light
Theme.AppCompat Theme.AppCompat.Light 
11 
android: 
Theme.Material 
android: 
Theme.Material.Light
Apply Material Theme 
12
Apply Material Theme 
• Custom Style Extending Appcompat Style 
12
Apply Material Theme 
• Custom Style Extending Appcompat Style 
• Things to note: 
12
Apply Material Theme 
• Custom Style Extending Appcompat Style 
• Things to note: 
• No more @android duplicates 
12
Apply Material Theme 
• Custom Style Extending Appcompat Style 
• Things to note: 
• No more @android duplicates 
• No more v14+ Style Folder 
12
13
13
13
13
13
13
13
Apply Material Theme 
14
Apply Material Theme 
• Ui Elements that Get Material Design: 
• EditText 
• Spinner 
• CheckBox 
• RadioButton 
• Switch 
• CheckedTextView 
14
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
Action Bar Drawer 
Toggle 
15
16 
Action Bar Drawer Toggle
16 
Action Bar Drawer Toggle
Action Bar Drawer Toggle 
17
Action Bar Drawer Toggle 
• import 
android.support.v7.app.ActionBarDrawerT 
oggle 
• Extend from ActionBarActivity 
• Init DrawerToggle with Drawer Layout 
• Assign DrawerToggle to DrawerLayout 
17
18
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); 
}
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); 
}
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); 
}
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); 
}
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); 
}
Card View 
19
Card View 
20
Card View 
• Support for rounded Corners 
• Elevation Shadows 
20
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
21
22
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>
Recycler View 
23
Recycler View 
24
Recycler View 
• „Replacement“ for ListView 
• Implements the ViewHolderPattern 
• Improved Recycling 
• LayoutManager 
• Vertical List View 
• Horizontal List View 
• Staggered Grid View 
24
25
25 
Layout:
25 
Layout:
25 
Layout: 
Code:
25 
Layout: 
Code:
26
27 
Recycler View - Adapter
27 
Recycler View - Adapter 
Old Adapter: 
class MenuAdapterOld extends ArrayAdapter<String> {
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> {
28 
Recycler View - Adapter
28 
private ArrayList<String> mDataset; 
private OnItemClickListener mListener; 
public MenuAdapter(ArrayList<String> myDataset, OnItemClickListener listener) { 
mDataset = myDataset; 
mListener = listener; 
} 
Recycler View - Adapter
29 
Recycler View - Adapter
29 
private ArrayList<String> mDataset; 
private OnItemClickListener mListener; 
public MenuAdapter(ArrayList<String> myDataset, OnItemClickListener listener) { 
mDataset = myDataset; 
mListener = listener; 
} 
Recycler View - Adapter
29 
private ArrayList<String> mDataset; 
private OnItemClickListener mListener; 
public MenuAdapter(ArrayList<String> myDataset, OnItemClickListener listener) { 
mDataset = myDataset; 
mListener = listener; 
} 
Recycler View - Adapter
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(); 
}
30 
Recycler View - Adapter
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
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
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
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
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
31 
Recycler View - Adapter
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
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
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
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
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
32
32 
• Linear Layout 
Manager
32 
• Linear Layout 
Manager 
• Supports Smooth 
Scrolling
32 
• Linear Layout 
Manager 
• Supports Smooth 
Scrolling
33
33 
• Linear Layout 
Manager
33 
• Linear Layout 
Manager 
• Orientation 
Horizontal
33 
• Linear Layout 
Manager 
• Orientation 
Horizontal
34
34 
• Staggered Grid Layout 
Manager
34 
• Staggered Grid Layout 
Manager 
• Grid Size can be 
defined
34 
• Staggered Grid Layout 
Manager 
• Grid Size can be 
defined 
• Supports Vertical and 
Horizontal Scrolling
34 
• Staggered Grid Layout 
Manager 
• Grid Size can be 
defined 
• Supports Vertical and 
Horizontal Scrolling
Toolbar 
35
Toolbar 
37
Toolbar 
• ActionBar == Toolbar 
• Toolbar is a ViewGroup 
• Styleable 
• Positionable 
37
38 
Layout: 
Code:
39 
Standalone Widget:
Limitations 
40
Limitations 
41
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
Limitations 
42
Limitations 
• Elements not Included: 
• Fancy Material Progressbars 
• Buttons 
• Flat 
• Raised 
• Round / Floating 
• Sliders 
• Snackbars 
42
Limitations 
43
Limitations 
• Things not Supported on Pre 5.0: 
• Activity transitions 
• Touch feedback 
• Reveal animations 
• Path-based animations 
• Vector drawables 
• Drawable tinting 
43
44 
Useful Links
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
Questions? 
AngeloRüggeberg 
twitter.com/ 
s3xy4ngyc 
google.com/+ 
s3xy4ngyc 
.github.io 
github.com/ 
s3xy4ngyc

Material Design and Backwards Compatibility

  • 1.
  • 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.
  • 5.
  • 6.
  • 7.
    Distribution • Deviceshaving Android 5.0 officially: • Nexus 5 • Nexus 7 • Nexus 9 • LG G3 6
  • 8.
  • 9.
  • 10.
  • 11.
  • 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.
  • 16.
  • 17.
  • 18.
    11 android: Theme.Material android: Theme.Material.Light
  • 19.
    Theme.AppCompat Theme.AppCompat.Light 11 android: Theme.Material android: Theme.Material.Light
  • 20.
  • 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.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 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.
  • 36.
    16 Action BarDrawer Toggle
  • 37.
    16 Action BarDrawer Toggle
  • 38.
  • 39.
    Action Bar DrawerToggle • import android.support.v7.app.ActionBarDrawerT oggle • Extend from ActionBarActivity • Init DrawerToggle with Drawer Layout • Assign DrawerToggle to DrawerLayout 17
  • 40.
  • 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.
  • 47.
  • 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.
  • 51.
  • 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.
  • 54.
  • 55.
    Recycler View •„Replacement“ for ListView • Implements the ViewHolderPattern • Improved Recycling • LayoutManager • Vertical List View • Horizontal List View • Staggered Grid View 24
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 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.
  • 66.
    28 private ArrayList<String>mDataset; private OnItemClickListener mListener; public MenuAdapter(ArrayList<String> myDataset, OnItemClickListener listener) { mDataset = myDataset; mListener = listener; } Recycler View - Adapter
  • 67.
  • 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.
  • 72.
    30 public staticclass 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 staticclass 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 staticclass 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 staticclass 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 staticclass 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.
  • 78.
    31 @Override publicViewHolder 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 publicViewHolder 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 publicViewHolder 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 publicViewHolder 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 publicViewHolder 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.
  • 84.
    32 • LinearLayout Manager
  • 85.
    32 • LinearLayout Manager • Supports Smooth Scrolling
  • 86.
    32 • LinearLayout Manager • Supports Smooth Scrolling
  • 87.
  • 88.
    33 • LinearLayout Manager
  • 89.
    33 • LinearLayout Manager • Orientation Horizontal
  • 90.
    33 • LinearLayout Manager • Orientation Horizontal
  • 91.
  • 92.
    34 • StaggeredGrid Layout Manager
  • 93.
    34 • StaggeredGrid Layout Manager • Grid Size can be defined
  • 94.
    34 • StaggeredGrid Layout Manager • Grid Size can be defined • Supports Vertical and Horizontal Scrolling
  • 95.
    34 • StaggeredGrid Layout Manager • Grid Size can be defined • Supports Vertical and Horizontal Scrolling
  • 96.
  • 98.
  • 99.
    Toolbar • ActionBar== Toolbar • Toolbar is a ViewGroup • Styleable • Positionable 37
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
    Limitations • ActivityTransitions 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.
  • 106.
    Limitations • Elementsnot Included: • Fancy Material Progressbars • Buttons • Flat • Raised • Round / Floating • Sliders • Snackbars 42
  • 107.
  • 108.
    Limitations • Thingsnot Supported on Pre 5.0: • Activity transitions • Touch feedback • Reveal animations • Path-based animations • Vector drawables • Drawable tinting 43
  • 109.
  • 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