android lollipop and material design
TRANSCRIPT
James Montemagno Developer Evangelist, Xamarin @JamesMontemagno
Sweeten Up Your Android Apps with Lollipop and
Material Design
Who’s this guy?
James Montemagno
Developer Evangelist
[email protected] http://motz.codes @JamesMontemagno
Android Lollipop
Android Lollipop Major Features
§ ART Runtime!§ Material Design!§ Widgets, Views, and Shadows!§ Animations!§ Notifications!§ Compatibility!
MaterialDesign
Android L Major Features
google.com/design/spec/material-‐design/introduction.html
Bold, graphic, intentional Material metaphor Motion provides meaning
§ Brand new style for applications.
• Theme.Material • Theme.Material.Light • Theme.Material.Light.
DarkActionBar
Material Design
§ colorPrimary – App Branding Color
§ colorPrimaryDark – Status bar & contextual bars
§ colorAccent – Theme UI Controls (﴾ie. checkbox)﴿
Material Design – Color Palette
Material Design – Color Palette
Let’s Look
§ AppCompat v21 to the Rescue!! § New Themes § New Controls § New Support Libraries
Lollipop Only?
§ Brand new style for applications.
• Theme.AppCompat • Theme.AppCompat.Light • Theme.AppCompat.Light.
DarkActionBar
AppCompat Material Design
App Compat Material Design – Color Palette
§ Google Design Guidelines – http://www.google.com/design/spec/style/color.html#color-‐color-‐palette
Find Your Theme
§ Material Palette materialpalette.com
Find Your Theme
§ Also use:
– SupportActionBar
Update Activity
§ 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
Step 1: toolbar.axml
Step 2: Insert into Activity axml
Step 3: Update ActionBarActivity
Step 4: Update Theme
Optional: Additional Toolbars
Add into axml & FindViewById:
Complete!
h6p://developer.xamarin.com/samples/monodroid/Supportv7/AppCompat/Toolbar/
Let’s Look
Xamarin.Forms?
Kind of J
h6ps://github.com/jamesmontemagno/Hanselman.Forms
Add Style-‐v21 values/styles.xml
values-‐v21/styles.xml
Remove Icon
Update Hamburger Button
MasterDetailPage -‐Set Icon to “slideout.png” or whatever you have named it -‐Add default and v21 drawables
Let’s Look
Views and Shadows
§ Palettes § CardView § RecyclerView § Elevation
Android Lollipop Major Features
§ 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/
§ Bitmaps as alpha maps § android:tint=“@color/blue”
Material Design – Drawable Tint
CardView
Wrap any view in a CardView
https://www.nuget.org/packages Xamarin.Android.Support.v7.CardView/
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
Elevation
§ android:elevation=“2dp” § View.SetTranslationZ method § Z = elevation + translationZ
Demo
Animations § Touch Feedback § Reveal § Activity Transitions
Android Lollipop Major Features
Surface reaction
Animation
Surface reaction
Animation
Material response
Surface reaction
Animation
Material response Radial action
§ Default Touch Feedback Animation: RippleDrawable
§ Set Background to: • ?android:attr/
selectableItemBackground • ?android:attr/
selectableItemBackgroundBorderless § Create custom RippleDrawable using
the ripple element
Animation – Touch Feedback
Animation – Reveal
§ Easily create clipping circles
§ 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
Let’s Look
Notifications § Lock Screen Notifications § Notifications Metadata § Unified Notifications
Android Lollipop Major Features
§ 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)﴿
§ 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)﴿
Unified Notifications – Standard and Extended
Compatibility& More
§ New APIs § Android Lollipop Small Features § Google Play Services via NuGet
Android Lollipop Major Features
§ 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
§ 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
§ 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
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
Views § Floating Action Button (﴾FAB)﴿ § Page Slider
Android Lollipop – Not Built In
§ https://components.xamarin.com/view/fab
Floating Action Button
§ https://components.xamarin.com/view/PagerSlidingTabStrip
Pager Slider
Demo
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
§ 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
James Montemagno Developer Evangelist, Xamarin @JamesMontemagno
Thank you! Q & A