I am trying to load an image in CircularImageView but it is giving me outOfMemory error.
I am using following code for CircularImageView:
CircularImageView.java
public class CircularImageView extends ImageView {
public CircularImageView(Context ctx, AttributeSet attrs) {
super(ctx, attrs);
}
#Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
int w = getWidth(), h = getHeight();
Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);
canvas.drawBitmap(roundBitmap, 0, 0, null);
}
public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
Bitmap
finalBitmap;
if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
false);
else
finalBitmap = bitmap;
Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f,
finalBitmap.getHeight() / 2 + 0.7f,
finalBitmap.getWidth() / 2 + 0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, rect, paint);
return output;
}
}
I using it in the design as given below:
<com.almabay.almachat.circularImageView.CircularImageView
android:id="#+id/img_group"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true" />
I am getting image from server and trying to display it in the list view using Adapter.Following code is being used here:
Picasso.with(context).load(image_url).error(R.drawable.default_avatar).into(viewHolder.imgGroup);
Here image_url is the URL of the image to be loaded in circular image view.ViewHolder.imgGroup is the circularImageView.
Please help me to fix the issue.
I see you are using Picasso for image loading why not use picasso image transformations. it's very simple to implement :-
ImageView im = (ImageView) findViewById(R.id.img1);
Picasso.with(MainActivity2.this).load(R.drawable.kitten)
.transform(new CropCircleTransformation()).into(im);
and it looks like this
You just need to add transformation class
import com.squareup.picasso.Transformation;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
public class CropCircleTransformation implements Transformation {
#Override public Bitmap transform(Bitmap source) {
int size = Math.min(source.getWidth(), source.getHeight());
int width = (source.getWidth() - size) / 2;
int height = (source.getHeight() - size) / 2;
Bitmap bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
BitmapShader shader =
new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
if (width != 0 || height != 0) {
// source isn't square, move viewport to center
Matrix matrix = new Matrix();
matrix.setTranslate(-width, -height);
shader.setLocalMatrix(matrix);
}
paint.setShader(shader);
paint.setAntiAlias(true);
float r = size / 2f;
canvas.drawCircle(r, r, r, paint);
source.recycle();
return bitmap;
}
#Override public String key() {
return "CropCircleTransformation()";
}
}
More transformations can we find here https://github.com/wasabeef/picasso-transformations
Normally I'd tell you that the error could be anywhere and you're probably leaking. But you're making 2 new bitmaps in onDraw? And all 3 are in memory? Not only is that hideously wasteful, but your performance will suck- you should even avoid using new in onDraw, much less allocating bitmaps.
Throw this out and rewrite it completely. You should avoid working on a drawable here (especially since you're assuming its a bitmap anyway which is a bad idea), you should take in a filename or resource id of the bitmap and read it in/scale it with 1 createBitmap command by using BitmapOptions. You should do this when the bitmap is set and save the result, do NOT scale in onDraw which is called all the time. You can avoid the 3rd bitmap by using a circular clipping path instead of using porter duff modes and a second canvas. You can do all this with just 1 bitmap, and should.
Related
`
There is an requirement in my project to set any bitmap into mug and also edit bitmap and wright some text on image then past this bitmap to mug just like attached image .
I need a solution in Android or any supported library, Before I have tried to do this with Android Canvas and its method to draw arc But not reached my requirement.
/**
* Draw one image over other using the canvas paint and path drawing.
*/
public Bitmap createMaskedImageInImageCenterRightMug(Drawable back,
Bitmap bitmapToDrawInTheCenter) {
Bitmap backgroundBitmap = ((BitmapDrawable) back).getBitmap();
int hieghtBack = backgroundBitmap.getHeight();
int widthBack = backgroundBitmap.getWidth();
int hieghtFront = bitmapToDrawInTheCenter.getHeight();
int widthFront = bitmapToDrawInTheCenter.getWidth();
int widthToDrawOnMug = widthBack / 2;
backgroundBitmap = Bitmap.createScaledBitmap(backgroundBitmap, (int) canvas_width, hieghtBack, true);
// Create mask
Bitmap backgroundBitmapMask = Bitmap.createBitmap(backgroundBitmap, 7, 0, (int) (canvas_width / 2), hieghtBack);
if (widthToDrawOnMug <= widthFront) {
bitmapToDrawInTheCenter = Bitmap.createBitmap(
bitmapToDrawInTheCenter, (widthFront * 40) / 100, 0,
(widthFront * 60) / 100, hieghtFront);
}
Bitmap backgroundBitmapScaledMask = Bitmap.createScaledBitmap(
backgroundBitmapMask, widthToDrawOnMug, hieghtBack - 50, true);
bitmapToDrawInTheCenter = Bitmap.createScaledBitmap(
bitmapToDrawInTheCenter, backgroundBitmapScaledMask.getWidth(),
backgroundBitmapScaledMask.getHeight(), true);
Bitmap resultBitmap = Bitmap.createBitmap(
backgroundBitmapScaledMask.getWidth(),
backgroundBitmapScaledMask.getHeight(),
backgroundBitmapScaledMask.getConfig());
Canvas canvas = new Canvas(resultBitmap);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(backgroundBitmapScaledMask, 0, 0, null);
canvas.drawBitmap(bitmapToDrawInTheCenter, 0, 0, paint);
return resultBitmap;
}
/**
* Draw one image over other using the canvas paint and path drawing.
*/
public Bitmap pasteOverMugForRightMug(Drawable back,
Bitmap bitmapToDrawInTheCenter) {
Bitmap backgroundBitmap = ((BitmapDrawable) back).getBitmap();
Bitmap resultBitmap = Bitmap.createBitmap(backgroundBitmap.getWidth(), backgroundBitmap.getHeight(), backgroundBitmap.getConfig());
Canvas canvas = new Canvas(resultBitmap);
canvas.drawBitmap(backgroundBitmap, new Matrix(), null);
Paint paint = new Paint();
canvas.drawBitmap(bitmapToDrawInTheCenter, 0, 25, paint);
return resultBitmap;
}
Here is my code . Some hard code values are used according plain Mug image Aspect Ratio.
Also Tried to do this with Open GL but it was very complex .
And and could not find method for cylinder shape in one of the image processing library Image magic.
if any one have an idea please share .
I have a Recycler view and the view containing n number of url images. The url images are different resolution. I am using Picasso image loader to load the images and set a RoundedCornerTransofrmation() with fixed radius. But different images are setting with different radius.
you can add this class in your package :
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
// enables hardware accelerated rounded corners
// original idea here : http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/
public class RoundedTransformation implements com.squareup.picasso.Transformation {
private final int radius;
private final int margin; // dp
// radius is corner radii in dp
// margin is the board in dp
public RoundedTransformation(final int radius, final int margin) {
this.radius = radius;
this.margin = margin;
}
#Override
public Bitmap transform(final Bitmap source) {
final Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
canvas.drawRoundRect(new RectF(margin, margin, source.getWidth() - margin, source.getHeight() - margin), radius, radius, paint);
if (source != output) {
source.recycle();
}
return output;
}
#Override
public String key() {
return "rounded";
}
you can use above class like this :
Picasso.with(c).load(s[0]).placeholder(R.drawable.placeholder).transform(new RoundedTransformation(40,4)).error(c.getResources().getDrawable(R.drawable.placeholder)).into(holder.im);
I have found the solution to set fixed radius for different resolution images in Picasso roundedCornerTransformation()
Implement the custom class with implements com.squareup.picasso.Transformation
and modify the transform method as like below
#Override
public Bitmap transform(final Bitmap source) {
//Get the Image Width Form incoming image
int radius = source.getWidth();
//Set the percentage value for radius
radius = (radius*10)/100;
final Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
canvas.drawRoundRect(new RectF(margin, margin, source.getWidth() - margin, source.getHeight() - margin), radius, radius, paint);
if (source != output) {
source.recycle();
}
return output;
}
Based on the percentage value, we can set image curve radius as fixed.
Thanks.
I know there are lots of link available to make ImageView Round Corner.
But I'm Using Picasso Library for Image Loading..
I refer the link to get result.
But the Problem is that I'm Using it in ListView and for the LIstView's first item ImageView its working perfectly fine but for the remaining once transformation is not working.
I am using this transformation:
https://gist.github.com/julianshen/5829333
Picasso.with(activity).load(url).transform(new CircleTransform()).into(imageView);
You can use RoundedCornersTransformation class of picasso-transformations library.
Example :
final int radius = 5;
final int margin = 5;
final Transformation transformation = new RoundedCornersTransformation(radius, margin);
Picasso.with(activity).load(url).transform(transformation).into(imageView);
You can use this class to make rounded corners rectangle image view with Picasso, use it like this
Picasso.with(activity).load(url).transform(new RoundedCornersTransform(this)).into(imageView);
Here is the class RoundedCornersTransform.
package com.demo.picasso;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import com.squareup.picasso.Transformation;
public class RoundedCornersTransform implements Transformation {
#Override
public Bitmap transform(Bitmap source) {
int size = Math.min(source.getWidth(), source.getHeight());
int x = (source.getWidth() - size) / 2;
int y = (source.getHeight() - size) / 2;
Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
if (squaredBitmap != source) {
source.recycle();
}
Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
BitmapShader shader = new BitmapShader(squaredBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
paint.setShader(shader);
paint.setAntiAlias(true);
float r = size / 8f;
canvas.drawRoundRect(new RectF(0, 0, source.getWidth(), source.getHeight()), r, r, paint);
squaredBitmap.recycle();
return bitmap;
}
#Override
public String key() {
return "rounded_corners";
}
}
i used RoundedCornersTransformationclass of picasso-transformationslibrary. I had custom adapter with view holder pattern in my listview. I added below dependency in my build.gradle:
dependencies {
compile 'jp.wasabeef:picasso-transformations:2.1.0'
}
And in my customArrayAdapter.java,i added:
Picasso.with(getContext()).load(path).transform(new RoundedCornersTransformation(10,10)).resize(175,300).into(viewHolder.ivImage);
This would both resize and give rounded corners to you images.
Like said here. You can use MaskTransformationclass of picasso-transformations library.
Example :
final Transformation transformation = new MaskTransformation(getContext(), R.drawable.rounded_convers_transformation);
Picasso.with(activity).load(url).transform(transformation).into(imageView);
res/drawable/rounded_convers_transformation.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp"/>
<solid android:color="#color/black"/>
</shape>
UPDATE: But notice that you should also .resize(w,h) the image, because if image will be large the round will not be determinatable
Kotlin version of RoundCornerTransform based on #stevyhacker 's answer.
Support rectangle instead of square image.
No extra 3rd party library needed.
=============================================
import android.graphics.*
import com.squareup.picasso.Transformation
class RoundCornersTransform(private val radiusInPx: Float) : Transformation {
override fun transform(source: Bitmap): Bitmap {
val bitmap = Bitmap.createBitmap(source.width, source.height, source.config)
val canvas = Canvas(bitmap)
val paint = Paint(Paint.ANTI_ALIAS_FLAG or Paint.DITHER_FLAG)
val shader = BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
paint.shader = shader
val rect = RectF(0.0f, 0.0f, source.width.toFloat(), source.height.toFloat())
canvas.drawRoundRect(rect, radiusInPx, radiusInPx, paint)
source.recycle()
return bitmap
}
override fun key(): String {
return "round_corners"
}
}
Usage:
Picasso.get()
.load(imageUrl)
.memoryPolicy(MemoryPolicy.NO_CACHE)
.placeholder(R.drawable.image_placeholder)
.transform(RoundCornersTransform(32.0f))
.into(imageView, callback)
Following #stevyhacker's answer and this related one, I came up with this:
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import com.squareup.picasso.Transformation;
public class RoundedCornersTransform implements Transformation {
private static Bitmap createRoundedRectBitmap(Bitmap bitmap,
float topLeftCorner, float topRightCorner,
float bottomRightCorner, float bottomLeftCorner) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = Color.WHITE;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
Path path = new Path();
float[] radii = new float[]{
topLeftCorner, bottomLeftCorner,
topRightCorner, topRightCorner,
bottomRightCorner, bottomRightCorner,
bottomLeftCorner, bottomLeftCorner
};
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
path.addRoundRect(rectF, radii, Path.Direction.CW);
canvas.drawPath(path, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
#Override
public Bitmap transform(Bitmap source) {
int size = Math.min(source.getWidth(), source.getHeight());
int x = (source.getWidth() - size) / 2;
int y = (source.getHeight() - size) / 2;
Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
if (squaredBitmap != source) {
source.recycle();
}
float r = size / 4f;
Bitmap roundedBitmap = createRoundedRectBitmap(squaredBitmap, r, r, r, r);
squaredBitmap.recycle();
return roundedBitmap;
}
#Override
public String key() {
return "rounded_corners";
}
}
Use it like this:
Picasso.with(context).load(url).transform(new RoundedCornersTransform()).into(imageView);
Probably needs some enhancements though, so watch out!
I'm trying create a circular shaped drawable to put as overlay for profile pictures(circular images)
I wrote the below code for circular drawable overlay,
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#color/light_blue_bg" />
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke
android:width="2dp"
android:color="#android:color/white" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
Refer the output in the below screen image,
Known Issues: I'm creating a rectangle with #color/light_blue_color and it has inner oval shape with stroke color and inner solid transparent color, but due to outer rectangle color inner circle transparency not showing picture.
If I remove outer rectangle color real square picture will come out of circular overlay.
Is there any way to give color to outer circular portion alone?
Any help ll be highly appreciated
#Sreedhu Madhu .... you have to customize your imageview and work it on bitmap and canvas to achieve so..
although i suggest you to use one of the library posted by Henning Dodenhof on github and android-arsenal... CircleImageView
on the other side you can take a look how this is done..using this class..
Custom Class for Circular ImageView
the imp methods was setup() and onDraw()
I don't think it is possible by doing it just in XML. But you can mask it out afterwards in code. For an example, see this tutorial.
For rounded (Circled imageView)add this class to your source
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;
public class RoundedImageView extends ImageView {
public RoundedImageView(Context ctx, AttributeSet attrs) {
super(ctx, attrs);
}
#Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
int w = getWidth(), h = getHeight();
Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);
canvas.drawBitmap(roundBitmap, 0, 0, null);
}
public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
Bitmap finalBitmap;
if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
false);
else
finalBitmap = bitmap;
Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
finalBitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f,
finalBitmap.getHeight() / 2 + 0.7f,
finalBitmap.getWidth() / 2 + 0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, rect, paint);
return output;
}
}
and then change your ImageView to your package name and class name (RoundedImageView) in your layout file such as
<com.mypackege.RoundedImageView
android:id="#+id/imageView_round"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="15dp"
android:src="#drawable/my_image" />
Hope this will work.
Try something like this, it worked for me!
in your xml place this custom RoundImage:
<com.example.hkh.learningandroid.RoundedImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#drawable/person"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:id="#+id/MyImageView" />
and create new class and name it RoundImageView:
public class RoundedImageView extends ImageView {
public RoundedImageView(Context ctx, AttributeSet attrs) {
super(ctx, attrs);
}
#Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
int w = getWidth(), h = getHeight();
Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);
canvas.drawBitmap(roundBitmap, 0, 0, null);
}
public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
Bitmap finalBitmap;
if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
false);
else
finalBitmap = bitmap;
Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f,
finalBitmap.getHeight() / 2 + 0.7f,
finalBitmap.getWidth() / 2 + 0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, rect, paint);
return output;
}
}
And run, i hope it will help, it will give the expected rounded image as you wanted
Is there a reasonable way to do rounded corners with Picasso that
Doesn't significantly slow down drawing
Works with hardware layers
Doesn't create an extra bitmap for each image
Allows resizing the downloaded bitmap into the size of the destination imageview
Most of the picasso advice on rounded corners suggests that a transformation be used, but I haven't seen an example that doesn't create an extra bitmap as part of the transformation.
This seems to be because Picasso only uses bitmaps, while the tricks to do rounded corners use the fact that you can dynamically draw the rounded corners on reasonably efficiently (most solutions use something along the lines of http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/).
Doing this with Volley was a bit hacky but possible, by just changing the type of ImageView to something that took a custom drawable, which drew rounded corners. Since Picasso needs bitmaps (at least, there's only a bitmap -> bitmap transformation), this is out, since the conversion of the drawable to bitmap creates a bitmap in the process.
One solution would be to do the work to modify picasso in a branch on my own that added a bitmap -> drawable transform, but I'd imagine there's a better way to go about this.
I do not want to draw a 9-patch on top of a view to give the appearance of rounded corners.
This code works fine for me
Picasso.with(getApplicationContext())
.load(sp.getString("image_url", ""))
.transform(new RoundedTransformation(100, 0))
.fit()
.into(userProfileImg);
// here is the class for make
public class RoundedTransformation implements
com.squareup.picasso.Transformation {
private final int radius;
private final int margin; // dp
// radius is corner radii in dp
// margin is the board in dp
public RoundedTransformation(final int radius, final int margin) {
this.radius = radius;
this.margin = margin;
}
#Override
public Bitmap transform(final Bitmap source) {
final Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP,
Shader.TileMode.CLAMP));
Bitmap output = Bitmap.createBitmap(source.getWidth(),
source.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
canvas.drawRoundRect(new RectF(margin, margin, source.getWidth()
- margin, source.getHeight() - margin), radius, radius, paint);
if (source != output) {
source.recycle();
}
return output;
}
#Override
public String key() {
return "rounded";
}
}
I also needed something like this, but with a border. I've searched the internet and I've found one version (without rounded corners) that looked good, but the border was over the image and I didn't like that. So I made my own version with the border outside the image.
public class BitmapBorderTransformation implements Transformation {
private int mBorderSize;
private int mCornerRadius = 0;
private int mColor;
public BitmapBorderTransformation(int borderSize, int color) {
this.mBorderSize = borderSize;
this.mColor = color;
}
public BitmapBorderTransformation(int borderSize, int cornerRadius, int color) {
this.mBorderSize = borderSize;
this.mCornerRadius = cornerRadius;
this.mColor = color;
}
#Override
public Bitmap transform(Bitmap source) {
int width = source.getWidth();
int height = source.getHeight();
Bitmap image = Bitmap.createBitmap(width, height, source.getConfig());
Canvas canvas = new Canvas(image);
canvas.drawARGB(0, 0, 0, 0);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Rect rect = new Rect(0, 0, width, height);
if(this.mCornerRadius == 0) {
canvas.drawRect(rect, paint);
}
else {
canvas.drawRoundRect(new RectF(rect),
this.mCornerRadius, this.mCornerRadius, paint);
}
paint.setXfermode(new PorterDuffXfermode((PorterDuff.Mode.SRC_IN)));
canvas.drawBitmap(source, rect, rect, paint);
Bitmap output;
if(this.mBorderSize == 0) {
output = image;
}
else {
width = width + this.mBorderSize * 2;
height = height + this.mBorderSize * 2;
output = Bitmap.createBitmap(width, height, source.getConfig());
canvas.setBitmap(output);
canvas.drawARGB(0, 0, 0, 0);
rect = new Rect(0, 0, width, height);
paint.setXfermode(null);
paint.setColor(this.mColor);
paint.setStyle(Paint.Style.FILL);
canvas.drawRoundRect(new RectF(rect), this.mCornerRadius, this.mCornerRadius, paint);
canvas.drawBitmap(image, this.mBorderSize, this.mBorderSize, null);
}
if(source != output){
source.recycle();
}
return output;
}
#Override
public String key() {
return "bitmapBorder(" +
"borderSize=" + this.mBorderSize + ", " +
"cornerRadius=" + this.mCornerRadius + ", " +
"color=" + this.mColor +")";
}
}
Here are some samples:
Border with rounded corners:
new BitmapBorderTransformation(3, 15, Color.WHITE);
http://postimg.org/image/68fz5md39/
Rounded corners without border:
new BitmapBorderTransformation(0, 15, Color.WHITE);
http://postimg.org/image/he4681rsv/
Also you can do border without rounded corners:
new BitmapBorderTransformation(3, Color.WHITE);
this will work for any image of any size--
1) first create an empty image container for different resolution
2) then on runtime get its height and width by this-------
BitmapFactory.Options dimensions = new BitmapFactory.Options();
dimensions.inJustDecodeBounds = true;
Bitmap mBitmap = BitmapFactory.decodeResource(activity.getResources(), R.drawable.icon, dimensions);
int height = dimensions.outHeight;
int width = dimensions.outWidth;
3)
Picasso.with(getActivity())
.load(url)
.error(R.drawable.image2)
.placeholder(R.drawable.ic_drawer)
.resize(width, height )
.transform(new ImageTrans_roundedcorner())
.into(imageView1);
4) now transformation class----
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Bitmap.Config;
import android.graphics.Rect;
import android.graphics.RectF;
import com.squareup.picasso.Transformation;
public class ImageTrans_roundedcorner implements Transformation{
private int mBorderSize=10;
private int mCornerRadius = 20;
private int mColor=Color.BLACK;
#Override
public Bitmap transform(Bitmap source) {
// TODO Auto-generated method stub
Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, source.getWidth(), source.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = mCornerRadius;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(source, rect, rect, paint);
// draw border
paint.setColor(color);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth((float) mBorderSize);
canvas.drawRoundRect(rectF, mCornerRadius, mCornerRadius, paint);
//-------------------
if(source != output) source.recycle();
return output;
}
#Override
public String key() {
// TODO Auto-generated method stub
return "grayscaleTransformation()";
}
}
EDIT: the answer I would suggest would be to wait for Picasso 2.3, or fork their github now, where you can actually get at a BitmapDrawable.
One approach I've found so far is that you can load images into a Target object, create a custom drawable from the bitmap that way, then set the drawable into the ImageView, where it'll draw without creating a new bitmap.
This approach sort of sucks for a few reasons though:
1) You have to manage Target objects. These are weak-referenced (thankfully), so you have to keep track of them yourself. Ick. Memory leaks ahoy.
2) When you get the callback, you had better check to make sure the state of the world is still relevant to the picture, which is part of what you want to avoid by using picasso.
In short, there are a few things that seem to prevent a better solution.
1) Picasso wraps bitmaps in PicassoDrawables. This means you you have to handle arbitrary drawables in your custom imageView (if you go that route), or special case for this class.
2) PicassoDrawable doesn't expose the source bitmap, so you have to convert the drawable to a bitmap (requires creating a new bitmap, afaict).
3) There's no bitmap -> drawable transform function (see #1 for why, most likely).
Would love to hear if there's something I'm missing, or someone has come up with a better solution. Right now my best plan is to either do the Target management proposed above, or fork the picasso repo, change PicassoDrawable to have a public accessor for the underlying bitmap, and do the conversion into a custom drawable that way in my imageView.