Clip, Elevation and 
ViewOutlineProvider

Clip, Elevation and 
ViewOutlineProvider

90ec81078e4fd2b905f8ef0776887afa?s=128

Ryo Sakaguchi

May 15, 2019
Tweet

Transcript

  1. ©2019 Wantedly, Inc. QPUBUPUJQT !XBLXBL 3ZP4BLBHVDIJ 2019.5.15 - $MJQ &MFWBUJPOBOE


    7JFX0VUMJOF1SPWJEFS
  2. ©2019 Wantedly, Inc. Ryo Sakaguchi • Wantedly, Inc - Wantedly

    People • Android/CI/CD/UI • Kotlin/Sake/Beer/MtG/Guitar… • Twitter/GitHub: @wakwak3125
  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
  4. Design System ©2019 Wantedly, Inc.

  5. ©2019 Wantedly, Inc.

  6. ©2019 Wantedly, Inc.

  7. ©2019 Wantedly, Inc.

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

  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
  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.
  11. ©2019 Wantedly, Inc. Problem ImageView transformation

  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…
  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
  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!
  15. ©2019 Wantedly, Inc. ViewOutlineProvider What is ViewOutlineProvider?

  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
  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
  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.
  19. Thanks! ©2019 Wantedly, Inc.