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.

RoundedBitmapDisplayer example

Java

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:

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

packagecom.shidec.libs;

 

importandroid.graphics.Bitmap;

importandroid.graphics.Bitmap.Config;

importandroid.graphics.Canvas;

importandroid.graphics.Paint;

importandroid.graphics.PorterDuff.Mode;

importandroid.graphics.PorterDuffXfermode;

importandroid.graphics.Rect;

 

importcom.nostra13.universalimageloader.core.assist.LoadedFrom;

importcom.nostra13.universalimageloader.core.display.BitmapDisplayer;

importcom.nostra13.universalimageloader.core.imageaware.ImageAware;

 

publicclassCircleBitmapDisplayerimplementsBitmapDisplayer{

 

    privatefloatborderWidth=0;

    privateintborderColor;

 

    publicCircleBitmapDisplayer(){

        super();

    }

 

    publicCircleBitmapDisplayer(intborderColor,intborderWidth){

        super();

        this.borderColor=borderColor;

        this.borderWidth=borderWidth;

    }

 

    @Override

    publicvoiddisplay(Bitmapbitmap,ImageAwareimageAware,LoadedFromloadedFrom){

            Bitmapoutput=Bitmap.createBitmap(bitmap.getWidth(),bitmap.getHeight(),Config.ARGB_4444);

 

            Canvascanvas=newCanvas(output);

 

            finalintcolor=0xff424242;

            finalPaintpaint=newPaint();

            finalRectrect=newRect(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(newPorterDuffXfermode(Mode.SRC_IN));

            canvas.drawBitmap(bitmap,rect,rect,paint);

 

            //--ADD BORDER IF NEEDED

            if(this.borderWidth>0){

                finalPaintpaint2=newPaint();

                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:

Example Code

Java

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):

Example Code (with border)

Java

1

2

3

4

5

6

7

8

9

10

ImageViewimageView3=(ImageView)findViewById(R.id.imageView3);

DisplayImageOptionsimageOptions3=newDisplayImageOptions.Builder()

    .showImageOnFail(R.drawable.ic_launcher)

    .showImageOnLoading(R.drawable.ic_launcher)

    .showImageForEmptyUri(R.drawable.ic_launcher)

    .cacheInMemory(true)

    .resetViewBeforeLoading(true)

    .displayer(newCircleBitmapDisplayer(0xffff0000,3))

    .build();

ImageLoader.getInstance().displayImage("http://soesapto.hantoro.web.id/files/shidec.png",imageView3,imageOptions3);

You can download complete source code here.