Clip, Elevation and 
ViewOutlineProvider

Clip, Elevation and 
ViewOutlineProvider

90ec81078e4fd2b905f8ef0776887afa?s=128

Ryo Sakaguchi

May 15, 2019
Tweet

Transcript

  1. 2.

    ©2019 Wantedly, Inc. Ryo Sakaguchi • Wantedly, Inc - Wantedly

    People • Android/CI/CD/UI • Kotlin/Sake/Beer/MtG/Guitar… • Twitter/GitHub: @wakwak3125
  2. 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
  3. 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
  4. 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.
  5. 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…
  6. 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
  7. 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!
  8. 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
  9. 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
  10. 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.