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

Building Performant UI's

Building Performant UI's

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?

BrianPlummer

July 15, 2015
Tweet

More Decks by BrianPlummer

Other Decks in Programming

Transcript

  1. @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
  2. @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
  3. @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)
  4. @NYTDevs | developers.nytimes.com Picasso Transformation Picasso interface for declaring custom

    image transformations. @Override public Bitmap transform(Bitmap Source) @Override public String key()
  5. @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.”
  6. @NYTDevs | developers.nytimes.com Now What…….. In our transform class: Bitmap

    result = Bitmap.createScaledBitmap(source, targetWidth, targetHeight, false);
  7. @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.
  8. @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)
  9. @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
  10. @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?
  11. @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
  12. @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
  13. @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
  14. @NYTDevs | developers.nytimes.com What do you get? Percent implementations of

    RelativeLayout, FrameLayout, and LinearLayout heightPercent, widthPercent, marginBottomPercent, marginEndPercent, marginLeftPercent, marginPercent, marginRightPercent, marginStartPercent, marginTopPercent
  15. @NYTDevs | developers.nytimes.com Where to get it? • github.com/JulienGenoud/android-percent- support-lib-sample

    (bit.ly/1HvoQx9) • juliengenoud.github.io/android-percent-sup port-lib-sample/ (bit.ly/1M6lST5)