Lollipop and iPlayer - what's new with Material Design?

Take a look at the new APIs available in Android Lollipop, how to apply them, and what they look like in a production environment.

Want more information? Check here: https://github.com/amlcurran/L-Preview-Demo

Transcript

1. Lollipop and iPlayer What’s new with Material design?
2. @amlcurran About me • Software Engineer at BBC • Mobile Core Engineering • Worked on iPlayer for Chromecast and iPlayer mobile downloads
3. @amlcurran A quick note… • The iPlayer images in this presentation don’t represent the real deal! • This was my innovation time project • No guarantees any of this will make it into iPlayer
4. @amlcurran Lollipop • The latest release of Android (5.0) • Big UI changes • Focus on notifications • Lots of interesting new APIs
5. @amlcurran Material Design • Google’s new design language • Concept of paper (background) and ink (UI elements) • Bold colours, layering • Significantly improved UI animation and interaction
6. @amlcurran Key new UI bits • View elevation • Improved app theming • Ripple effect • Circular reveals • Activity transitions and shared elements • CardView and RecyclerView
7. @amlcurran View elevation • New property available in 5.0 • Use to draw dynamic shadows on and over views • Elevation is permanent height • Translation Z is used primarily to animate • New StateListAnimator <!-- animate the translationZ property of a view when pressed -->
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_pressed="true">
 <set>
 <objectAnimator android:propertyName="translationZ"
 android:duration="@android:integer/config_shortAnimTime"
 android:valueTo="4dp"
 android:valueType="floatType"/>
 </set>
 </item>
 <item>
 <set>
 <objectAnimator android:propertyName="translationZ"
 android:duration="100"
 android:valueTo="0"
 android:valueType="floatType"/>
 </set>
 </item>
 </selector>
8. @amlcurran Circles everywhere • New circular reveal and ripple animations • Ripples generally for touch feedback • Circular reveal to expose content (but don’t overuse!) • Circular reveal really easy <ripple xmlns:android="http://schemas.android.com/apk/res/android"
 android:color="@color/accent">
 
 <item android:id="@android:id/mask"
 android:drawable="@android:color/white" />
 
 </ripple> <ripple xmlns:android="http://schemas.android.com/apk/res/android"
 android:color="@color/primary">
 
 <!-- Unbounded ripple -->
 
 </ripple> int lastTouchX = (int) event.getX();
 int lastTouchY = (int) event.getY();
 int maxDimen = Math.max(view.getWidth(), view.getHeight());
 Animator circularReveal = ViewAnimationUtils.createCircularReveal(view,
 lastTouchX, lastTouchY, maxDimen, 0);
 circularReveal.addListener(new SetVisiblityGoneWhenFinishedListener());
 circularReveal.start();
9. @amlcurran Easy UI theming • Material theme makes it much easier to create themed activities • colorPrimary = ActionBar colour • colorPrimaryDark = status bar colour (statusBarColor defaults to this) • colorAccent = widget accents • colorControlHighlight = pressed/focused highlight <style name="AppTheme.Custom" parent="android:Theme.Material.Light.DarkActionBar">
 <item name="android:colorPrimary">@color/primary</item>
 <item name="android:colorPrimaryDark">@color/primary_dark</item>
 <item name="android:colorAccent">@color/primary</item>
 <item name="android:colorControlHighlight">@color/accent</item>
 </style>
10. @amlcurran public class TransitionEntryActivity extends Activity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
 
 setContentView(R.layout.activity_transition_entry);
 findViewById(R.id.imageView).setOnClickListener(
 new TransitionClickListener(this));
 }
 
 private class TransitionClickListener implements View.OnClickListener {
 
 private final Activity activity;
 
 public TransitionClickListener(Activity activity) {
 this.activity = activity;
 }
 
 @Override
 public void onClick(View view) {
 Intent intent = new Intent(activity, TransitionLargeImageActivity.class);
 ActivityOptions activityOptions = ActivityOptions
 .makeSceneTransitionAnimation(activity, view, "kitten");
 startActivity(intent, activityOptions.toBundle());
 }
 }
 } Activity transitions • Enter transition, exit transition, or shared element transition • Very simple to set-up • Bit janky - didn’t work at all in iPlayer • Set up transitions easily in theme or in code • Shared elements require transitionName attribute public class TransitionLargeImageActivity extends Activity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
 setContentView(R.layout.activity_single_large_image);
 }
 
 }
11. @amlcurran Other APIs • Notification improvements - assign people, colours, public and private notifications • Palette - colourisation from an image • MediaSession - new API for controlling media replacing RemoteControlClient • RecyclerView and CardView • Not even talking about Android TV, Auto, or Wear! Palette palette = Palette.generate(bitmap);
 
 int defaultNormal = getResources().getColor(R.color.primary);
 int defaultDark = getResources().getColor(R.color.primary_dark);
 
 int darkVibrantColor = palette.getDarkVibrantColor(defaultDark);
 int vibrantColor = palette.getVibrantColor(defaultNormal);
 
 getWindow().setStatusBarColor(darkVibrantColor);
 getActionBar().setBackgroundDrawable(new ColorDrawable(vibrantColor));
12. @amlcurran Low-hanging fruit • Update to Material theme for v21 • Notification colours • Use of colour ripples for touch feedback
13. @amlcurran Even lower fruit… • Use appcompat support library to get material design on pre-Lollipop devices • Includes ActionBar colours and styles • Toolbar API
14. @amlcurran More resources • Lollipop site http://www.android.com/versions/ lollipop-5-0/ • Material Design site http://www.google.co.uk/ design/spec/material-design/introduction.html • Demo project https://github.com/amlcurran/L- Preview-Demo • Styling Android http://blog.stylingandroid.com
15. @amlcurran And whilst I’m here… • We’re looking for a mid-level developer with Android experience to work on iPlayer • Chat to me or go to our careers website (http:// bit.ly/1zp7uwS) • Open evening Tues 2nd December as well (http:// www.eventbrite.co.uk/e/bbc-future-media-open- evening-tickets-13574837705)
16. Questions?