Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Clip, Elevation and 
ViewOutlineProvider

Clip, Elevation and 
ViewOutlineProvider

Ryo Sakaguchi

May 15, 2019
Tweet

More Decks by Ryo Sakaguchi

Other Decks in Programming

Transcript

  1. ©2019 Wantedly, Inc.
    QPUBUPUJQT
    !XBLXBL 3ZP4BLBHVDIJ

    2019.5.15 -
    $MJQ &MFWBUJPOBOE

    7JFX0VUMJOF1SPWJEFS

    View Slide

  2. ©2019 Wantedly, Inc.
    Ryo Sakaguchi
    • Wantedly, Inc - Wantedly People
    • Android/CI/CD/UI
    • Kotlin/Sake/Beer/MtG/Guitar…
    • Twitter/GitHub: @wakwak3125

    View Slide

  3. ©2019 Wantedly, Inc.
    1. ImageView Transformation
    • RoundedCorners/Circle
    • Approach
    • BitmapTransformation/Clip
    • Pros/Cons
    2. ViewOutlineProvider
    • What is ViewOutlineProvider?
    • How to use
    3. WrapUp
    Today’s topics What I talk today

    View Slide

  4. Design System
    ©2019 Wantedly, Inc.

    View Slide

  5. ©2019 Wantedly, Inc.

    View Slide

  6. ©2019 Wantedly, Inc.

    View Slide

  7. ©2019 Wantedly, Inc.

    View Slide

  8. ©2019 Wantedly, Inc.
    RoundedCorners/Circle
    ImageView transformation

    View Slide

  9. ©2019 Wantedly, Inc.
    RoundedCorners/Circle Approach
    BitmapTransformation (Picasso/Glide)
    Transform the Bitmap to be displayed
    • Pros
    • Easy to use
    • Faster development
    • Cons
    • Hard to make transformation animation

    View Slide

  10. ©2019 Wantedly, Inc.
    RoundedCorners/Circle Approach
    Clip
    Transform the View to be displayed
    • Pros
    • Easy to make transformation animation
    • Easy to share as CustomView
    • Preview is available with LayoutEditor
    • Cons
    • You should have some knowledge of Canvas a little.
    • Development is a little bit harder.

    View Slide

  11. ©2019 Wantedly, Inc.
    Problem
    ImageView transformation

    View Slide

  12. ©2019 Wantedly, Inc.
    View transformation Problem
    Elevation
    The elevation does not work properly
    • BitmapTransofrmation
    • Shadow will appear around view’s original shape.
    • Clip
    • Shadow will not appear…

    View Slide

  13. ©2019 Wantedly, Inc.
    View transformation Problem
    Why?
    Both approaches do not provide the Outline to view correctly.
    • BitmapTransofrmation
    • The outline provided to its original shape(rectangle)
    • Clip
    • Outline has disappeared

    View Slide

  14. ©2019 Wantedly, Inc.
    View transformation Problem
    Why?
    Both approaches do not provide the Outline to view correctly.
    • BitmapTransofrmation
    • The outline provided to its original shape(rectangle)
    • Clip
    • Outline has disappeared
    But, ViewOutlineProvider helps you!

    View Slide

  15. ©2019 Wantedly, Inc.
    ViewOutlineProvider
    What is ViewOutlineProvider?

    View Slide

  16. ©2019 Wantedly, Inc.
    What is this? ViewOutlineProvider
    ViewOutlineProvider
    Interface by which a View builds its Outline, used for shadow casting and clipping*1
    • Easy to clip and transform the view
    • Just implement one method and apply this.
    • Elevation works correctly!
    • Fully work with elevation
    • Limitation
    • API 21~
    • Convex/Rect/RoundedRect/Oval
    *1 https://developer.android.com/reference/android/view/ViewOutlineProvider

    View Slide

  17. ©2019 Wantedly, Inc.
    How to use? ViewOutlineProvider
    Implementation
    Just set the ViewOutlineProvider instance and set clipToOutline to true.
    *1 https://developer.android.com/reference/android/view/ViewOutlineProvider

    View Slide

  18. ©2019 Wantedly, Inc.
    Clip, Elevation and ViewOutlinProvider
    WrapUp
    Using ViewOutlineProvider helps your CustomView development.
    • Elevation does not work correctly with just clip the view.
    • You should use ViewOutlineProvider and set outline to your view.
    • BitmapTransformation is easy but…
    • In some case, it does not fill your requirements.

    View Slide

  19. Thanks!
    ©2019 Wantedly, Inc.

    View Slide