Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Color Blending on Android

Shohei Kawano
October 25, 2017

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

Shohei Kawano

October 25, 2017
Tweet

More Decks by Shohei Kawano

Other Decks in Technology

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