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?

1. @NYTDevs | developers.nytimes.com
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
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
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)
5. @NYTDevs | developers.nytimes.com Picasso Transformation Picasso interface for declaring custom image transformations. @Override public Bitmap transform(Bitmap Source) @Override public String key()
6. @NYTDevs | developers.nytimes.com Picasso Configuration Picasso.with(context) .load(urlString) .config(Bitmap.Config.RGB_565) ….. Fingers crossed……...
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.”
8. @NYTDevs | developers.nytimes.com Now What…….. In our transform class: Bitmap result = Bitmap.createScaledBitmap(source, targetWidth, targetHeight, false);
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.
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)
11. @NYTDevs | developers.nytimes.com
12. @NYTDevs | developers.nytimes.com Problems with Blue
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
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?
15. @NYTDevs | developers.nytimes.com Cookie-Butter
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
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
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
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
20. @NYTDevs | developers.nytimes.com
21. @NYTDevs | developers.nytimes.com
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-sup port-lib-sample/ (bit.ly/1M6lST5)
23. We’re hiring nytimes.com/careers @NYTDevs | developers.nytimes.com