How To Create Round Corner Image Using Volley Library Android
I am getting image urls from server with square shape I have to make it to rounded corner images.Actually I am using volley library ,I know how to create round corner images using
Solution 1:
I found an source code which makes imageview rounded shape e.g. https://github.com/hdodenhof/CircleImageView. which was extending imageview, I just make it extend NetworkImageView. Everything working fine for me. If you don't want to use above circular image view, you have to extend NetworkImageView class and customize to meet your needs.
Solution 2:
you need to extend NetworkImageView class and create own view
Java: CircularNetworkImageView
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Bitmap.Config;
import android.graphics.PorterDuff.Mode;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import com.android.volley.toolbox.NetworkImageView;
publicclassCircularNetworkImageViewextendsNetworkImageView {
Context mContext;
publicCircularNetworkImageView(Context context) {
super(context);
mContext = context;
}
publicCircularNetworkImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
mContext = context;
}
publicCircularNetworkImageView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
mContext = context;
}
@OverridepublicvoidsetImageBitmap(Bitmap bm) {
if(bm==null) return;
setImageDrawable(newBitmapDrawable(mContext.getResources(),
getCircularBitmap(bm)));
}
/**
* Creates a circular bitmap and uses whichever dimension is smaller to determine the width
* <br/>Also constrains the circle to the leftmost part of the image
*
* @param bitmap
* @return bitmap
*/public Bitmap getCircularBitmap(Bitmap bitmap) {
Bitmapoutput= Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvascanvas=newCanvas(output);
intwidth= bitmap.getWidth();
if(bitmap.getWidth()>bitmap.getHeight())
width = bitmap.getHeight();
finalintcolor=0xff424242;
finalPaintpaint=newPaint();
finalRectrect=newRect(0, 0, width, width);
finalRectFrectF=newRectF(rect);
finalfloatroundPx= width / 2;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(newPorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
}
XML
<com.example.own.CircularNetworkImageView
android:id="@+id/image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginRight="10dp"/>
Usage:
CircularNetworkImageViewimage= (CircularNetworkImageView) view.findViewById(R.id.image);
private ImageLoader netImageLoader=AppController.getInstance().getImageLoader();
image.setImageUrl("imageurl", netImageLoader);
Solution 3:
You can create a custom class which extends NetworkImageView(Volley).
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.ImageLoader.ImageContainer;
import com.android.volley.toolbox.ImageLoader.ImageListener;
import java.lang.reflect.InvocationTargetException;
/**
* Handles fetching an image from a URL as well as the life-cycle of the
* associated request.
*/publicclassCircledNetworkImageViewextendsImageView {
publicboolean mCircled;
/** The URL of the network image to load */private String mUrl;
/**
* Resource ID of the image to be used as a placeholder until the network image is loaded.
*/privateint mDefaultImageId;
/**
* Resource ID of the image to be used if the network response fails.
*/privateint mErrorImageId;
/** Local copy of the ImageLoader. */private ImageLoader mImageLoader;
/** Current ImageContainer. (either in-flight or finished) */private ImageContainer mImageContainer;
publicCircledNetworkImageView(Context context) {
this(context, null);
}
publicCircledNetworkImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
publicCircledNetworkImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
/**
* Sets URL of the image that should be loaded into this view. Note that calling this will
* immediately either set the cached image (if available) or the default image specified by
* {@link CircledNetworkImageView#setDefaultImageResId(int)} on the view.
*
* NOTE: If applicable, {@link CircledNetworkImageView#setDefaultImageResId(int)} and
* {@link CircledNetworkImageView#setErrorImageResId(int)} should be called prior to calling
* this function.
*
* @param url The URL that should be loaded into this ImageView.
* @param imageLoader ImageLoader that will be used to make the request.
*/publicvoidsetImageUrl(String url, ImageLoader imageLoader) {
mUrl = url;
mImageLoader = imageLoader;
// The URL has potentially changed. See if we need to load it.
loadImageIfNecessary(false);
}
/**
* Sets the default image resource ID to be used for this view until the attempt to load it
* completes.
*/publicvoidsetDefaultImageResId(int defaultImage) {
mDefaultImageId = defaultImage;
}
/**
* Sets the error image resource ID to be used for this view in the event that the image
* requested fails to load.
*/publicvoidsetErrorImageResId(int errorImage) {
mErrorImageId = errorImage;
}
/**
* Loads the image for the view if it isn't already loaded.
* @param isInLayoutPass True if this was invoked from a layout pass, false otherwise.
*/privatevoidloadImageIfNecessary(finalboolean isInLayoutPass) {
intwidth= getWidth();
intheight= getHeight();
booleanisFullyWrapContent= getLayoutParams() != null
&& getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT
&& getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT;
// if the view's bounds aren't known yet, and this is not a wrap-content/wrap-content// view, hold off on loading the image.if (width == 0 && height == 0 && !isFullyWrapContent) {
return;
}
// if the URL to be loaded in this view is empty, cancel any old requests and clear the// currently loaded image.if (TextUtils.isEmpty(mUrl)) {
if (mImageContainer != null) {
mImageContainer.cancelRequest();
mImageContainer = null;
}
setImageBitmap(null);
return;
}
// if there was an old request in this view, check if it needs to be canceled.if (mImageContainer != null && mImageContainer.getRequestUrl() != null) {
if (mImageContainer.getRequestUrl().equals(mUrl)) {
// if the request is from the same URL, return.return;
} else {
// if there is a pre-existing request, cancel it if it's fetching a different URL.
mImageContainer.cancelRequest();
setImageBitmap(null);
}
}
// The pre-existing content of this view didn't match the current URL. Load the new image// from the network.ImageContainernewContainer= mImageLoader.get(mUrl,
newImageListener() {
@OverridepublicvoidonErrorResponse(VolleyError error) {
if (mErrorImageId != 0) {
setImageResource(mErrorImageId);
}
}
@OverridepublicvoidonResponse(final ImageContainer response, boolean isImmediate) {
// If this was an immediate response that was delivered inside of a layout// pass do not set the image immediately as it will trigger a requestLayout// inside of a layout. Instead, defer setting the image by posting back to// the main thread.if (isImmediate && isInLayoutPass) {
post(newRunnable() {
@Overridepublicvoidrun() {
onResponse(response, false);
}
});
return;
}
if (response.getBitmap() != null) {
setImageBitmap(response.getBitmap());
} elseif (mDefaultImageId != 0) {
setImageResource(mDefaultImageId);
}
}
});
// update the ImageContainer to be the new bitmap container.
mImageContainer = newContainer;
}
@OverrideprotectedvoidonLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
loadImageIfNecessary(true);
}
@OverrideprotectedvoidonDetachedFromWindow() {
if (mImageContainer != null) {
// If the view was bound to an image request, cancel it and clear// out the image from the view.
mImageContainer.cancelRequest();
setImageBitmap(null);
// also clear out the container so we can reload the image if necessary.
mImageContainer = null;
}
super.onDetachedFromWindow();
}
@OverrideprotectedvoiddrawableStateChanged() {
super.drawableStateChanged();
invalidate();
}
/**
* In case the bitmap is manually changed, we make sure to
* circle it on the next onDraw
*/@OverridepublicvoidsetImageBitmap(Bitmap bm) {
mCircled = false;
super.setImageBitmap(bm);
}
/**
* In case the bitmap is manually changed, we make sure to
* circle it on the next onDraw
*/@OverridepublicvoidsetImageResource(int resId) {
mCircled = false;
super.setImageResource(resId);
}
/**
* In case the bitmap is manually changed, we make sure to
* circle it on the next onDraw
*/@OverridepublicvoidsetImageDrawable(Drawable drawable) {
mCircled = false;
super.setImageDrawable(drawable);
}
/**
* We want to make sure that the ImageView has the same height and width
*/@OverrideprotectedvoidonMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Drawabledrawable= getDrawable();
if (drawable != null) {
intwidth= MeasureSpec.getSize(widthMeasureSpec);
intdiw= drawable.getIntrinsicWidth();
if (diw > 0) {
intheight= width * drawable.getIntrinsicHeight() / diw;
setMeasuredDimension(width, height);
} elsesuper.onMeasure(widthMeasureSpec, heightMeasureSpec);
} elsesuper.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@OverrideprotectedvoidonDraw(Canvas canvas) {
//Let's circle the imageif ( !mCircled && getDrawable() != null) {
Drawabled= getDrawable();
try {
//We use reflection here in case that the drawable isn't a//BitmapDrawable but it contains a public getBitmap method.Bitmapbitmap= (Bitmap) d.getClass().getMethod("getBitmap").invoke(d);
if(bitmap != null){
BitmapcircleBitmap= getCircleBitmap(bitmap);
setImageBitmap(circleBitmap);
}
} catch (IllegalArgumentException e) {
} catch (IllegalAccessException e) {
} catch (InvocationTargetException e) {
} catch (NoSuchMethodException e) {
//Seems like the current drawable is not a BitmapDrawable or//that is doesn't have a public getBitmap() method.
}
//Mark as circled even if it failed, because if it fails once,//It will fail again.
mCircled = true;
}
super.onDraw(canvas);
}
/**
* Method used to circle a bitmap.
*
* @param bitmap The bitmap to circle
* @return The circled bitmap
*/publicstatic Bitmap getCircleBitmap(Bitmap bitmap) {
intsize= Math.min(bitmap.getWidth(), bitmap.getHeight());
Bitmapoutput= Bitmap.createBitmap(size,
size, Bitmap.Config.ARGB_8888);
Canvascanvas=newCanvas(output);
BitmapShader shader;
shader = newBitmapShader(bitmap, Shader.TileMode.CLAMP,
Shader.TileMode.CLAMP);
Paintpaint=newPaint();
paint.setAntiAlias(true);
paint.setShader(shader);
RectFrect=newRectF(0, 0 ,size,size);
intradius= size/2;
canvas.drawRoundRect(rect, radius,radius, paint);
return output;
}
}
Solution 4:
you can use CardView.
<android.support.v7.widget.CardViewapp:cardCornerRadius="@dimen/spacing_tiny"><com.android.volley.toolbox.NetworkImageView>
...
/>
</android.support.v7.widget.CardView>Solution 5:
This is how I did it:
In the volley library, copy the class called "NetworkImageView" and name it "NetworkImageViewCircle".
privatevoidsetAnimateImageBitmap(final Bitmap bitmap, boolean fadeIn) { final Bitmap bmp; bmp = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888); BitmapShadershader=newBitmapShader(bitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP); floatradius= Math.min(bitmap.getWidth(), bitmap.getHeight()) / 5; Canvascanvas=newCanvas(bmp); Paintpaint=newPaint(); paint.setAntiAlias(true); paint.setShader(shader); RectFrect=newRectF(0, 0, bitmap.getWidth(), bitmap.getHeight()); canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getWidth() / 2, paint); . . .
This made the trick for me. hope it helps.
Post a Comment for "How To Create Round Corner Image Using Volley Library Android"