Presentation about ImageView widget, it's parameters, and effective working with images on Android.

1. WORKING WITH Images
Sergey Tarasevich
@nostra13

2. Who’s this man?
Sergey Tarasevich (@nostra13)
• Android developer at CactusSoft
• Author of «Universal Image Loader» library
• Certified Java SE 7 Programmer

3. Agenda
1. Images in Android
2. ImageView widget
3. Image as Bitmap
4. Android Bitmap API
5. Displaying Bitmaps Efficiently
6. Issues & Solutions
Bonus:
Make own Open Source project popular

4. Supported formats
Format Encoder Decoder
JPEG + +
GIF +
PNG + +
BMP +
WebP + (Android 4.0+)
(Lossless, Transparency,
Android 4.2.1+)
+ (Android 4.0+)
(Lossless, Transparency,
Android 4.2.1+)

5. Image sources
• Resources
– drawables
– assets
• Local files (file system/SD card)
• Remote
• …

6. Widget
<ImageView
android:id="@+id/test_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/test" />

7. ImageView
• void setImageBitmap(Bitmap bm)
• void setImageDrawable(Drawable drawable)
• void setImageResource(int resId)
• void setImageURI(Uri uri)

8. ImageView params
• android:baseline
• android:baselineAlignBottom
• android:adjustViewBounds
• android:cropToPadding
• android:maxHeight
• android:maxWidth
• android:scaleType
• android:src
• android:tint
• android:tintMode

9. ImageView scaleType test

10. Sample Layout #1
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/cat« />

11. Scale Type: fitCenter

12. Scale Type: fitStart

13. Scale Type: fitEnd

14. Scale Type: fitXY

15. Scale Type: matrix

16. Scale Type: center

17. Scale Type: centerCrop

18. Scale Type: centerInside

19. Sample Layout #2
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:src="@drawable/cat"
android:background=“@color/gray“ />
</FrameLayout>

20. Scale Type: fitCenter

21. Scale Type: fitStart

22. Scale Type: fitEnd

23. Scale Type: fitXY

24. Scale Type: matrix

25. Scale Type: center

26. Scale Type: centerCrop

27. Scale Type: centerInside

28. Sample Layout #3
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/cat"
android:background=“@color/gray“ />
</FrameLayout>

29. Scale Type: center
"false" = android:adjustViewBounds = "true"
?
1 2 3
- ?

30. Scale Type: center
"false" = android:adjustViewBounds = "true"

31. Scale Type: centerCrop
"false" = android:adjustViewBounds = "true"
?
1 2 3
- ?

32. Scale Type: centerCrop
"false" = android:adjustViewBounds = "true"

33. Scale Type: centerInside
"false" = android:adjustViewBounds = "true"

34. Scale Type: fitXY
"false" = android:adjustViewBounds = "true"
?
1 2 3
- ?

35. Scale Type: fitXY
"false" = android:adjustViewBounds = "true"

36. Scale Type: fitCenter
"false" = android:adjustViewBounds = "true"

37. Scale Type: fitStart
"false" = android:adjustViewBounds = "true"

38. Scale Type: fitEnd
"false" = android:adjustViewBounds = "true"

39. Scale Type: matrix
"false" = android:adjustViewBounds = "true"

40. ImageView inside
…
public void setAdjustViewBounds(boolean
adjustViewBounds) {
mAdjustViewBounds = adjustViewBounds;
if (adjustViewBounds) {
setScaleType(ScaleType.FIT_CENTER);
}
}
…

41. ImageView padding?
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/cat"
android:scaleType="centerCrop"
android:padding="20dp" />

42. ImageView padding
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/cat"
android:scaleType="centerCrop"
android:padding="20dp"
android:cropToPadding="true"/>

43. ImageView surprises
1. ImageView.setAdjustViewBounds(boolean)
– triggers ImageView.setScaleType(ScaleType.FIT_CENTER)
2. ImageView.setImageMatrix(Matrix)
– works for ScaleType.MATRIX
– doesn’t work for ScaleType.FIT_XY
– work partially for other ScaleTypes
3. android:maxWidth & android:maxHeight
– works only if android:adjustViewBounds="true“
4. android:padding
– works “strangely” for ScaleType.CENTER|CENTER_CROP|MATRIX
without android:cropToPadding="true"

