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.