CircleBitmapDisplayer for Universal Image Loader
I have written about RemoteImageView, an ImageView’s subclass to display image from url, in my previous post . But, I never use this view again :(. Universal Image Loaderhave replaced this task.
Universal Image Loader have more complete features to handle displaying image tasks. Many configuration available to conform our needs. It is currently used by many android apps.
One of it’s flexibilities is the ability to change it’s image appearance. There isdisplayer(BitmapDisplayer bitmapDisplayer) method to change display image behaviour.
|
1
2
3
4
5
6
|
DisplayImageOptions
imageOptions
=
new
DisplayImageOptions
.
Builder
(
)
.
.
.
.
.
.
.
.
.
.
displayer
(
new
RoundedBitmapDisplayer
(
4
)
)
.
build
(
)
;
|
BitmapDisplayer script can be located oncom.nostra13.universalimageloader.core.display package. In the current version (1.9.1), there are five classes available here, one interface and it’s implementations:
- BitmapDisplayer (interface)
- FadeInBitmapDisplayer
- RoundedBitmapDisplayer
- RoundedVignetteBitmapDisplayer
- SimpleBitmapDisplayer
We can create our own BitmapDisplayer. We only need to implement BitmapDisplayer class and override display() method.
In this post, I want to share my BitmapDisplayer. I needed to display image in circle shape. So, I created CircleBitmapDisplayer.
I used PorterDuffXfermode to crop the image. You can read more about PorterDuffXfermode in this article. I also added optional parameter to create border around the image.
CircleBitmapDisplayer script:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
package
com
.
shidec
.
libs
;
import
android
.
graphics
.
Bitmap
;
import
android
.
graphics
.
Bitmap
.
Config
;
import
android
.
graphics
.
Canvas
;
import
android
.
graphics
.
Paint
;
import
android
.
graphics
.
PorterDuff
.
Mode
;
import
android
.
graphics
.
PorterDuffXfermode
;
import
android
.
graphics
.
Rect
;
import
com
.
nostra13
.
universalimageloader
.
core
.
assist
.
LoadedFrom
;
import
com
.
nostra13
.
universalimageloader
.
core
.
display
.
BitmapDisplayer
;
import
com
.
nostra13
.
universalimageloader
.
core
.
imageaware
.
ImageAware
;
public
class
CircleBitmapDisplayer
implements
BitmapDisplayer
{
private
float
borderWidth
=
0
;
private
int
borderColor
;
public
CircleBitmapDisplayer
(
)
{
super
(
)
;
}
public
CircleBitmapDisplayer
(
int
borderColor
,
int
borderWidth
)
{
super
(
)
;
this
.
borderColor
=
borderColor
;
this
.
borderWidth
=
borderWidth
;
}
@
Override
public
void
display
(
Bitmap
bitmap
,
ImageAware
imageAware
,
LoadedFrom
loadedFrom
)
{
Bitmap
output
=
Bitmap
.
createBitmap
(
bitmap
.
getWidth
(
)
,
bitmap
.
getHeight
(
)
,
Config
.
ARGB_4444
)
;
Canvas
canvas
=
new
Canvas
(
output
)
;
final
int
color
=
0xff424242
;
final
Paint
paint
=
new
Paint
(
)
;
final
Rect
rect
=
new
Rect
(
0
,
0
,
bitmap
.
getWidth
(
)
,
bitmap
.
getHeight
(
)
)
;
paint
.
setAntiAlias
(
true
)
;
canvas
.
drawARGB
(
0
,
0
,
0
,
0
)
;
paint
.
setColor
(
color
)
;
//--CROP THE IMAGE
canvas
.
drawCircle
(
bitmap
.
getWidth
(
)
/
2
,
bitmap
.
getHeight
(
)
/
2
,
bitmap
.
getWidth
(
)
/
2
-
1
,
paint
)
;
paint
.
setXfermode
(
new
PorterDuffXfermode
(
Mode
.
SRC_IN
)
)
;
canvas
.
drawBitmap
(
bitmap
,
rect
,
rect
,
paint
)
;
//--ADD BORDER IF NEEDED
if
(
this
.
borderWidth
&
gt
;
0
)
{
final
Paint
paint2
=
new
Paint
(
)
;
paint2
.
setAntiAlias
(
true
)
;
paint2
.
setColor
(
this
.
borderColor
)
;
paint2
.
setStrokeWidth
(
this
.
borderWidth
)
;
paint2
.
setStyle
(
Paint
.
Style
.
STROKE
)
;
canvas
.
drawCircle
(
bitmap
.
getWidth
(
)
/
2
,
bitmap
.
getHeight
(
)
/
2
,
(
float
)
(
bitmap
.
getWidth
(
)
/
2
-
Math
.
ceil
(
this
.
borderWidth
/
2
)
)
,
paint2
)
;
}
imageAware
.
setImageBitmap
(
output
)
;
}
}
|
Example 1:
|
1
2
3
4
5
6
7
8
9
10
|
ImageView
imageView2
=
(
ImageView
)
findViewById
(
R
.
id
.
imageView2
)
;
DisplayImageOptions
imageOptions2
=
new
DisplayImageOptions
.
Builder
(
)
.
showImageOnFail
(
R
.
drawable
.
ic_launcher
)
.
showImageOnLoading
(
R
.
drawable
.
ic_launcher
)
.
showImageForEmptyUri
(
R
.
drawable
.
ic_launcher
)
.
cacheInMemory
(
true
)
.
resetViewBeforeLoading
(
true
)
.
displayer
(
new
CircleBitmapDisplayer
(
)
)
.
build
(
)
;
ImageLoader
.
getInstance
(
)
.
displayImage
(
"http://soesapto.hantoro.web.id/files/shidec.png"
,
imageView2
,
imageOptions2
)
;
|
Example 2 (with border):
|
1
2
3
4
5
6
7
8
9
10
|
ImageView
imageView3
=
(
ImageView
)
findViewById
(
R
.
id
.
imageView3
)
;
DisplayImageOptions
imageOptions3
=
new
DisplayImageOptions
.
Builder
(
)
.
showImageOnFail
(
R
.
drawable
.
ic_launcher
)
.
showImageOnLoading
(
R
.
drawable
.
ic_launcher
)
.
showImageForEmptyUri
(
R
.
drawable
.
ic_launcher
)
.
cacheInMemory
(
true
)
.
resetViewBeforeLoading
(
true
)
.
displayer
(
new
CircleBitmapDisplayer
(
0xffff0000
,
3
)
)
.
build
(
)
;
ImageLoader
.
getInstance
(
)
.
displayImage
(
"http://soesapto.hantoro.web.id/files/shidec.png"
,
imageView3
,
imageOptions3
)
;
|
You can download complete source code here.