Color Blending on Android

Sometimes you would like to blend two colors into one, dynamically; for example as ViewPager gets scrolled, you want one color to dynamically change to the other color smoothly.

In this case, ColorUtils would be helpful.

In this talk I talked about how I used ColorUtis to achieve the desired UI by giving example of the implementation detail for Torte application.

See also:
ColorUtils | Android Developers
https://developer.android.com/reference/android/support/v4/graphics/ColorUtils.html

shaunkawano/android-color-blending-sample: Sample Android application demonstrating how color blending can be achieved on Android
https://github.com/shaunkawano/android-color-blending-sample

Transcript

1. Color Blending
   on Android
   shaunkawano
   

   View Slide

2. View Slide

3. w ϓϩϑΟʔϧը૾ʴ࠷େຕΞϧόϜը૾
   w 7JFX1BHFSͰදࣔ͠ɺԣϑϦοΫͰ͘͘͞͞ݟ
   ΕΔ
   w ̍ຕ໨͔Β̎ຕ໨ʹભҠ͢ΔࡍʹϢʔβʔΞΠίϯ
   ΛҾ͖৳͹͠ϒϥʔΛ͔͚ͯഎܠͱͯ͠දࣔ
   ͜Μͳ6*࡞Γ͍ͨʂ
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. ςΩετʴϒϥʔ໰୊
   ৭͕ॏͳͬͯ͠·͏໰୊ʹจࣈ͕ಡΈʹ͍͘
   ղܾࡦ
   w ࠇςΩετͷԼʹനγϟυʔΛৗઃ
   w നςΩετͷԼʹࠇγϟυʔΛஔ͘ʢ"DUJWJUZࣗ
   ମ͸നഎܠͳͷͰςΩετΧϥʔಈతʹม͍͑ͨ
   w ϒϥʔ΍ΊΔʂʂ
   

   View Slide

8. ςΩετʴϒϥʔ໰୊
   ৭͕ॏͳͬͯ͠·͏໰୊ʹจࣈ͕ಡΈʹ͍͘
   ղܾࡦ
   w ࠇςΩετͷԼʹനγϟυʔΛৗઃ
   w നςΩετͷԼʹࠇγϟυʔΛஔ͘ʢ"DUJWJUZࣗ
   ମ͸നഎܠͳͷͰςΩετΧϥʔಈతʹม͍͑ͨ
   w ϒϥʔ΍ΊΔʂʂ
   

   View Slide

9. View Slide

10. View Slide

11. ColorUtils
    IUUQTEFWFMPQFSBOESPJEDPNSFGFSFODFBOESPJETVQQPSUWHSBQIJDT
    $PMPS6UJMTIUNM
    

    View Slide

12. support.v4.graphics
    ColorUtils.blendARGB
    

    View Slide

13. WBMCMFOEFE$PMPS
    $PMPS6UJMTCMFOE"3(# DPMPS DPMPS SBUJP
    
    

    View Slide

14. WBMCMFOEFE$PMPS
    $PMPS6UJMTCMFOE"3(# DPMPS DPMPS SBUJP
    
    

    View Slide

15. WBMCMFOEFE$PMPS
    $PMPS6UJMTCMFOE"3(# DPMPS DPMPS SBUJP
    
    

    View Slide

16. WBMCMFOEFE$PMPS
    $PMPS6UJMTCMFOE"3(# DPMPS DPMPS SBUJP
    
    

    View Slide

17. WBMCMFOEFE$PMPS
    $PMPS6UJMTCMFOE"3(# DPMPS DPMPS SBUJP
    
    SBUJP
    SBUJP
    

    View Slide

18. JUBEE0O1BHF$IBOHF-JTUFOFS
    ʜ
    PWFSSJEFGVOPO1BHF4DSPMMFE QPTJUJPO*OU P⒎TFU'MPBU P⒎TFU1JYFMT*OU
    \
    ʜ
    JG QPTJUJPO
    \
    WBMSBUJPQPTJUJPOQPTJUJPO0⒎TFU
    WBMCMFOEFE$PMPS$PMPS6UJMTCMFOE"3(# EFGBVMU$PMPS $PMPS8)*5& SBUJP
    
    CJOEJOHUJUMF5FYUTFU5FYU$PMPS CMFOEFE$PMPS
    
    CJOEJOHIPNF"T6Q*OEJDBUPS5FYUTFU5FYU$PMPS CMFOEFE$PMPS
    
    CJOEJOHCMVS-BZPVUBMQIBSBUJP
    ^
    ʜ
    

    View Slide

19. JUBEE0O1BHF$IBOHF-JTUFOFS
    ʜ
    PWFSSJEFGVOPO1BHF4DSPMMFE QPTJUJPO*OU P⒎TFU'MPBU P⒎TFU1JYFMT*OU
    \
    ʜ
    JG QPTJUJPO
    \
    WBMSBUJPQPTJUJPOQPTJUJPO0⒎TFU
    WBMCMFOEFE$PMPS$PMPS6UJMTCMFOE"3(# EFGBVMU$PMPS $PMPS8)*5& SBUJP
    
    CJOEJOHUJUMF5FYUTFU5FYU$PMPS CMFOEFE$PMPS
    
    CJOEJOHIPNF"T6Q*OEJDBUPS5FYUTFU5FYU$PMPS CMFOEFE$PMPS
    
    CJOEJOHCMVS-BZPVUBMQIBSBUJP
    ^
    ʜ
    

    View Slide

20. View Slide

21. 4BNQMF
    IUUQTHJUIVCDPNTIBVOLBXBOPBOESPJEDPMPSCMFOEJOHTBNQMF
    

    View Slide

22. w $PMPS6UJMTΛ࢖ͬͯ̎ͭͷ৭ΛࠞͥΔ͜ͱ͕Ͱ͖
    Δ
    w SBUJPҾ਺ʹΑͬͯ৭ͷ഑߹Λௐ੔Ͱ͖Δ
    w 7JFX1BHFSPO1BHF4DSPMMFEͱ૬ੑ͕ྑ͍
    ͔΋
    ·ͱΊ
    

    View Slide

23. Thank you!
    shaunkawano
    

    View Slide