I want to show a heart shape Image on an Image similar to following image:
I tried createScaledBitmap but it's not working. Here is my code:
#Override
public Bitmap transform(Bitmap bitmap) {
// TODO Auto-generated method stub
synchronized (ImageTransform.class) {
if (bitmap == null) {
return null;
}
Bitmap resultBitmap = bitmap.copy(bitmap.getConfig(), true);
Bitmap bitmapImage = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_heart);
Bitmap.createScaledBitmap(
bitmapImage, 1, 1, true);
Canvas canvas = new Canvas(resultBitmap);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setTextSize(40);
paint.setShadowLayer(2.0f, 1.0f, 1.0f, Color.BLACK);
canvas.drawText("$250", 10, 400, paint);
canvas.drawBitmap(bitmapImage, 460, 45, null);
bitmap.recycle();
return resultBitmap;
}
}
Image is not scaling I can see very big Image. Above code is in Transformation class of Picasso.
Why it should scale your bitmap image?
Lets go through your code:
Bitmap resultBitmap = bitmap.copy(bitmap.getConfig(), true);
ok this is the bitmap that will have hearth added
Bitmap bitmapImage = BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_heart);
You read your hearth image here in order to add it to "main" image later
Bitmap.createScaledBitmap(
bitmapImage, 1, 1, true);
This is redundant call because you omit here the result of method call...
Canvas canvas = new Canvas(resultBitmap);
here we got new canvas with mutable bitmap for modifications
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setTextSize(40);
paint.setShadowLayer(2.0f, 1.0f, 1.0f, Color.BLACK);
canvas.drawText("$250", 10, 400, paint);
You draw price here and it is ok
canvas.drawBitmap(bitmapImage, 460, 45, null);
You draw here a bitmap image that you've read from resources without modifications
bitmap.recycle();
This is redundant from Android 3.0
return resultBitmap;
Return of your image...
As you see you have a method call: Bitmap.createScaledBitmap(bitmapImage, 1, 1, true); That really does nothing. Replace it with: bitmapImage = Bitmap.createScaledBitmap(bitmapImage, 1, 1, true); and it should be fine.
If you want to optimize your memory usage here (because you are creating here 3 bitmaps instead of one) read THIS ARTICLE. Hope that helps :)
i want to convert canvas to image and save it on device. But when I set bitmap to canvas I get error java.lang.UnsupportedOperationException.
My full code:
public class SingleTouchEventView extends View {
private Paint paint = new Paint();
private Path path = new Path();
public SingleTouchEventView(Context context, AttributeSet attrs) {
super(context, attrs);
paint.setAntiAlias(true);
paint.setStrokeWidth(6f);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.BEVEL);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawPath(path, paint);
canvas.drawCircle(50, 50, 3, paint);
Bitmap bitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
canvas.setBitmap(bitmap);
try {
File file = new File(Environment.getExternalStorageDirectory() + "/image.jpg");
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, new FileOutputStream(file));
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
Maybe someone could help me to solve this problem?
That isn't how you draw to a bitmap. You do NOT use the canvas that draws to the screen. You create a second canvas, passing in the bitmap you want to draw to as a parameter in the constructor. Then any draw commands to that canvas will draw the bitmap. Then you draw that bitmap to the screen. Something like this:
Canvas myCanvas = new Canvas(myBitmap);
myCanvas.drawLine();
myCanvas.drawCircle();
//Insert all the rest of the drawing commands here
screenCanvas.drawBitmap(myBitmap, 0, 0);
I also would not write it to the file system in onDraw - I'd expect drawing performance to suffer badly if you do. A separate function call can do that. If you keep myBitmap around in a variable, you can just compress it anytime to write out the last draw to disk.
I have a mask bitmap with a half is red color and ones is transparent like this
https://www.dropbox.com/s/931ixef6myzusi0/s_2.png
I want to use mask bitmap to draw content on canvas only visible in red area, code like this:
Paint paint = new Paint();
public void draw(Canvas canvas) {
// draw content here
...
//and mask bitmap here
paint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.DST_IN));
canvas.drawBitmap(maskBitmap, 0, 0, paint);
}
The result as my expecting (content only visible in red area, BUT THE TRANSPARENT AREA BECOME BLACK IS PROBLEM!)
this image result :https://www.dropbox.com/s/mqj48992wllfkiq/s_2%20copy.png
Anyone help me???
Here is a solution which helped me to implement masking:
public void draw(Canvas canvas) {
Bitmap original = BitmapFactory.decodeResource(getContext().getResources(),R.drawable.original_image);
Bitmap mask = BitmapFactory.decodeResource(getContext().getResources(),R.drawable.mask_image);
//You can change original image here and draw anything you want to be masked on it.
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);
Canvas tempCanvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
tempCanvas.drawBitmap(original, 0, 0, null);
tempCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
//Draw result after performing masking
canvas.drawBitmap(result, 0, 0, new Paint());
}
The mask should be a white image with transparency.
It will work like this:
+ =
I encountered the same problem in my custom view and instead of decoding the bitmap from a resource, I had created the original bitmap and the masking bitmap from the scratch via canvas.draw*() methods (since both the original and mask are basic shapes). I was getting the blank opaque space instead of a transparent one. I fixed it by setting a hardware layer to my view.
View.setLayerType(LAYER_TYPE_HARDWARE, paint);
More info on why this is to be done here: https://stackoverflow.com/a/33483016/4747587
Same answer as #Sergey Pekar give but I have updated it in Kotlin.
fun ImageView.getMaskBitmap(imageUrl: String? = null, mContent: Int, mMaskedImage : Int) {
runOnBackground {
// if you have https image url then use below line
//val original: Bitmap = BitmapFactory.decodeStream(URL(imageUrl).openConnection().getInputStream())
// if you have png or jpg image then use below line
val original: Bitmap = BitmapFactory.decodeResource(resources, mContent)
val mask = BitmapFactory.decodeResource(resources, mMaskedImage) // mMaskedImage Your masking image
val result: Bitmap = Bitmap.createBitmap(mask.width, mask.height, Bitmap.Config.ARGB_8888, true)
val tempCanvas = Canvas(result)
val paint = Paint(Paint.ANTI_ALIAS_FLAG)
paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
tempCanvas.apply {
drawBitmap(original, 0f, 0f, null)
drawBitmap(mask, 0f, 0f, paint)
}
paint.xfermode = null
//Draw result after performing masking
runOnBackground(onMainThread = {
this.apply {
setImageBitmap(result)
scaleType = ImageView.ScaleType.FIT_CENTER
}
})
}
}
Github Demo
Bitmap finalMasking = stackMaskingProcess(imageBitmap, bitmapMasking);
private Bitmap stackMaskingProcess(Bitmap _originalBitmap, Bitmap _maskingBitmap) {
try {
if (_originalBitmap != null)
{
int intWidth = _originalBitmap.getWidth();
int intHeight = _originalBitmap.getHeight();
resultMaskBitmap = Bitmap.createBitmap(intWidth, intHeight, Bitmap.Config.ARGB_8888);
getMaskBitmap = Bitmap.createScaledBitmap(_maskingBitmap, intWidth, intHeight, true);
Canvas mCanvas = new Canvas(resultMaskBitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mCanvas.drawBitmap(_originalBitmap, 0, 0, null);
mCanvas.drawBitmap(getMaskBitmap, 0, 0, paint);
paint.setXfermode(null);
paint.setStyle(Paint.Style.STROKE);
}
} catch (OutOfMemoryError o) {
o.printStackTrace();
}
return resultMaskBitmap;
}
I like the approach from Er. Praful Parmar's answer but for me it did not quite work as expected. I had problems, because some scaling was going on without intention.
My Bitmaps had a different density than my device and this messed things up.
Also I wanted to reduce the creation of Objects, so I moved the Paint object to a constant for reuse.
So here is my utils method:
public static final//
Bitmap createWithMask(final Bitmap img, final Bitmap mask) {
final Bitmap result = Bitmap.createBitmap(img.getWidth(), img.getHeight(),
Bitmap.Config.ARGB_8888);
result.setDensity(originalBitmap.getDensity()); // to avoid scaling if density of 'img' is different form the default on your device
final Canvas canvas = new Canvas(result);
canvas.drawBitmap(img, 0, 0, null);
canvas.drawBitmap(mask, 0, 0, PAINT_FOR_MASK);
return result;
}//end-method
private static final Paint PAINT_FOR_MASK = createPaintForMask();
private static final//
Paint createPaintForMask() {
final Paint paint = new Paint();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
return paint;
}//end-method
I have an ImageView and I want to make it with rounded corners.
I use this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#null"/>
<stroke android:width="1dp"
android:color="#ff000000"/>
<corners android:radius="62px"/>
</shape>
And set this code as background of my imageview.
It works, but the src image that I put on the ImageView is going out of the borders and doesn't adapt itself into the new shape.
How can I solve the problem?
try this one :
public class CustomImageView extends ImageView {
public static float radius = 18.0f;
public CustomImageView(Context context) {
super(context);
}
public CustomImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onDraw(Canvas canvas) {
//float radius = 36.0f;
Path clipPath = new Path();
RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
canvas.clipPath(clipPath);
super.onDraw(canvas);
}
}
and
<your.pack.name.CustomImageView
android:id="#+id/selectIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="centerCrop" />
CustomImageView iconImage = (CustomImageView )findViewById(R.id.selectIcon);
iconImage.setImageBitmap(bitmap);
or,
ImageView iv= new CustomImageView(this);
iv.setImageResource(R.drawable.pic);
It's strange that nobody here has mentioned RoundedBitmapDrawable from Android Support Library v4. For me it is the simplest way to get rounded corners without borders. Here is example of usage:
RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(), bitmap);
final float roundPx = (float) bitmap.getWidth() * 0.06f;
roundedBitmapDrawable.setCornerRadius(roundPx);
Make one function which make rounded to your bitmap using canvas.
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
.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, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = pixels;
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(bitmap, rect, rect, paint);
return output;
}
for more info:> here
The accepted answer uses path clipping, but it doesn't support anti-aliasing. See Romain Guy's comments on his post. "path clipping does not support antialiasing and you get jagged edges."
http://www.curious-creature.com/2012/12/11/android-recipe-1-image-with-rounded-corners/
There is one good library(vinc3m1’s RoundedImageView) that supoorts rounded corners on ImageView, but it only supports the same radiuses on every corners. So I made one that you can set different radiuses on each corners.
It doesn't rely on path clipping, nor redrawing. It only draws one time with canvas.drawPath() method. So I finally got result that I wanted like below.
See : https://github.com/pungrue26/SelectableRoundedImageView
For me, the below method does the magic. :)
This method accepts a bitmap object and returns it back with rounded corners. roundPx is the number of rounded pixels you want:
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.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, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = 12;
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(bitmap, rect, rect, paint);
return output;
}
...or you could use this library instead of ImageView without any further coding.
If you need make Bitmap with different corner radii and I recommend follow code:
private static Bitmap createRoundedRectBitmap(#NonNull 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;
}
If you need border also then:
1. You can use a rounded box image with a transparent body and white from outside. For Example:
and use this with target image like below:
<FrameLayout
android:layout_width="100px"
android:layout_height="100px" >
<ImageView
android:id="#+id/targetImage"
android:layout_width="100px"
android:layout_height="100px"
android:src="#drawable/app_icon"
android:layout_gravity="center" />
<ImageView
android:id="#+id/boxImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/box" />
Adding CardView as parent layout of ImageView also be a good solution.
It can be done with background drawable, like explain in many posts including this one, but it also needs to set clipping.
Here a full example:
The code:
AppCompatImageView iconView = findViewById(R.id.thumbnail);
iconView.setClipToOutline(true);
The layout:
<android.support.v7.widget.AppCompatImageView
android:id="#+id/thumbnail"
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="#string/thumbnail"
android:scaleType="centerInside"
android:background="#drawable/round_view" <!--here set the drawable as background -->
tools:src="#mipmap/ic_user" />
The drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp" />
</shape>
/**
* Creates new circular bitmap based on original one.
* #param newCornerRadius is optional
*/
fun Bitmap.toCircular(context: Context, newCornerRadius: Float? = null): RoundedBitmapDrawable {
return RoundedBitmapDrawableFactory.create(context.resources, this).apply {
isCircular = true
newCornerRadius?.let {
cornerRadius = it
}
}
}
public class RoundedImageView extends ImageView {
public RoundedImageView(Context context) {
super(context);
}
public RoundedImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public RoundedImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Bitmap rounder = Bitmap.createBitmap(getWidth(),getHeight(),Bitmap.Config.ARGB_8888);
Canvas canvasRound = new Canvas(rounder);
Paint xferPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
xferPaint.setColor(Color.BLACK);
final int rx = this.getWidth(); //our x radius
final int ry = this.getHeight(); //our y radius
canvasRound.drawRoundRect(new RectF(0,0,rx,ry), rx, ry, xferPaint);
xferPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
canvas.drawBitmap(rounder, 0, 0, xferPaint);
}
}
Kotlin version
fun Bitmap.roundCorner(pixels: Int): Bitmap {
val output: Bitmap = Bitmap.createBitmap(
width, height, Bitmap.Config.ARGB_8888
)
val canvas = Canvas(output)
val color = -0xbdbdbe
val paint = Paint()
val rect = Rect(0, 0, width, height)
val rectF = RectF(rect)
val roundPx = pixels.toFloat()
paint.isAntiAlias = true
canvas.drawARGB(0, 0, 0, 0)
paint.color = color
canvas.drawRoundRect(rectF, roundPx, roundPx, paint)
paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
canvas.drawBitmap(this, rect, rect, paint)
return output
}
call by:
sourceBitmap.roundCorner(60)
The method to make rounded corners for imageview in android is not rocket science guys! just use a png with required curves with the same color as your background and set the overlay to FITXY.!
public void drawRoundImage(boolean isEditPicEnable){
if(originalImageBitmap != null){
setBackgroundResource(R.drawable.ic_account_user_outer_circle_blue);
if (isEditPicEnable) {
setBackgroundResource(R.drawable.ic_account_user_outer_circle_white);
Bitmap mask = BitmapFactory.decodeResource(getResources(), R.drawable.ic_account_white_mask);
Bitmap mask1 = BitmapFactory.decodeResource(getResources(), R.drawable.ic_account_pencil_bg);
originalImageBitmap = Bitmap.createScaledBitmap(originalImageBitmap, mask.getWidth(), mask.getHeight(), true);
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
Canvas mCanvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mCanvas.drawBitmap(originalImageBitmap, 0, 0, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
mCanvas.drawBitmap(mask1, 0, 0, null);
Bitmap mask2 = BitmapFactory.decodeResource(getResources(), R.drawable.ic_account_pencil);
mCanvas.drawBitmap(mask2, 0, 0, null);
setImageBitmap(result);
setScaleType(ScaleType.FIT_XY);
} else {
Bitmap mask = BitmapFactory.decodeResource(getResources(),R.drawable.ic_account_white_mask);
originalImageBitmap = Bitmap.createScaledBitmap(originalImageBitmap, mask.getWidth(),mask.getHeight(), true);
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(),Bitmap.Config.ARGB_8888);
Canvas mCanvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mCanvas.drawBitmap(originalImageBitmap, 0, 0, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
setImageBitmap(result);
setScaleType(ScaleType.FIT_XY);
}
}else{
setBackgroundResource(R.drawable.ic_account_user_outer_circle_blue);
setImageResource(R.drawable.my_ac_default_profile_pic);
}
}
Say I've got a fully rectangle image:
Now when I show it in an ImageView, I want one corner to be cut off, like this:
How can I achieve this on runtime?
I've solved it using this code:
public static Bitmap maskImage(Context context, Bitmap original) {
if (original == null)
return null;
Bitmap result = Bitmap.createBitmap(original.getWidth(), original.getHeight(), Config.ARGB_8888);
Canvas c = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(android.graphics.Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
Path path = new Path();
path.moveTo(result.getWidth(), result.getHeight());
path.lineTo(result.getWidth() - dpToPx(context, CORNERWIDTHDP), result.getHeight());
path.lineTo(result.getWidth(), result.getHeight() - dpToPx(context, CORNERHEIGHTDP));
path.close();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
c.drawBitmap(original, 0, 0, null);
c.drawPath(path, paint);
paint.setXfermode(null);
return result;
}