How to round an image with Glide library

Question

So  anybody know how to display an image with rounded corners with Glide  I am loading an image with Glide  but I don t know how to pass rounded params to this library   I need display image like following example

User · Answer

Circle crop   placeholder   crossfade   Glide with context                         load randomImage                       apply RequestOptions bitmapTransform CircleCrop    error R drawable nyancat animated                        transition DrawableTransitionOptions                                crossFade                         into picture

User · Answer

According to this answer  the easiest way in both languages is   Kotlin   Glide with context  load uri  apply RequestOptions   circleCrop    into imageView    Java   Glide with context  load uri  apply new RequestOptions   circleCrop    into imageView    This works on Glide 4 X X

User · Answer

Try this way  code  Glide with this       load R drawable thumbnail       bitmapTransform new CropCircleTransformation this        into mProfile     XML   lt ImageView   android id    id img profile    android layout width  76dp    android layout height  76dp    android background   drawable all circle white bg    android padding  1dp   gt    all circle white bg xml   lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt     lt item gt       lt shape android shape  oval  gt         lt solid android color   android color white   gt     lt  shape gt     lt  item gt   lt  selector gt     I use this transformation library  -  https   github com wasabeef glide-transformations Circle stroke width is ImageView s padding

User · Answer

Check this post  glide vs picasso    Edit  the linked post doesn t call out an important difference in the libraries  Glide does the recycling automatically  See TWiStErRob s comment for more   Glide with this  load URL  transform new CircleTransform context   into imageView    public static class CircleTransform extends BitmapTransformation       public CircleTransform Context context            super context               Override protected Bitmap transform BitmapPool pool  Bitmap toTransform  int outWidth  int outHeight            return circleCrop pool  toTransform              private static Bitmap circleCrop BitmapPool pool  Bitmap source            if  source    null  return null           int size   Math min source getWidth    source getHeight             int x    source getWidth   - size    2          int y    source getHeight   - size    2              TODO this could be acquired from the pool too         Bitmap squared   Bitmap createBitmap source  x  y  size  size            Bitmap result   pool get size  size  Bitmap Config ARGB 8888           if  result    null                result   Bitmap createBitmap size  size  Bitmap Config ARGB 8888                      Canvas canvas   new Canvas result           Paint paint   new Paint            paint setShader new BitmapShader squared  BitmapShader TileMode CLAMP  BitmapShader TileMode CLAMP            paint setAntiAlias true           float r   size   2f          canvas drawCircle r  r  r  paint           return result              Override public String getId             return getClass   getName

User · Answer

Glide version 4 6 1  Glide with context   load url   apply RequestOptions bitmapTransform new CircleCrop      into imageView

User · Answer

Now in Glide V4 you can directly use CircleCrop    Glide with fragment     load url     circleCrop      into imageView     Built in types   CenterCrop FitCenter  CircleCrop

User · Answer

Here is a more modular and cleaner way to circle crop your bitmap in Glide    Create a custom transformation by extending BitmapTransformation then override transform method like this      For Glide 4 x x  public class CircularTransformation extends BitmapTransformation     Override protected Bitmap transform BitmapPool pool  Bitmap toTransform  int outWidth  int outHeight        RoundedBitmapDrawable circularBitmapDrawable               RoundedBitmapDrawableFactory create null  toTransform       circularBitmapDrawable setCircular true       Bitmap bitmap   pool get outWidth  outHeight  Bitmap Config ARGB 8888       Canvas canvas   new Canvas bitmap       circularBitmapDrawable setBounds 0  0  outWidth  outHeight       circularBitmapDrawable draw canvas       return bitmap          Override public void updateDiskCacheKey MessageDigest messageDigest          For Glide 3 x x  public class CircularTransformation extends BitmapTransformation     Override protected Bitmap transform BitmapPool pool  Bitmap toTransform  int outWidth  int outHeight        RoundedBitmapDrawable circularBitmapDrawable               RoundedBitmapDrawableFactory create null  toTransform       circularBitmapDrawable setCircular true       Bitmap bitmap   pool get outWidth  outHeight  Bitmap Config ARGB 8888       Canvas canvas   new Canvas bitmap       circularBitmapDrawable setBounds 0  0  outWidth  outHeight       circularBitmapDrawable draw canvas       return bitmap          Override public String getId            Return some id that uniquely identifies your transformation      return  CircularTransformation               Then set it in Glide builder where you need it      Glide with yourActivity      load yourUrl      asBitmap       transform new CircularTransformation        into yourView     Hope this helps

