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;
}
Related
I have a question regarding a circular ImageView. When I try to set the background color of my ImageView, it actually ends up being a square and not a circle when in reality I would want the ImageView to be a simple circular ImageView with some text as the image. Here was my attempt.
ImageView imageView = postViewHolder.fourthCommenter;
Bitmap b=Bitmap.createBitmap(30, 30, Bitmap.Config.ARGB_8888);
BitmapShader shader = new BitmapShader(b, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(shader);
paint.setAntiAlias(true);
Canvas c = new Canvas(b);
c.drawCircle(b.getWidth()/2, b.getHeight()/2, b.getWidth()/2, paint);
c.drawText("+10",30,30,paint);
imageView.setBackgroundColor(ContextCompat.getColor(context, R.color.material_color_grey_200));
imageView.setImageBitmap(b);
All I want is to have the image show a grey circular Imageview with the word "+10" in it. What shows up is a simple square Imageview with no text in it. I can't see what I am doing wrong.
Any help would be apprecaited.
Thanks!
EDIT: Here is an example of what I would want. I want to have an image that looks exactly like the +16 image shown on this photo:
All I want is to have the image show a grey circular Imageview
Try this code
Bitmap picture = BitmapFactory.decodeResource(getResources(), R.mipmap.add_image);
ImageView imageView = (ImageView) findViewById(R.id.imgProfilePicture);
imageView.setImageBitmap(getRoundedBitmap(picture));
public Bitmap getRoundedBitmap(Bitmap bitmap){
Bitmap circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(shader);
paint.setAntiAlias(true);
Canvas c = new Canvas(circleBitmap);
c.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getWidth() / 2, paint);
return circleBitmap;
}
Your xml file
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imgProfilePicture"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_marginBottom="20dp"
app:civ_border_width="3dp"
app:civ_border_color="#color/light_gray" />
and add this in build.gradle
compile 'de.hdodenhof:circleimageview:2.1.0'
Cirular ImageView Done !
Not sure if it's the proper way to do it , but it should work for your case :
First use this to create the bitmap with the required circle shape :
public Bitmap getCircledBmp(Context mContext,Bitmap bmp){
Canvas canvas = new Canvas(bmp);
int color = ContextCompat.getColor(mContext, R.color.material_color_grey_200);
Paint paint = new Paint();
Rect rect = new Rect(0, 0, bmp.getWidth(), bmp.getHeight());
RectF rectFloat = new RectF(rect);
paint.setAntiAlias(true);
paint.setColor(color);
canvas.drawARGB(0, 0, 0, 0);
canvas.drawOval(rectFloat, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bmp, rect, rect, paint);
return bmp;
}
Then add the text that you want :
public Bitmap drawText(String text, Bitmap bmp, int textSize) {
//text dimensions
TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
textPaint.setTextSize(textSize);
textPaint.setColor(Color.BLACK);
textPaint.setTextAlign(Paint.Align.CENTER);
StaticLayout mTextLayout = new StaticLayout(text, textPaint,
bmp.getWidth(), Layout.Alignment.ALIGN_NORMAL, 1.0f, 0.0f, false);
Canvas canvas = new Canvas(bmp);
//draw text
canvas.save();
canvas.translate((canvas.getWidth() / 2), (canvas.getHeight() / 2) -
((mTextLayout.getHeight() / 2)));
mTextLayout.draw(canvas);
canvas.restore();
return bmp;
}
In the end you should get your desired image like this :
Bitmap bmp = Bitmap.createBitmap(100,100,Bitmap.Config.ARGB_8888); //change the values whatever you like
ImageView imageView = postViewHolder.fourthCommenter;
imageview.setImageBitmap(drawText("+10",getCircledBmp(this,bmp),30));
Hello thanks in advance, here i want to make imageview hexagon or pentagon i refer this tutorial but i am not able to modify points. So is that any change required for rotate hexagon 90 degree or any other way. I used following code for hexagon but this code gives me hexagon but i want same output with 90 degree rotation.
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);
Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
Point point1_draw = new Point(75, 0);
Point point2_draw = new Point(0, 50);
Point point3_draw = new Point(0, 100);
Point point4_draw = new Point(75, 150);
Point point5_draw = new Point(150, 100);
Point point6_draw = new Point(150, 50);
Path path = new Path();
path.moveTo(point1_draw.x, point1_draw.y);
path.lineTo(point2_draw.x, point2_draw.y);
path.lineTo(point3_draw.x, point3_draw.y);
path.lineTo(point4_draw.x, point4_draw.y);
path.lineTo(point5_draw.x, point5_draw.y);
path.lineTo(point6_draw.x, point6_draw.y);
path.close();
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawPath(path, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, rect, paint);
return output;
}
You can rotate the canvas with 90 degrees before drawing, and restore it after drawing.
canvas.save(Canvas.MATRIX_SAVE_FLAG);
canvas.rotate(90);//or -90
//Do drawing here
//canvas.drawPath(...)
canvas.restore();
Use this library :- https://github.com/MostafaGazar/CustomShapeImageView
Hope this helps you. :)
canvas.save();
canvas.rotate(90, 90, 90);
//draw canvas
canvas.drawPath(path, paint);
canvas.restore();
Im trying to draw a string on top of an Image,The code works but the transparency is not obtained i have used several values for alpha,but does not work.
paint.setAlpha(alpha);
Can some one tell me what are the range of values for transparency or what im doing wrong here
public static Bitmap drawtext(Bitmap src, String txt,int alpha) {
int w = src.getWidth();
int h = src.getHeight();
Bitmap result = Bitmap.createBitmap(w, h, src.getConfig());
Canvas canvas = new Canvas(result);
canvas.drawBitmap(src, 0, 0, null);
Paint paint = new Paint();
paint.setAlpha(alpha);
paint.setColor(Color.RED);
paint.setTextSize(18);
paint.setAntiAlias(true);
paint.setUnderlineText(true);
canvas.drawText(txt, 20, 25, paint);
return result;
}
See:
http://developer.android.com/reference/android/graphics/Paint.html#setColor(int)
The setColor will overwrite the alpha value you just set before that call. That should work:
paint.setColor(Color.RED);
paint.setAlpha(alpha);
Try this code or download demo here
public Bitmap drawText(String text, int textWidth, int color) {
// Get text dimensions
TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.LINEAR_TEXT_FLAG);
textPaint.setStyle(Paint.Style.FILL);
textPaint.setColor(Color.parseColor("#ff00ff"));
textPaint.setTextSize(30);
StaticLayout mTextLayout = new StaticLayout(text, textPaint, textWidth, Layout.Alignment.ALIGN_CENTER, 1.0f, 0.0f, false);
// Create bitmap and canvas to draw to
Bitmap b = Bitmap.createBitmap(textWidth, mTextLayout.getHeight(), Bitmap.Config.ARGB_4444);
Canvas c = new Canvas(b);
// Draw background
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.LINEAR_TEXT_FLAG);
paint.setStyle(Paint.Style.FILL);
paint.setColor(color);
c.drawPaint(paint);
// Draw text
c.save();
c.translate(0, 0);
mTextLayout.draw(c);
c.restore();
return b;
}
set the returned image to imageview
//background transparent
int colorT=Color.TRANSPARENT;
Bitmap img1=drawText(text,width,colorT);
img2.setImageBitmap(img1);
I used the below to make a bitmap with rounded corners. Now I want to draw a line around the bitmap.
private BitmapDrawable roundCornered(BitmapDrawable scaledBitmap, int i) {
Bitmap bitmap = scaledBitmap.getBitmap();
result = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(),
Bitmap.Config.ARGB_8888);
canvas = new Canvas(result);
color = 0xff424242;
paint = new Paint();
rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
rectF = new RectF(rect);
roundPx = i;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.BLUE);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
BitmapDrawable finalresult = new BitmapDrawable(result);
return finalresult;
}
I got the image below, but my actual need is that I must draw a border around the image.
I put the following together for myself.
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int color, int cornerDips, int borderDips, Context context) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int borderSizePx = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (float) borderDips,
context.getResources().getDisplayMetrics());
final int cornerSizePx = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (float) cornerDips,
context.getResources().getDisplayMetrics());
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
// prepare canvas for transfer
paint.setAntiAlias(true);
paint.setColor(0xFFFFFFFF);
paint.setStyle(Paint.Style.FILL);
canvas.drawARGB(0, 0, 0, 0);
canvas.drawRoundRect(rectF, cornerSizePx, cornerSizePx, paint);
// draw bitmap
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
// draw border
paint.setColor(color);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth((float) borderSizePx);
canvas.drawRoundRect(rectF, cornerSizePx, cornerSizePx, paint);
return output;
}
Credits, of course, to http://ruibm.com/?p=184
How about to prepare 9-patch image like below and set it as a background by using android:background
I use BitmapShader and drawRoundRect do it and it work for me, look at the screenshot
RectF roundRect; // the Rect you have to draw into
Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
// draw the border at bottom
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mBorderColor);
canvas.drawRoundRect(roundRect, mRadius, mRadius, mPaint);
// ------------------ draw scheme bitmap
roundRect.set(itemRect.left + mBorderSize, itemRect.top + mBorderSize, itemRect.right - mBorderSize, itemRect.bottom - mBorderSize);
Shader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mPaint.setShader(shader);
canvas.drawRoundRect(roundRect, mRadius, mRadius, mPaint);
mPaint.setShader(null);
I did many search to implement that effect by code, before I found another way but it's not perfect enough, you can see the jaggy on each corner, I set Paint.setAntiAlias(true), Paint.setDither(true), Paint.setFilterBitmap(true), but It doesn't work, so I hope somebody can help me.
RectF roundRect = new RectF(itemRect);
Bitmap bitmap = scheme.getSchemeBitmap(getResources());
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(mSchemeSelectedColor);
canvas.drawRoundRect(roundRect, mSchemeCornerRadius, mSchemeCornerRadius, mPaint);
roundRect.set(itemRect.left + mBorderSize, itemRect.top + mBorderSize, itemRect.right - mBorderSize, itemRect.bottom - mBorderSize);
Path clipPath = new Path();
clipPath.addRoundRect(roundRect, mSchemeCornerRadius, mSchemeCornerRadius, Path.Direction.CW);
canvas.save(Canvas.CLIP_SAVE_FLAG);
canvas.clipPath(clipPath);
canvas.drawBitmap(bitmap, null, roundRect, mPaint);
canvas.restore();
Unfortunately there's no nice and neat "border" parameter in Android, but the simplest way to do it is to encase that within another layout, set the background of the parent layout to your border color/drawable and then set a padding on it. The padding will appear around your BitmapDrawable.
my way:
public static Bitmap getRoundedCornerBitmap1(Bitmap bitmap, int color, int cornerDips, int borderDips) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth()+2*borderDips,
bitmap.getHeight()+2*borderDips,
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
canvas.drawColor(Color.TRANSPARENT);
final RectF rectF = new RectF(0, 0, output.getWidth(), output.getHeight());
final Paint paint = new Paint();
// prepare canvas for transfer
paint.setAntiAlias(true);
paint.setStrokeWidth((float) borderDips);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
canvas.drawRoundRect(rectF, borderDips, borderDips, paint);
canvas.drawBitmap(bitmap, borderDips, borderDips, null);
bitmap.recycle();
return output;
}
Result
I need to create a custom view amd in onDraw method I need to draw some bitmaps, using a mask. I created a paint:
Paint maskPaint = new Paint();
maskPaint.setAntiAlias(true);
maskPaint.setXfermode(new AvoidXfermode(Color.RED, 0, AvoidXfermode.Mode.TARGET));
and I draw my bitmap on canvas using this paint. My problem is that at the corners, my mask have some pixels with alpha less than 255. Is there a way to draw my bitmap's pixels on the mask with the same alpha that mask image has on those pixels with aplha greater than zero?
private Bitmap maskingImage(Bitmap s, int drawable) {
Bitmap original = s;
Bitmap mask = BitmapFactory.decodeResource(getResources(),drawable);
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(original, 0, 0, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
return result;
}
Resources resources = this.getResources();
Bitmap mask = BitmapFactory.decodeResource(resources,R.drawable.fx_lightleak2_small);
int width=bMap.getWidth();
int height=bMap.getHeight();
Bitmap resizedbitmap=Bitmap.createScaledBitmap(mask, width, height, true);
Bitmap result = Bitmap.createBitmap(bMap.getWidth(), bMap.getHeight(), Config.ARGB_8888);
Canvas c = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(Mode.LIGHTEN));
c.drawBitmap(bMap, 0, 0, null);
paint.setAlpha(200);
c.drawBitmap(resizedbitmap, 0, 0, paint);
paint.setXfermode(null);
effect_5.setImageBitmap(result);