Clip, Elevation and ViewOutlineProvider

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