User · Answer

The easiest way  requires Glide 4 x x   Glide with context  load uri  apply RequestOptions   circleCrop    into imageView

User · Answer

You have to use CircularImageView to Display that type of Image     You are using Glide library which used to load images    Create One ClassFile in your Project and Load it in Imageview    and You will get Desired Result     Try Following Code     XML     lt com yourpackage CircularImageView     android id    id imageview      android layout width  96dp      android layout height  96dp      app border  true      app border width  3dp      app border color   color white      android src   drawable image    gt    CircularImageView java  public class CircularImageView extends ImageView       private int borderWidth      private int canvasSize      private Bitmap image      private Paint paint      private Paint paintBorder       public CircularImageView final Context context            this context  null              public CircularImageView Context context  AttributeSet attrs            this context  attrs  R attr circularImageViewStyle              public CircularImageView Context context  AttributeSet attrs  int defStyle            super context  attrs  defStyle               init paint         paint   new Paint            paint setAntiAlias true            paintBorder   new Paint            paintBorder setAntiAlias true               load the styled attributes and set their properties         TypedArray attributes   context obtainStyledAttributes attrs  R styleable CircularImageView  defStyle  0            if attributes getBoolean R styleable CircularImageView border  true                 int defaultBorderSize    int   4   getContext   getResources   getDisplayMetrics   density   0 5f               setBorderWidth attributes getDimensionPixelOffset R styleable CircularImageView border width  defaultBorderSize                setBorderColor attributes getColor R styleable CircularImageView border color  Color WHITE                       if attributes getBoolean R styleable CircularImageView shadow  false               addShadow               public void setBorderWidth int borderWidth            this borderWidth   borderWidth          this requestLayout            this invalidate               public void setBorderColor int borderColor            if  paintBorder    null              paintBorder setColor borderColor           this invalidate               public void addShadow             setLayerType LAYER TYPE SOFTWARE  paintBorder           paintBorder setShadowLayer 4 0f  0 0f  2 0f  Color BLACK               Override     public void onDraw Canvas canvas               load the bitmap         image   drawableToBitmap getDrawable                 init shader         if  image    null                 canvasSize   canvas getWidth                if canvas getHeight   lt canvasSize                  canvasSize   canvas getHeight                 BitmapShader shader   new BitmapShader Bitmap createScaledBitmap image  canvasSize  canvasSize  false   Shader TileMode CLAMP  Shader TileMode CLAMP               paint setShader shader                   circleCenter is the x or y of the view s center                radius is the radius in pixels of the cirle to be drawn                paint contains the shader that will texture the shape             int circleCenter    canvasSize -  borderWidth   2     2              canvas drawCircle circleCenter   borderWidth  circleCenter   borderWidth    canvasSize -  borderWidth   2     2    borderWidth - 4 0f  paintBorder               canvas drawCircle circleCenter   borderWidth  circleCenter   borderWidth    canvasSize -  borderWidth   2     2  - 4 0f  paint                         Override     protected void onMeasure int widthMeasureSpec  int heightMeasureSpec            int width   measureWidth widthMeasureSpec           int height   measureHeight heightMeasureSpec           setMeasuredDimension width  height              private int measureWidth int measureSpec            int result   0          int specMode   MeasureSpec getMode measureSpec           int specSize   MeasureSpec getSize measureSpec            if  specMode    MeasureSpec EXACTLY                   The parent has determined an exact size for the child              result   specSize            else if  specMode    MeasureSpec AT MOST                   The child can be as large as it wants up to the specified size              result   specSize            else                  The parent has not imposed any constraint on the child              result   canvasSize                     return result             private int measureHeight int measureSpecHeight            int result   0          int specMode   MeasureSpec getMode measureSpecHeight           int specSize   MeasureSpec getSize measureSpecHeight            if  specMode    MeasureSpec EXACTLY                   We were told how big to be             result   specSize            else if  specMode    MeasureSpec AT MOST                   The child can be as large as it wants up to the specified size              result   specSize            else                  Measure the text  beware  ascent is a negative number              result   canvasSize                     return  result   2              public Bitmap drawableToBitmap Drawable drawable            if  drawable    null                return null            else if  drawable instanceof BitmapDrawable                return   BitmapDrawable  drawable  getBitmap                       Bitmap bitmap   Bitmap createBitmap drawable getIntrinsicWidth                    drawable getIntrinsicHeight    Bitmap Config ARGB 8888           Canvas canvas   new Canvas bitmap           drawable setBounds 0  0  canvas getWidth    canvas getHeight             drawable draw canvas            return bitmap            Note    You can use   CircularImageView imgIcon    CircularImageView findViewById R id imageview     or   ImageView imgIcon    ImageView findViewById R id imageview     it wont affect your other libraries    dont have to change your code for downloading image or anything else    it simply can be defined using XML too

