We are showing a notification with a large icon get from an URL. So, in order to load the image we are using Universal Image Loader with the following code:
mImageLoader.loadImage(imagePath, new SimpleImageLoadingListener() {
#Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
notificationBuilder.setLargeIcon(loadedImage);
notificationManager.notify(notification.getId(), notificationBuilder.build());
}
});
This code is working fine and the image is successfully shown. Our problem is that we want to show a circular large icon, so we need the bitmap to be circular. We have tried by setting:
final DisplayImageOptions imageOptions = new DisplayImageOptions.Builder()
.displayer(new RoundedBitmapDisplayer(1000))
.build();
But this is not working, we've tried with RoundedBitmapDrawable, but we need a bitmap and not a bitmapdrawable.
Please, how could we do in order to get a circular bitmap?
Thanks in advance.
Try this:
public static Bitmap getCircularBitmap(Bitmap bitmap) {
Bitmap output;
if (bitmap.getWidth() > bitmap.getHeight()) {
output = Bitmap.createBitmap(bitmap.getHeight(), bitmap.getHeight(), Config.ARGB_8888);
} else {
output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getWidth(), 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());
float r = 0;
if (bitmap.getWidth() > bitmap.getHeight()) {
r = bitmap.getHeight() / 2;
} else {
r = bitmap.getWidth() / 2;
}
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawCircle(r, r, r, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
Did you try setting the option .displayer(new CircleBitmapDisplayer()) ? For example:
DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()
.displayer(new CircleBitmapDisplayer())
.build();
Related
I need to change an image, from circle to normal square.
I'm a beginner a few weeks in programming,
I'm 2 days stopped in this code, does anyone know how to change?
I already tried everything, but I could not solve
I do not understand anything about canvas, I've already studied to solve this problem, but I'm still not able to
public static Bitmap getCircleBitmap(Bitmap bitmap) {
final int scaledWidth = 100;
final int scaledHeight = 100;
bitmap = Bitmap.createScaledBitmap(bitmap, scaledWidth, scaledHeight, true);
Bitmap output;
Rect srcRect, dstRect;
float r;
final int width = bitmap.getWidth();
final int height = bitmap.getHeight();
if (width > height) {
output = Bitmap.createBitmap(height, height, Bitmap.Config.ARGB_8888);
int left = (width - height) / 2;
int right = left + height;
srcRect = new Rect(left, 0, right, height);
dstRect = new Rect(0, 0, height, height);
r = height / 2;
} else {
output = Bitmap.createBitmap(width, width, Bitmap.Config.ARGB_8888);
int top = (height - width) / 2;
int bottom = top + width;
srcRect = new Rect(0, top, width, bottom);
dstRect = new Rect(0, 0, width, width);
r = width / 2;
}
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawCircle(r, r, r, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, srcRect, dstRect, paint);
bitmap.recycle();
return output;
}
public static Bitmap getBitmapFromVectorDrawable(Context context, int drawableId) {
Drawable drawable = AppCompatResources.getDrawable(context, drawableId);
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
drawable = (DrawableCompat.wrap(drawable)).mutate();
}
Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return bitmap;
}
}
If you look at your code, towards the end of method getCircleBitmap() you have the below line of code:
canvas.drawCircle(r, r, r, paint);
That's the one drawing the circle image for you using DrawCircle.
What you can do is, replace it with DrawRect. That should do that trick for you.
However, if you need to just draw a square image from a vector then you can use a standard ImageView straightaway and use the vector as image resource.
I tried To make imageview with rounded corners. But i am facing some issues. I cannot make the round corners for all 4 sides. I tried this code
Imageviewclass.class
Picasso.with(con).load(itemsArrayList.get(position).get("item_image")).transform(new Resizeimageview()).into(holder.img);
ResizeImageview.class
public class Resizeimageview 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";
}
}
Try replacing this line
canvas.drawRoundRect(new RectF(0, 0, source.getWidth(), source.getHeight()), r, r, paint);
with this
canvas.drawRoundRect(new RectF(0, 0, size, size), r, r, paint);
Try this :
Download the Universal Image Loader from the given link :
https://github.com/nostra13/Android-Universal-Image-Loader/wiki/Quick-Setup
ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
context).build();
// Initialize ImageLoader with configuration.
ImageLoader.getInstance().init(config);
DisplayImageOptions options = new DisplayImageOptions.Builder().displayer(new RoundedBitmapDisplayer(250)).cacheOnDisc().build();
ImageLoader.getInstance().displayImage(itemsArrayList.get(position).get("item_image"), holder.img, options);
This question already has answers here:
How to Make an ImageView in Circular Shape? [duplicate]
(2 answers)
Closed 8 years ago.
i am trying to convert imageview into 60px circular image but its not happening ...
the way i am trying is...
File imgFile = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES),
"MyCameraApp" + File.separator + "profile_" + userId + ".jpg");
if(imgFile.exists()){
Bitmap correctBmp=null;
ExifInterface exif;
try {
exif = new ExifInterface(imgFile.getPath());
int orientation = exif.getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_NORMAL);
int angle = 0;
if (orientation == ExifInterface.ORIENTATION_ROTATE_90) {
angle = 90;
}
else if (orientation == ExifInterface.ORIENTATION_ROTATE_180) {
angle = 180;
}
else if (orientation == ExifInterface.ORIENTATION_ROTATE_270) {
angle = 270;
}
Matrix mat = new Matrix();
mat.postRotate(90);
Bitmap bmp1 = BitmapFactory.decodeStream(new FileInputStream(imgFile), null, null);
/* correctBmp = Bitmap.createBitmap(bmp1, 0, 0, bmp1.getWidth(), bmp1.getHeight(), mat, true);*/
correctBmp = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(), bmp1.getConfig());
Canvas canvas = new Canvas(correctBmp);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(new BitmapShader(bmp1, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
canvas.drawRoundRect((new RectF(0.0f, 0.0f, bmp1.getWidth(), bmp1.getHeight())), 10, 10, paint);
profileImage.setImageBitmap(correctBmp);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
it is loading rectangle shape image so what should i do ?
Please help...
here is my code and it works for me:
public class ImageHelper {
public Bitmap getCroppedBitmap(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());
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
// canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2,
bitmap.getWidth() / 2, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
//Bitmap _bmp = Bitmap.createScaledBitmap(output, 60, 60, false);
//return _bmp;
return output;
}
}
just create a class and put this code in it, and then you can use it like this:
// create round image
public void setCircularImage() {
ImageView imv = (ImageView) findViewById(R.id.imageView1);
Bitmap bitImg = BitmapFactory.decodeResource(getResources(), R.drawable.icon_person);
ImageHelper imgHlp = new ImageHelper();
imv.setImageBitmap(imgHlp.getCroppedBitmap(bitImg));
}
For that the better option you have universal image loader.
you can easily make image rounded with create an option of image loader
options = new DisplayImageOptions.Builder()
.displayer(new RoundedBitmapDisplayer(50))
.showStubImage(R.drawable.ic_app)
.showImageForEmptyUri(R.drawable.camera)
.showImageOnFail(R.drawable.ic_error)
.cacheOnDisc()
.build();
you can take more reference here
see below link :-
Add border to getRoundedCornerBitmap android
or use Universal Loader
DisplayImageOptions options = new DisplayImageOptions.Builder()
.cacheInMemory(true)
.cacheOnDisc(true)
.displayer(new RoundedBitmapDisplayer(60))
.build();//value which you want to round
ImageLoader.getInstance().displayImage(Uri.parse(imgByURL).toString(), imgThumb, options);
how to use Canvas to draw an image inside another image;
like this, look at the picture :
to put it in a map app v2 like this
marker = gmap.addMarker(new MarkerOptions().title("test")
.position(new LatLng(0, 0))
.snippet("snipet test")
.icon(BitmapDescriptorFactory.fromBitmap(bitmap))
I already draw a picture in a rectangle like this
InputStream inputStream = connection.getInputStream();
Bitmap bitmap = BitmapFactory.decodeStream(inputStream);//Convert to bitmap
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Bitmap.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);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawOval(rectF, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
how to do this
please help me
Set a clipping path for your canvas with the shape of the frame you want:
Path frame = new Path();
frame.addCircle(centerX, centerY, radius, Direction.CW);
canvas.getClipBounds(oldClipBounds); //see below
canvas.clipPath(frame);
Everything you draw into the canvas afterwards will not be visible if it's outside of the circle.
If you need additional drawing, which should take place only outside of this frame, you can protect it later on by:
canvas.clipRect(oldClipBounds, Region.Op.REVERSE_DIFFERENCE);
I found a solution for this problem:
you put the image in a circle with canvas after that you resize the result with the exact size, and put it inside the marker image.
public class IconMarker {
public IconMarker(){}
public Bitmap DrawMarker(String userid,int typeid,Resources rcs){
// image from database: ...InputStream inputStream = connection.getInputStream();
//Bitmap bitmap = BitmapFactory.decodeStream(inputStream);
Bitmap img1=new UserInfoBd().getPhotoProfil(userid);
if(img1==null) img1=BitmapFactory.decodeResource(rcs,R.drawable.espace_photo);
Bitmap.Config conf = Bitmap.Config.ARGB_8888;
Bitmap bmp = BitmapFactory.decodeResource(rcs,
typeid);
Bitmap output = Bitmap.createBitmap(bmp.getWidth(),
bmp.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas1 = new Canvas(output);
canvas1.drawBitmap(bmp, 0,0, null);
Bitmap output1 = Bitmap.createBitmap(img1.getWidth(),
img1.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output1);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, img1.getWidth(), img1.getHeight());
final RectF rectF = new RectF(rect);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawOval(rectF, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(img1, rect, rect, paint);
Bitmap img=getResizedBitmap(output1,bmp.getHeight()*3/4-4,bmp.getWidth()*3/4);
canvas1.drawBitmap(img,(float)4.7,(float)3.5,null);
return output;
}
public Bitmap getResizedBitmap(Bitmap bm, int newHeight, int newWidth) {
int width = bm.getWidth();
int height = bm.getHeight();
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;
// CREATE A MATRIX FOR THE MANIPULATION
Matrix matrix = new Matrix();
// RESIZE THE BIT MAP
matrix.postScale(scaleWidth, scaleHeight);
// RECREATE THE NEW BITMAP
Bitmap resizedBitmap = Bitmap.createBitmap(bm, 0, 0, width, height, matrix, false);
return resizedBitmap;
}
}
I have a ListView in which there is an ImageView, the image in the ImageView gets loaded dynamically after its fetched from the server.
Now, I want these images, of any size, to fit into a circular frame, how to do that?
Here's a sample pic of what I want
With the help of previous answer I came up with this solution.Hope it help others:
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Bundle;
import android.widget.ImageView;
public class CircleImage extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.circle_layout);
ImageView img1 = (ImageView) findViewById(R.id.imageView1);
Bitmap bm = BitmapFactory.decodeResource(getResources(),
R.drawable.hair_four);
Bitmap resized = Bitmap.createScaledBitmap(bm, 100, 100, true);
Bitmap conv_bm = getRoundedRectBitmap(resized, 100);
img1.setImageBitmap(conv_bm);
// TODO Auto-generated method stub
}
public static Bitmap getRoundedRectBitmap(Bitmap bitmap, int pixels) {
Bitmap result = null;
try {
result = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(result);
int color = 0xff424242;
Paint paint = new Paint();
Rect rect = new Rect(0, 0, 200, 200);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawCircle(50, 50, 50, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
} catch (NullPointerException e) {
} catch (OutOfMemoryError o) {
}
return result;
}
}
Try this code:
public static Bitmap getRoundedRectBitmap(Bitmap bitmap, int pixels) {
try {
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 = 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);
} catch (NullPointerException e) {
// return bitmap;
} catch (OutOfMemoryError o){}
return result;
}
If you want an actual circle then you can pass 100px as parameter.
Update
There is a CircleImageView available on Github.
You can get latest version from Maven repository as add as a gradle dependency.
There are lots of tutorial regarding this. I think it will help.
https://github.com/lopspower/CircularImageView
https://github.com/wisemandesigns/CircularImageView
https://coderwall.com/p/hmzf4w
We can manage the height and width of an image from xml code and draw circle/oval from java code like
<ImageView
android:id="#+id/imageView1"
android:layout_width="#dimen/width"
android:layout_height="#dimen/height"
/>
for oval view
ImageView img1 = (ImageView) findViewById(R.id.imageView1);
Bitmap bm = BitmapFactory.decodeResource(getResources(),
R.drawable.user_image);
Bitmap conv_bm = getRoundedBitmap(bm);
img1.setImageBitmap(conv_bm);
public static Bitmap getRoundedBitmap(Bitmap bitmap)
{
final Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
final Canvas canvas = new Canvas(output);
final int color = Color.RED;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawOval(rectF, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
bitmap.recycle();
return output;
}
}
Add following dependancies
implementation 'jp.wasabeef:picasso-transformations:2.2.1'
implementation 'de.hdodenhof:circleimageview:3.0.0'
CircularImageView available for image fit in circle also if image is not looking proper .resize is for image resizing in circular image view.
CircleImageView img;
String Imageid;
Imageid="ImageName"; //String is not compulsary it may be drawable
Picasso.with(mContext)
.load(Imageid.get(position)) //Load the image
.error(R.drawable.ic_launcher_background) //Image resource for error
.resize(20, 20) // Post processing - Resizing the image
.into(img); // View where image is loaded.
public static Bitmap getCircleBitmap(Bitmap bitmap) {
final Bitmap circuleBitmap = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getWidth(), Bitmap.Config.ARGB_8888);
final Canvas canvas = new Canvas(circuleBitmap);
final int color = Color.RED;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getWidth());
final RectF rectF = new RectF(rect);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawOval(rectF, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
bitmap.recycle();
return circuleBitmap;
}