Clip, Elevation and 
ViewOutlineProvider

Transcript

1. ©2019 Wantedly, Inc. QPUBUPUJQT
    !XBLXBL
   3ZP
   4BLBHVDIJ 2019.5.15 - $MJQ
   &MFWBUJPO
   BOE


   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.