44. Image as Bitmap

45. Image as Bitmap
Image in memory
=
Bitmap
=
pixel data

46. Bitmap in memory
• On Android 2.3.3 and lower (<= API level 10)
Bitmap =
Heap Native memory
Bitmap object Pixel data
Heap
Bitmap object + Pixel data
• On Android 3.0 and above (>= API level 11)
Bitmap =

47. Bitmap in memory
• On Android 2.3.3 and lower (<= API level 10)
Bitmap =
Heap Native memory
Bitmap object Pixel data
Garbage Collector
Bitmap.recycle()

48. Bitmap in memory
• On Android 2.3.3 and lower (<= API level 10)
Bitmap =
Heap Native memory
Bitmap object Pixel data
Heap
Bitmap object + Pixel data
• On Android 3.0 and above (>= API level 11)
Bitmap =
Garbage Collector

49. Bitmap Pixel Configuration
Bitmap.Config:
– ALPHA_8
• 1 pixel = 1 byte = [AAAAAAAA]
– RGB_565
• 1 pixel = 2 bytes = [RRRRRGGG GGGBBBBB]
– ARGB_4444
• 1 pixel = 2 bytes = [AAAARRRR GGGGBBBB]
– ARGB_8888
• 1 pixel = 4 bytes =
[AAAAAAAA RRRRRRRR GGGGGGGG BBBBBBBB]

50. Bitmap API

51. Bitmap Inside
• long mNativeBitmap
• int mWidth
• int mHeight
• int mDensity
• boolean mIsMutable
• boolean mRecycled
• boolean mRequestPremultiplied

52. Bitmap Outside
• Bitmap createBitmap(int width, int height,
Config config)
• Bitmap createBitmap(int colors[], int width,
int height, Config config)
• Bitmap createBitmap(Bitmap source, int x, int y,
int width, int height, Matrix m, boolean filter)
• Bitmap createScaledBitmap(Bitmap source,
int dstWidth, int dstHeight, boolean filter)

53. BitmapFactory
• Bitmap decodeStream(InputStream is,
BitmapFactory.Options opts)
• Bitmap decodeFile(String path,
BitmapFactory.Options opts)
• Bitmap decodeByteArray(byte[] data,
BitmapFactory.Options opts)
• Bitmap decodeResource(Resources res, int resId,
BitmapFactory.Options opts)
• Bitmap decodeFileDescriptor(FileDescriptor fd,
BitmapFactory.Options opts)

54. BitmapFactory
• Bitmap decodeStream(InputStream is,
BitmapFactory.Options opts)
BitmapFactory.Options
in*
in*
in*
out*
out*
out*

55. BitmapFactory.Options
API 1
• inJustDecodeBounds
• outWidth
• outHeight
• outMimeType
• inDither
• inPreferredConfig
• inSampleSize
• inTempStorage
= [true | false]
= int
= int
= String
= [true | false]
= Bitmap.Config [ARGB_8888]
= int
= byte[] [16Kb]

56. BitmapFactory.Options
API 4
• inDensity
• inTargetDensity
• inScreenDensity
• inScaled
• inInputShareable
• inPurgeable
= [0]
= [0]
= [0]
= [true | false]
= [true | false]
= [true | false]

57. BitmapFactory.Options
API 10
• inPreferQualityOverSpeed = [true | false]
API 11
• inBitmap = Bitmap
• inMutable = [true | false]
API 19
• inPremultiplied = [true | false]
[Alpha, R-Color, G-Color, B-Color]
Color = Color * Alpha / 255
E.g.: [128, 255, 0, 0] -> [128, 128, 0, 0]
[32, 255, 100, 32] -> [32, 32, 12, 4]

58. BitmapFactory.Options.inBitmap
Allow to reuse incoming Bitmap object
• Bitmap must be mutable
• If Bitmap can’t be reused ->
IllegalArgumentException
• Reused Bitmap shouldn’t be used
afterwards

59. BitmapFactory.Options.inBitmap
Prior KITKAT (< API 19):
– decoded image must be JPG or PNG
– Config of reused Bitmap will override
inPrefferedConfig
– decoded bitmap size == reused bitmap size
As of KITKAT (>= API 19):
– decoded bitmap byte count <= reused
bitmap byte count

