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

Building Performant User Interfaces

Building Performant User Interfaces

Can using a different RGB format work and save image space? Have you ever been asked about your application's FPS and had no way to respond? Percentage layouts are coming, are you prepared?

Android developer Brian Plummer walks through the considerations taken and lessons learned while rewriting The New York Times Android app from the ground up.

(Presented at the New York Android Developers meetup.)

More Decks by The New York Times Developers

Other Decks in Programming

Transcript

  1. @NYTDevs | developers.nytimes.com

    View full-size slide

  2. @NYTDevs | developers.nytimes.com
    How can we reduce
    Bitmap footprints?
    ● Bitmap.Config
    ● ARGB_8888 - 4 bytes total per pixel
    ● RGB_565 - 2 bytes total per pixel

    View full-size slide

  3. @NYTDevs | developers.nytimes.com
    Let’s do the Math
    For a 1080 width by 720 height image:
    ● ARGB_8888 = 1080 * 720 * 32 / 8 = ~3.1MB
    ● RGB_565 = 1080 * 720 * 16 / 8 = ~1.5Mb

    View full-size slide

  4. @NYTDevs | developers.nytimes.com
    Requirements
    ● Images need to be scaled to width of device
    ● Can’t be stretched or cropped
    ● Picasso Transformation method (no
    preprocessing or image service)

    View full-size slide

  5. @NYTDevs | developers.nytimes.com
    Picasso Transformation
    Picasso interface for declaring custom image
    transformations.
    @Override public Bitmap transform(Bitmap
    Source)
    @Override public String key()

    View full-size slide

  6. @NYTDevs | developers.nytimes.com
    Picasso Configuration
    Picasso.with(context)
    .load(urlString)
    .config(Bitmap.Config.RGB_565) …..
    Fingers crossed……...

    View full-size slide

  7. @NYTDevs | developers.nytimes.com
    No dice! Let’s dig
    ● github.com/square/picasso/issues/390
    ● “In most cases, inPreferredConfig is ignored
    and ARGB_8888 is used.”

    View full-size slide

  8. @NYTDevs | developers.nytimes.com
    Now What……..
    In our transform class:
    Bitmap result = Bitmap.createScaledBitmap
    (source, targetWidth, targetHeight, false);

    View full-size slide

  9. @NYTDevs | developers.nytimes.com
    Bitmap.createScaledBitmap() looks at the provided source
    bitmap to determine the bitmap configuration.
    ● createScaledBitmap() → creates matrix and scale value
    ● createBitmap() → sanity check, boilerplate dimension
    calculations, and config resolution.

    View full-size slide

  10. @NYTDevs | developers.nytimes.com
    Nothing Crazy...Let’s rip
    it out!
    public static Bitmap createScaledBitmap(Bitmap src, int dstWidth, int
    dstHeight, boolean filter, Bitmap.Config newConfig)
    public static Bitmap createBitmap(Bitmap source, int x_coordinate, int
    y_coordinate, int width, int height, Matrix matrix, boolean filter, Bitmap.
    Config newConfig)

    View full-size slide

  11. @NYTDevs | developers.nytimes.com

    View full-size slide

  12. @NYTDevs | developers.nytimes.com
    Problems with Blue

    View full-size slide

  13. @NYTDevs | developers.nytimes.com
    Conclusion
    ● Use it where it makes sense
    ● Small thumbnails or places where quality
    can be sacrificed
    github.com/brianPlummer/Rgb565Example
    bit.ly/1K7VV3j

    View full-size slide

  14. @NYTDevs | developers.nytimes.com
    Dumpsys gfxinfo
    ● Correct way to get rendering information
    ● Great data but not formatted for
    consumption. It needs massaging.
    ● Who’s got time for that?

    View full-size slide

  15. @NYTDevs | developers.nytimes.com
    Cookie-Butter

    View full-size slide

  16. @NYTDevs | developers.nytimes.com
    Where and how?
    ● github.com/Turnsole/cookie-butter bit.
    ly/1MaXIYB
    python generate_frametime_graphs.py [-h] package [seconds]
    [title] [device]
    python generate_frametime_graphs.py com.nytimes.android.debug 20
    20_sec_af_04 HT4CJJT01102

    View full-size slide

  17. @NYTDevs | developers.nytimes.com
    Percent Support Library
    ● There is currently no good way to specify
    view sizes as percentages of viewport.
    ● Layout weights are clumsy and are only
    available in FrameLayout and LinearLayout

    View full-size slide

  18. @NYTDevs | developers.nytimes.com
    compile 'com.android.support:percent:22.2.0'
    ● Android SDK v22
    ● Android Build Tools v22.0.1
    ● Android Percent Support Repository v22.2.0
    ● Android Support v4 Repository v22.2.0
    Requirements

    View full-size slide

  19. @NYTDevs | developers.nytimes.com
    What do you get?
    Percent implementations of RelativeLayout,
    FrameLayout, and LinearLayout
    heightPercent, widthPercent, marginBottomPercent, marginEndPercent,
    marginLeftPercent, marginPercent, marginRightPercent, marginStartPercent,
    marginTopPercent

    View full-size slide

  20. @NYTDevs | developers.nytimes.com

    View full-size slide

  21. @NYTDevs | developers.nytimes.com

    View full-size slide

  22. @NYTDevs | developers.nytimes.com
    Where to get it?
    ● github.com/JulienGenoud/android-percent-
    support-lib-sample (bit.ly/1HvoQx9)
    ● juliengenoud.github.io/android-percent-
    support-lib-sample/ (bit.ly/1M6lST5)

    View full-size slide

  23. We’re hiring
    nytimes.com/careers
    @NYTDevs | developers.nytimes.com

    View full-size slide