Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

©2019 Wantedly, Inc. Ryo Sakaguchi • Wantedly, Inc - Wantedly People • Android/CI/CD/UI • Kotlin/Sake/Beer/MtG/Guitar… • Twitter/GitHub: @wakwak3125

Slide 3

Slide 3 text

©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

Slide 4

Slide 4 text

Design System ©2019 Wantedly, Inc.

Slide 5

Slide 5 text

©2019 Wantedly, Inc.

Slide 6

Slide 6 text

©2019 Wantedly, Inc.

Slide 7

Slide 7 text

©2019 Wantedly, Inc.

Slide 8

Slide 8 text

©2019 Wantedly, Inc. RoundedCorners/Circle ImageView transformation

Slide 9

Slide 9 text

©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

Slide 10

Slide 10 text

©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.

Slide 11

Slide 11 text

©2019 Wantedly, Inc. Problem ImageView transformation

Slide 12

Slide 12 text

©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…

Slide 13

Slide 13 text

©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

Slide 14

Slide 14 text

©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!

Slide 15

Slide 15 text

©2019 Wantedly, Inc. ViewOutlineProvider What is ViewOutlineProvider?

Slide 16

Slide 16 text

©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

Slide 17

Slide 17 text

©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

Slide 18

Slide 18 text

©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.

Slide 19

Slide 19 text

Thanks! ©2019 Wantedly, Inc.