Image not rounded properly - java

I want to display round image. I have a square image and I round it using below code.
public static void roundImageForImageView(ImageView imageView) {
try {
Bitmap bitmap = ((BitmapDrawable)imageView.getDrawable()).getBitmap();
int diameter = Math.min(bitmap.getWidth(), bitmap.getHeight());
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();
int rectX = (bitmap.getWidth() - diameter) / 2;
int rectY = (bitmap.getHeight() - diameter) / 2;
final Rect rect = new Rect(rectX, rectY, rectX + diameter, rectY
+ diameter);
final RectF rectF = new RectF(rect);
final float roundPx = diameter;
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);
imageView.setImageBitmap(output);
bitmap = null;
output = null;
} catch(OutOfMemoryError e) {
e.printStackTrace();
}
}
ImageView layout :
<ImageView
android:id="#+id/image_id"
android:background = "#drawable/placeholder"
android:scaleType="centerCrop"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginTop="10dp"
android:contentDescription="#string/profile_picture_description" />
But displayed image has small tiny cuts on middle of all edges. I tried playing with image size.
Any idea of why these cuts are there or how to solve it?
**Update : ** Using android:scaleType="center" for ImageView gives below result.

You're using
android:scaleType="centerCrop"
This is cropping the image and making the lines at the top bottom left and right.
try using
android:scaleType="centerInside"
Also, take a look here at ImageView.ScaleTypes for some good info on the different scale types:

It was a mistake in layout file.
android:background = "#drawable/placeholder"
Above line was causing the blurry edged circle to appear. #drawable/placeholder is an image and that itself is blurry.
I had set it as background, instead of src.
android:src = "#drawable/placeholder"

Related

Android: Cropping an Image from the Bottom Up