60. BitmapRegionDecoder
BitmapRegionDecoder.newInstance(
InputStream is, boolean isShareable)
• Bitmap decodeRegion(Rect rect,
BitmapFactory.Options options)

61. Bitmap
boolean compress(CompressFormat format,
int quality, OutputStream stream)
enum CompressFormat
• JPEG
• PNG
• WEBP

62. Displaying Bitmaps Efficiently

63. Load & Display Bitmap
• Read bitmap dimensions and type
• Load a scaled down version into memory
– process bitmaps off the UI thread
• Use memory cache & disk cache
– handle configuration changes
• Manage bitmap memory
– on Android 2.3.3 and lower
– on Android 3.0 and higher

64. Read dimensions and type
BitmapFactory.Options opts =
new BitmapFactory.Options();
opts.inJustDecodeBounds = true;
BitmapFactory.decodeStream(stream, opts);
int imageWidth = opts.outWidth;
int imageHeight = opts.outHeight;
String imageType = opts.outMimeType;

65. Decode subsampled bitmap
BitmapFactory.Options opts =
new BitmapFactory.Options();
opts.inSampleSize =
calculateInSampleSize(imageWidth, imageHeight,
destWidth, destHeight);
…
Bitmap bmp =
BitmapFactory.decodeStream(stream, opts);

66. Memory Cache
• LruCache
– SoftReference and WeakReference are not
recommended since Android 2.3 (API 9)
• Cache size depends on:
– How memory intensive is the rest of your app?
– How many images will be on-screen at once?
– What is the screen size and density of the device?
– What dimensions and config are the bitmaps?
– How frequently will the images be accessed?
– Can you balance quality against quantity?

67. Disk cache
Save images before caching in memory
and/or
Save bitmaps after caching in memory

68. Manage memory (< API 11)
• Use Bitmap.recycle()
(only if bitmap is no longer being used)
• Count references of displayed and cached
bitmaps
• Recycle bitmap only if:
– mDisplayRefCount == 0 && mCacheRefCount == 0
– Bitmap.isRecycled() == false

69. Manage memory (>= API 11)
• Use BitmapFactory.Options.inBitmap
(only if bitmap is no longer being used)
LruCache<String, Bitmap> mMemoryCache;
Set<SoftReference<Bitmap>> mReusableBitmaps;

70. Issues & Solutions

71. Issue #1
Bitmap bmp = BitmapFactory.decodeFile(imagePath);
...
imageView.setImageBitmap(bmp);
“Bitmap too large to be uploaded into a
texture (2592x1944, max=2048x2048)”

72. Solution #1
“Bitmap too large to be uploaded into a
texture (2592x1944, max=2048x2048)”
int[] maxTextureSize = new int[1];
GLES10.glGetIntegerv(GL10.GL_MAX_TEXTURE_SIZE,
maxTextureSize, 0);
int maxBitmapDimension = maxTextureSize[0]; // 2048

73. Issue #2
Bitmap scaledBmp =
Bitmap.createScaledBitmap(originalBmp, ...);
originalBmp.recycle();
imageView.setImageBitmap(scaledBmp);
“java.lang.RuntimeException:
Canvas: trying to use a recycled bitmap…”

74. Solution #2
“java.lang.RuntimeException:
Canvas: trying to use a recycled bitmap…”
Bitmap scaledBmp =
Bitmap.createScaledBitmap(originalBmp, ...);
if (scaledBmp != originalBmp) {
originalBmp.recycle();
}
imageView.setImageBitmap(scaledBmp);

75. Issue #3
Bitmap bmp = BitmapFactory.decodeStream(stream);
“--- SkImageDecoder::Factory returned null”

76. Solution #3
Check if:
• Stream is not an image (e.g. HTML page)
• Stream is not reset
• Image format or compression isn’t
supported (some JPEGs, WebP on Android
<4.0)

77. Bonus
Make own Open Source project
popular

78. On Start
• Readme design
– Beautiful image
– Quick setup
– Structured info about usage
• Sample project
• Quick responses on issues

79. On Resume
• Documentation
– Java docs
– Wiki
• Keep project alive (often commits,
continuous refactoring)
• Mavenization
• Don’t rely on contributions

80. Thanks!

81. Questions?