Android Lollipop and Material Design

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


§  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


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.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


§  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

Android Lollipop and Material Design

Engineering