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

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:

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

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.