Android 5.0 Lollipop introduced a complete refresh, known as Material Design, to the Android user interface, which generated rapid adoption throughout the development community. Until Google introduced revision 21 of the Android Support v7 AppCompat library, Material Design themes, controls, and features were utilized only if you wanted to target devices running API 21. Come learn about everything available in Android 5.0 and how you can leverage the brand new App Compat libraries to make your apps shine. We will also go into some great libraries and project templates to take your apps to the next level.

1. James Montemagno
Developer Evangelist, Xamarin
@JamesMontemagno
Sweeten Up Your Android
Apps with Lollipop and
Material Design

2. Who’s this guy?
James
Montemagno
Developer
Evangelist
james@xamarin.com
http://motz.codes
@JamesMontemagno

3. Android Lollipop

4. Android Lollipop Major Features
§ ART Runtime!
§ Material Design!
§ Widgets, Views, and Shadows!
§ Animations!
§ Notifications!
§ Compatibility!

5. Material
Design
Android L Major Features
google.com/design/spec/material-‐design/introduction.html
Bold, graphic, intentional
Material metaphor
Motion provides meaning

6. § Brand new style for
applications.
• Theme.Material
• Theme.Material.Light
• Theme.Material.Light.
DarkActionBar
Material Design

7. § colorPrimary – App
Branding Color
§ colorPrimaryDark – Status
bar & contextual bars
§ colorAccent – Theme UI
Controls (﴾ie. checkbox)﴿
Material Design – Color Palette

8. Material Design – Color Palette

9. Let’s
Look

10. § AppCompat v21 to the Rescue!!
§ New Themes
§ New Controls
§ New Support Libraries
Lollipop Only?

11. § Brand new style for
applications.
• Theme.AppCompat
• Theme.AppCompat.Light
• Theme.AppCompat.Light.
DarkActionBar
AppCompat Material Design

12. App Compat Material Design – Color Palette

13. § Google Design Guidelines
– http://www.google.com/design/spec/style/color.html#color-‐color-‐palette
Find Your Theme

14. § Material Palette
materialpalette.com
Find Your Theme

15. § Also use:
– SupportActionBar
Update Activity

16. § Extendable & Customizable
ActionBar
– Inherits from ActionBar
§ You can have multiple in your
Layout now!
§ Uses the same menu items!
§ Works with AppCompat
Goodbye ActionBar, Hello Toolbar

17. Step 1: toolbar.axml

18. Step 2: Insert into Activity axml

19. Step 3: Update ActionBarActivity

20. Step 4: Update Theme

21. Optional: Additional Toolbars
Add
into
axml
&
FindViewById:

22. Complete!
h6p://developer.xamarin.com/samples/monodroid/Supportv7/AppCompat/Toolbar/

23. Let’s
Look

24. Xamarin.Forms?

25. Kind of J
h6ps://github.com/jamesmontemagno/Hanselman.Forms

26. Add Style-‐v21
values/styles.xml
values-­‐v21/styles.xml

27. Remove Icon

28. Update Hamburger Button
MasterDetailPage
-­‐Set
Icon
to
“slideout.png”
or
whatever
you
have
named
it
-­‐Add
default
and
v21
drawables

29. Let’s
Look

30. Views and
Shadows
§ Palettes
§ CardView
§ RecyclerView
§ Elevation
Android Lollipop Major Features

31. § Extract Prominent
Colors from Image
§ 6 Palettes Generated
Generate a color pallet from an image
Material Design –Palettes
https://www.nuget.org/packages/Xamarin.Android.Support.v7.Palette/

32. § Bitmaps as alpha maps
§ android:tint=“@color/blue”
Material Design – Drawable Tint

33. CardView
Wrap any view in a CardView
https://www.nuget.org/packages Xamarin.Android.Support.v7.CardView/

34. RecyclerView
https://www.nuget.org/packages/Xamarin.Android.Support.v7.RecyclerView/
§ High speed efficient ListView
§ Includes layout manager for positioning items
§ Default animations for common item operations

35. Elevation
§ android:elevation=“2dp”
§ View.SetTranslationZ method
§ Z = elevation + translationZ

36. Demo

37. Animations
§ Touch Feedback
§ Reveal
§ Activity Transitions
Android Lollipop Major Features

38. Surface reaction
Animation

39. Surface reaction
Animation
Material response

40. Surface reaction
Animation
Material response
Radial action