User · Answer

its very simple i have seen Glide library its very good library and essay base on volley Google s library    usethis library for rounded image view    https   github com hdodenhof CircleImageView  now     For a simple view     Override  public void onCreate Bundle savedInstanceState             CircleImageView civProfilePic    CircleImageView findViewById R id ivProfile     Glide load  http   goo gl h8qOq7   into civProfilePic         For a list    Override public View getView int position  View recycled  ViewGroup container    final ImageView myImageView   if  recycled    null        myImageView    CircleImageView  inflater inflate R layout my image view              container  false     else       myImageView    CircleImageView  recycled     String url   myUrls get position    Glide load url       centerCrop        placeholder R drawable loading spinner       animate R anim fade in       into myImageView      return myImageView      and in XML    lt de hdodenhof circleimageview CircleImageView    android id    id ivProfile    android layout width  160dp     android layout height  160dp     android layout centerInParent  true     android src   drawable hugh     app border width  2dp     app border color   color dark    gt

User · Answer

Use this transformation  it will work fine   public class CircleTransform extends BitmapTransformation   public CircleTransform Context context        super context       Override protected Bitmap transform BitmapPool pool  Bitmap toTransform  int outWidth  int outHeight        return circleCrop pool  toTransform      private static Bitmap circleCrop BitmapPool pool  Bitmap source        if  source    null  return null       int borderColor   ColorUtils setAlphaComponent Color WHITE  0xFF       int borderRadius   3       int size   Math min source getWidth    source getHeight         int x    source getWidth   - size    2      int y    source getHeight   - size    2          TODO this could be acquired from the pool too     Bitmap squared   Bitmap createBitmap source  x  y  size  size       if  squared    source            source recycle               Bitmap result   pool get size  size  Bitmap Config ARGB 8888       if  result    null            result   Bitmap createBitmap size  size  Bitmap Config ARGB 8888              Canvas canvas   new Canvas result       Paint paint   new Paint        paint setShader new BitmapShader squared  BitmapShader TileMode CLAMP  BitmapShader TileMode CLAMP        paint setAntiAlias true       float r   size   2f      canvas drawCircle r  r  r  paint           Prepare the background     Paint paintBg   new Paint        paintBg setColor borderColor       paintBg setAntiAlias true           Draw the background circle     canvas drawCircle r  r  r  paintBg           Draw the image smaller than the background so a little border will be seen     canvas drawCircle r  r  r - borderRadius  paint        squared recycle         return result      Override public String getId         return getClass   getName

User · Answer

I found one easy and simple solution for add border over imageview in which color want to set or add gradient over image   STEPS    Take one frame layout and add two images You can set size as per your requirement  For imgPlaceHolder   you need one white image or color which you want to set               lt ImageView             android id    id imgPlaceHolder              android layout width  match parent              android layout height  match parent              android layout gravity  center              android src   drawable white bg   gt            lt ImageView             android id    id imgPic              android layout width  190dp              android layout height  190dp              android layout gravity  center              android src   drawable image01   gt       lt  FrameLayout gt     After placing this code on xml file   put below line in java file   Glide with this  load R drawable image01  asBitmap   centerCrop   into new BitmapImageViewTarget imgPic         Override     protected void setResource Bitmap resource            RoundedBitmapDrawable circularBitmapDrawable                   RoundedBitmapDrawableFactory create getResources    resource           circularBitmapDrawable setCircular true           imageView setImageDrawable circularBitmapDrawable              Glide with this  load R drawable white bg  asBitmap   centerCrop   into new BitmapImageViewTarget imgPlaceHolder         Override     protected void setResource Bitmap resource            RoundedBitmapDrawable circularBitmapDrawable                   RoundedBitmapDrawableFactory create getResources    resource           circularBitmapDrawable setCircular true           imgTemp2 setImageDrawable circularBitmapDrawable                This will make border of imageview simply with out any extra padding and margin    NOTE   White image is compulsory for border otherwise it will not work   Happy codding

