YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← Implementing Instructive Motion

Get Embed Code
6 Languages

Showing Revision 3 created 05/24/2016 by Udacity Robot.

  1. Let's see what implementing
    instructive motion might look like.
  2. In this example, we have a full bleed
    image and some content below it.
  3. There's a tension here,
    we want to show the image in full, but
  4. we also want to indicate that
    there's more text available.
  5. And perhaps, we want to show some of
    that text content right away too.
  6. What we can do is start off with
    the image fully visible, but
  7. then immediately slide up some of the
    text to indicate there's more content.
  8. Let's see how we can implement
    this pretty simple form
  9. of instructive motion.
  10. Let's start with the layout.
  11. Nothing fancy here, just a frame
    layout with a fixed height image, and
  12. a scroll view in front of it.
  13. The linear layout in the scroll view
    will contain our text content, and
  14. have a white background.
  15. We'll give the linear layout
    a little elevation to make it clear
  16. that it's a distinct surface.
  17. Now, at the default scroll position,
    you see the full image,
  18. but very little text content.
  19. All we need to do is
    animate the scroll position
  20. as the screen first opens to a position
    that shows more of the text content.
  21. Here we're using an ObjectAnimator
    to animate the scrollY property
  22. of the ScrollView.
  23. We could just use the ScrollView's
    smoothScrollTo method, but
  24. this gives you a bit more
    control over that animation.
  25. We start the animation inside of
    onEnterAnimationComplete to ensure that
  26. the window transition ends first
    before we start the animation.
  27. This is only available in
    Android 5.0 and later, but
  28. you could fake it on earlier versions
    using something like a start delay.
  29. The effect is that you get a quick
    preview of the image before you start
  30. reading about it.
  31. And you quickly realize you could
    quickly scroll up to see that
  32. image in full again or
    down to read more.