41. § Default Touch Feedback Animation:
RippleDrawable
§ Set Background to:
• ?android:attr/
selectableItemBackground
• ?android:attr/
selectableItemBackgroundBorderless
§ Create custom RippleDrawable using
the ripple element
Animation – Touch Feedback

42. Animation – Reveal
§ Easily create
clipping circles

43. § Custom animations for enter and exit transitions
of activities
• Enter: How views in the activity enter
• Exit: How view in activity exit
• Shared Elements: How views that are shared
between 2 activities animate
Animation – Activity Transitions

44. Let’s
Look

45. Notifications
§ Lock Screen Notifications
§ Notifications Metadata
§ Unified Notifications
Android Lollipop Major Features

46. § Android.App.Notification.Builder.SetVisibility(﴾)﴿
• Private: Shows basic information such as icon, but
hides full content
• Public: Show the notification's full content
• Secret: Show nothing, excluding even the
notification’s icon
New APIs – Lock Screen Notifications (﴾Android Lollipop)﴿

47. § SetCategory(﴾)﴿: Tells the system how to handle
notifications when the device is in Do not Disturb
§ SetPriority(﴾)﴿: Set to Max or High to appear in a
small floating window if the sound also has a vibration
or sound.
§ AddPerson(﴾)﴿: Add a list of people to notification.
New APIs – Notifications Metadata (﴾Android Lollipop)﴿

48. Unified Notifications – Standard and Extended

49. Compatibility
& More
§ New APIs
§ Android Lollipop Small Features
§ Google Play Services via NuGet
Android Lollipop Major Features

50. § Material Theme
• Only available in Android L
Developer Preview
o Define theme that inherits from
older theme (﴾like Holo)﴿ in res/
values/styles.xml
o Define them with same name that
inherits from Material in res/values-‐
v21/styles.xml
o Set theme as your app’s theme in
manifest file
New APIs – Compatibility
§ Layouts
• Do not use any of the new XML attributes from
Android L Developer Preview, they will not work
with previous versions of Android.
• You must provide alternative layouts if you wish
to use them
o L Preview Layouts: res/layout-‐v21/
o Alternative Layouts: res/layout/
o Do avoid duplication of code, define styles in
res/values/
o Modify the style in res/values-‐v21/ for new APIs

51. § UI Widgets
• Support v7: RecyclerView & CardView
o Limitations (﴾pre-‐L Preview)﴿:
o CardView falls back to
programmatic shadows
implementation using additional
padding
o CardView does not clip its children
that intersect with rounded corners
New APIs – Compatibility
§ Animations
• Following are Android L Developer Preview ONLY:
o Activity Transitions
o Touch feedback
o Reveal animations
o Path-‐based animations

52. § Camera
• Enhanced image and
video capturing. Capture
Raw sensor data.
§ Multi-‐networking
• Dynamically scan for
available network with
specific capability and
automatically connect.
§ BLE Peripheral Mode
• Apps that connect to devices
such as pedometer or health
monitor and transfer data to
another BLE device.
§ Document-‐Centric Recents
§ Job Scheduler
Android L Small Features

53. Google Play Services via NuGet
§ Play Game Services: event –based challenges, saved
games, and game profiles
§ App Indexing API
§ Google Cast: Media tracks for closed captioning
§ Wallet: Save to Wallet, geo-‐fenced in-‐store notifications,
split tender between wallet & card
§ Analytics: Measure product impressions/product clicks
§ Mobile Ads: in-‐app purchase ads
§ Dynamic Security Provider

54. Views
§ Floating Action Button (﴾FAB)﴿
§ Page Slider
Android Lollipop – Not Built In

55. § https://components.xamarin.com/view/fab
Floating Action Button

56. § https://components.xamarin.com/view/PagerSlidingTabStrip
Pager Slider

57. Demo

58. Android Recap
• Android Lollipop
• Material Design
• Views & Animations
• Notifications
• New Templates
– https://visualstudiogallery.msdn.microsoft.com/
bee6442f-‐8f5a-‐4bba-‐8849-‐e380b61e76b0
• AppCompat is your new friend

59. § Intro to AppCompat & Toolbar!
§ http://blog.xamarin.com/android-tips-hello-material-design-v7-appcompat/!
§ http://blog.xamarin.com/android-tips-hello-toolbar-goodbye-action-bar/!
§ Android L Documentation!
§ http://developer.xamarin.com/guides/android/platform_features/android_l/
introduction_to_android_l/!
!
§ Samples!
§ http://developer.xamarin.com/samples/android/!
Resources

60. James Montemagno
Developer Evangelist, Xamarin
@JamesMontemagno
Thank you!
Q & A