User · Answer

Glide V4       Glide with context           load url           circleCrop            into imageView     Glide V3   You can use RoundedBitmapDrawable for circular images with Glide  No custom ImageView is required    Glide with context  load url  asBitmap   centerCrop   into new BitmapImageViewTarget imageView             Override         protected void setResource Bitmap resource                RoundedBitmapDrawable circularBitmapDrawable                       RoundedBitmapDrawableFactory create context getResources    resource               circularBitmapDrawable setCircular true               imageView setImageDrawable circularBitmapDrawable

User · Answer

With glide library you can use this code   Glide with context       load imageUrl       asBitmap        placeholder R drawable user pic       centerCrop        into new BitmapImageViewTarget img profPic             Override         protected void setResource Bitmap resource                RoundedBitmapDrawable circularBitmapDrawable   RoundedBitmapDrawableFactory create context getResources    resource                circularBitmapDrawable setCircular true               img profPic setImageDrawable circularBitmapDrawable

User · Answer

For Glide 4 x x   use   Glide    with context     load uri     apply        RequestOptions            circleCrop       into imageView    from doc it stated that      Round Pictures  CircleImageView CircularImageView RoundedImageView are   known to have issues with TransitionDrawable   crossFade   with    thumbnail   or  placeholder    and animated GIFs  use a   BitmapTransformation   circleCrop   will be available in v4  or    dontAnimate   to fix the issue

User · Answer

In this case I need add shadows  and imageView elevation not working  implementation  com github bumptech glide glide 4 10 0   XML   lt FrameLayout     android id    id fl image      android layout width  60dp      android layout height  60dp      android layout margin  10dp      android background   drawable card circle background      android elevation  8dp  gt        lt ImageView         android id    id iv item employee          android layout width  60dp          android layout height  60dp          tools background   color colorPrimary    gt   lt  FrameLayout gt    Shape drawable   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android         android shape  oval  gt        lt solid android color   color white   gt   lt  shape gt    Glide Configuration  Glide with this       asBitmap        load item image       apply RequestOptions circleCropTransform         into iv item employee

User · Answer

Roman Samoylenko s answer was correct except the function has changed  The correct answer is  Glide with context                   load yourImage                   apply RequestOptions circleCropTransform                     into imageView

User · Answer

You can simply call the RoundedCornersTransformation constructor  which has cornerType enum input  Like this   Glide with context               load bizList get position  getCover                 bitmapTransform new RoundedCornersTransformation context 20 0  RoundedCornersTransformation CornerType TOP                into holder bizCellCoverImg     but first you have to add Glide Transformations to your project

User · Answer

implementation  com github bumptech glide glide 4 8 0  annotationProcessor  com github bumptech glide compiler 4 8 0    RequestOptions options new RequestOptions            options centerCrop   placeholder getResources   getDrawable R drawable user placeholder            Glide with this                   load preferenceSingleTon getImage                     apply options                   into ProfileImage

User · Answer

