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

0faee5216d2841b23acdbfa28588e2de?s=47 Alex Curran
November 17, 2014

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

0faee5216d2841b23acdbfa28588e2de?s=128

Alex Curran

November 17, 2014
Tweet

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?