I have an image, and I am trying to overlay a cropped version of the image over the original. Something like this:
Original
Overlay Image
Image after the overlay image is cropped to roughly 50%
Right now, my code below reverses what I want, and returns an image like this:
public void setOverlay(ImageView image, Bitmap originalBitmap, double percentageCompleted) {
int percentHeight;
int height = originalBitmap.getHeight();
Bitmap cropped;
if(percentageCompleted == 0){
cropped = Bitmap.createBitmap(overlay, 0, 0, overlay.getWidth() , 0 );
} else {
percentHeight = (int) Math.floor(height * (percentageCompleted));
Log.d("HEIGHT", Double.toString(height));
Log.d("PERCENT Completed", Double.toString(percentageCompleted));
Log.d("PERCENT HEIGHT", Integer.toString(percentHeight));
cropped = Bitmap.createBitmap(overlay, 0, 0, overlay.getWidth() , height-percentHeight);
}
originalBitmap = overlay(originalBitmap, cropped);
//set imageview to new bitmap
image.setImageBitmap(originalBitmap );
}
public Bitmap overlay(Bitmap bmp1, Bitmap bmp2) {
Bitmap bmp3 = bmp1.copy(Bitmap.Config.ARGB_8888,true);//mutable copy
Canvas canvas = new Canvas(bmp3 );
canvas.drawBitmap(bmp2, new Matrix(), null);
return bmp3;
}
I know I could reverse the image files, but I want to start with the original image and have the overlay draw upwards, rather than starting with the overlay, and drawing the original downwards. Any help is appreciated!
You can use this method:
Canvas.drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)
Here is my overlay method that may meet your need:
public static Bitmap overlay(Bitmap base, Bitmap overlay, Float percentage) {
Bitmap resultBitmap = Bitmap.createBitmap(base.getWidth(), base.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(resultBitmap);
Paint paint = new Paint();
// base bitmap
canvas.drawBitmap(base, 0F, 0F, paint);
// overlay bitmap
int yOffset = (int) (percentage * base.getHeight());
Rect rect = new Rect(0, yOffset, overlay.getWidth(), overlay.getHeight());
canvas.drawBitmap(overlay, rect, rect, paint);
return resultBitmap;
}

Change color of one LinearLayout to two colors by using canvas

I'm trying to change background color of one LinearLayout to two colors for some reasons like the following pic:
I'm writing this code but the problem this LinearLayout take third different color for the two parts like this pic:
What is the problem in the logic of my code I don't know or I can not do something like that in Android?
Code:
c = (LinearLayout) findViewById(R.id.cell);
c.setBackgroundColor(getColor(container.get(0)));
c.setBackgroundColor(getColor(container.get(1)));
int width = c.getWidth(), height = c.getHeight();
if (width == 0 || height == 0) {
width = 100;
height = 100;
}
Bitmap bitmap;
try {
bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
} catch (Exception e) {
e.printStackTrace();
return;
}
Canvas canvas = new Canvas(bitmap);
Path path = new Path();
path.moveTo(0, height);
path.lineTo(0, 0);
path.lineTo(width, 0);
path.lineTo(0, height);
path.close();
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setColor(getColor(container.get(0)));
canvas.drawPath(path, paint);
path = new Path();
path.moveTo(width, 0);
path.lineTo(width, height);
path.lineTo(0, height);
path.lineTo(width, 0);
path.close();
paint = new Paint();
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setColor(getColor(container.get(1)));
canvas.drawPath(path, paint);
I solved my problem, the problem was in the way of parsing color in setColor method I replaced this one:
paint.setColor(getColor(container.get(1)));
by:
paint.setColor(ResourcesCompat.getColor(getResources(),getColor(container.get(1)), null));
and everything is ok now.

Notification LargeIcon with text and round background

I'm trying to create a bitmap to put in a notification's LargeIcon, I set the text but I can't get to set a rounded background color.
public Bitmap textAsBitmap(String text, float textSize, int textColor) {
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setTextSize(textSize);
paint.setColor(textColor);
paint.setTextAlign(Paint.Align.LEFT);
float baseline = -paint.ascent(); // ascent() is negative
int width = (int) (paint.measureText(text) + 0.5f); // round
int height = (int) (baseline + paint.descent() + 0.5f);
Bitmap image = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(image);
canvas.drawText(text, 0, baseline, paint);
return image;
}
A diffrent aproach to the same result is welcome

How to rotate only the canvas behind the text

I have this function that animate the image canvas from resource drawable with text on the front.
I want to rotate the a green "star" only so the text stay intact
The idea is to rotate only the image canvas but no the text.
How do I do that?
This code is for Android Java
private Bitmap writeTextOnDrawable(int drawableId, String text, ImageView imv_promo,boolean isAnim) {
Bitmap bm = BitmapFactory.decodeResource(ctx.getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);
Typeface tf = Typeface.createFromAsset(ctx.getAssets(), "RobotoCondensed-Italic.ttf");
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(ctx.getResources().getColor(R.color.white));
paint.setTypeface(tf);
paint.setTextAlign(Paint.Align.CENTER);
paint.setTextSize(convertToPixels(mContext, 17));
Rect textRect = new Rect();
paint.getTextBounds(text, 0, text.length(), textRect);
Canvas canvas = new Canvas(bm);
//If the text is bigger than the canvas , reduce the font size
if (textRect.width() >= (canvas.getWidth() - 4)) //the padding on either sides is considered as 4, so as to appropriately fit in the text
paint.setTextSize(convertToPixels(mContext, 7)); //Scaling needs to be used for different dpi's
//Calculate the positions
int xPos = (canvas.getWidth() / 2) - 6; //-2 is for regulating the x position offset
int yPos = (int) ((canvas.getHeight() / 2) - ((paint.descent() + paint.ascent()) / 2));
canvas.save();
canvas.rotate((float) 25, xPos, yPos);
canvas.drawText(text, xPos, yPos, paint);
canvas.restore();
Animation animation;
if(isAnim) {
animation = new RotateAnimation(0, 360, canvas.getWidth() / 2, canvas.getHeight() / 2);
animation.setRepeatMode(Animation.RESTART);
animation.setRepeatCount(Animation.INFINITE);
animation.setDuration(20000L);
imv_promo.startAnimation(animation);
}
return bm;
}

Bitmap with rounded corners & transparent bg

I'm trying to round corners of a bitmap using this code below. The problem is that no matter what I set the paint's color to, e.g. Color.TRANSPARENT , it is always black. How can I actually clip the corners of a bitmap, not just color them black?
Thanks!
public static Bitmap roundCorners(Bitmap src, int radius) {
//Create a *mutable* location, and a canvas to draw into it
int width = src.getWidth();
int height = src.getHeight();
Bitmap result = Bitmap.createBitmap(width, height, Config.ARGB_8888);
Canvas canvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
RectF rect = new RectF(0, 0, width, height);
Shader bitmapShader = new BitmapShader(src, TileMode.CLAMP, TileMode.CLAMP);
paint.setColor(0xFF000000);
paint.setShader(bitmapShader);
canvas.drawRoundRect(rect, radius, radius, paint);
return result;
}
There's an easier method that works in one pass. Just draw a rounded rect but set a BitmapShader on the Paint. This will fill the rounded rect with your bitmap. No need to change the xfermode or to call drawBitmap.

Categories

Resources