I was looking for it earlier and I made it in very easiest way  I hope you would like this      crete this method into your Utils class and call this method wherever you want to use        you can set these placeHolder   and error   image static as well  I made it as comment inside this method  then no need to use  placeHolderUrl and errorImageUrl  parameters  remove it from this method      public static void loadImage final Activity context  ImageView imageView  String url  int placeHolderUrl  int errorImageUrl            if  context    null    context isDestroyed    return             placeHolderUrl R drawable ic user            errorImageUrl R drawable ic error              Glide with context    passing context                      load getFullUrl url     passing your url to load image                       placeholder placeHolderUrl    this would be your default image  like default profile or logo etc   it would be loaded at initial time and it will replace with your loaded image once glide successfully load image using url                       error errorImageUrl   in case of any glide exception or not able to download then this image will be appear   if you won t mention this error   then nothing to worry placeHolder image would be remain as it is                       diskCacheStrategy DiskCacheStrategy ALL    using to load into cache then second time it will load fast                       transform new CircleTransform context    this CircleTransform class help to crop an image as circle                       animate R anim fade in     when image  url  will be loaded by glide then this face in animation help to replace url image in the place of placeHolder  default  image                       fitCenter    this method help to fit image into center of your ImageView                      into imageView     pass imageView reference to appear the image           CircleTransform java    public class CircleTransform extends BitmapTransformation       public CircleTransform Context context            super context            if context  null              return             private static Bitmap circleCrop BitmapPool pool  Bitmap source            if  source    null  return null           int size   Math min source getWidth    source getHeight             int x    source getWidth   - size    2          int y    source getHeight   - size    2            Bitmap squared   Bitmap createBitmap source  x  y  size  size            Bitmap result   pool get size  size  Bitmap Config ARGB 8888           if  result    null                result   Bitmap createBitmap size  size  Bitmap Config ARGB 8888                      Canvas canvas   new Canvas result           Paint paint   new Paint            paint setShader new BitmapShader squared  BitmapShader TileMode CLAMP  BitmapShader TileMode CLAMP            paint setAntiAlias true           float r   size   2f          canvas drawCircle r  r  r  paint           return result              Override     protected Bitmap transform BitmapPool pool  Bitmap toTransform  int outWidth  int outHeight            return circleCrop pool  toTransform               Override     public String getId             return getClass   getName              fade in xml for fade in animation         lt set xmlns android  http   schemas android com apk res android  gt   lt  --THIS ANIMATION IS USING FOR FADE IN -- gt    lt alpha     android duration  800      android fromAlpha  0 0      android interpolator   android anim decelerate interpolator      android toAlpha  1 0    gt    finally to call this method   Utils loadImage YourClassName this mImageView url R drawable ic user R drawable ic error

User · Answer

The other solutions did not work for me  I found they all have significant drawbacks    Solutions using glide transformations do not work with placeholders Solutions using rounded image views do not work with animations  i e  crossfade  Solutions using a generic method of a parent that clips its children  i e  the accepted answer here  do not work well with glide    It is really interesting that after fumbling around with this I found the Fresco library page about rounded corners and circles in which they list basically the same limitations and conclude with the statement   there is no really good solution for rounding corners on Android and one has to choose between the aforementioned trade-offs  Unbelievable that at this time we still dont have a real solution  I have an alternate solution based on the link I put above  The drawback with this approach is that it assumes your background is a solid color  the corners aren t really transparent   You would use it like this    lt RoundedCornerLayout     gt       lt ImageView     gt   lt  RoundedCornerLayout gt    The gist is here and full code here   public class RoundedCornerLayout extends RelativeLayout       private Bitmap maskBitmap      private Paint paint      private float cornerRadius       public RoundedCornerLayout Context context            super context           init context  null  0              public RoundedCornerLayout Context context  AttributeSet attrs            super context  attrs           init context  attrs  0              public RoundedCornerLayout Context context  AttributeSet attrs  int defStyle            super context  attrs  defStyle           init context  attrs  defStyle              private void init Context context  AttributeSet attrs  int defStyle            paint   new Paint Paint ANTI ALIAS FLAG            setWillNotDraw false               Override     public void draw Canvas canvas            super draw canvas            if  maskBitmap    null                   This corner radius assumes the image width    height and you want it to be circular                Otherwise  customize the radius as needed             cornerRadius   canvas getWidth     2              maskBitmap   createMask canvas getWidth    canvas getHeight                        canvas drawBitmap maskBitmap  0f  0f  paint              private Bitmap createMask int width  int height            Bitmap mask   Bitmap createBitmap width  height  Bitmap Config ARGB 8888           Canvas canvas   new Canvas mask            Paint paint   new Paint Paint ANTI ALIAS FLAG           paint setColor Color WHITE      TODO set your background color as needed          canvas drawRect 0  0  width  height  paint            paint setXfermode new PorterDuffXfermode PorterDuff Mode CLEAR            canvas drawRoundRect new RectF 0  0  width  height   cornerRadius  cornerRadius  paint            return mask

User · Answer

private void setContactImage  NonNull ViewHolder holder  ClsContactDetails clsContactDetails        Glide with context  load clsContactDetails getPic             apply new RequestOptions   centerCrop   circleCrop   placeholder R mipmap ic launcher   into holder ivPersonImage

[android] How to round an image with Glide library?

Circle crop + placeholder + crossfade

Examples related to android

Examples related to android-glide