Hello Friends,
Have you searching for cropping an image and convert it into circular shape ???
Following function will helps you to convert an image into circular shape.
For providing border around your imageView :
<ImageView
Hope , this will helps anyone......
Enjoy Coding.... :)
Download Source Code
Have you searching for cropping an image and convert it into circular shape ???
Following function will helps you to convert an image into circular shape.
Note: I am passing my image in bitmap format as a parameter in a function.
/*
* Making image in circular shape
*/
public Bitmap getRoundedShape(Bitmap scaleBitmapImage) {
// TODO Auto-generated method stub
int targetWidth = 50;
int targetHeight = 50;
Bitmap targetBitmap = Bitmap.createBitmap(targetWidth,
targetHeight,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(targetBitmap);
Path path = new Path();
path.addCircle(((float) targetWidth - 1) / 2,
((float) targetHeight - 1) / 2,
(Math.min(((float) targetWidth),
((float) targetHeight)) / 2),
Path.Direction.CCW);
canvas.clipPath(path);
Bitmap sourceBitmap = scaleBitmapImage;
canvas.drawBitmap(sourceBitmap,
new Rect(0, 0, sourceBitmap.getWidth(),
sourceBitmap.getHeight()),
new Rect(0, 0, targetWidth,
targetHeight), null);
return targetBitmap;
}
For providing border around your imageView :
<ImageView
android:id="@+id/imgView"
android:layout_width="wrap_ content"
android:layout_height="wrap_ content"
android:layout_above="@+id/ btnEdit"
android:layout_ centerHorizontal="true"
android:layout_marginTop=" 40dp"
android:background="@drawable/ rounded"
android:adjustViewBounds=" true"
android:gravity="center"
android:src="@drawable/happy"/ >
Add this xml inside your drawable folder :
=>rounded.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas. android.com/apk/res/android" >
<solid android:color="@android:color/ white" />
<stroke
android:width="3dip"
android:color="#FF0000" />
<corners android:radius="10dp" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
Hope , this will helps anyone......
Enjoy Coding.... :)
Download Source Code
thanks for code.. image is displayed in circular shape but precision is not so clear...
ReplyDeleteI Agreed that image is not clear .Sorry, I just forgot to update my answer.
ReplyDeleteTry to use antialiasing and filterbitamp in your code. Try this code....an d let me know its work or not....
Bitmap targetBitmap = Bitmap.createBitmap(targetWidth, targetHeight,
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(targetBitmap);
Path path = new Path();
path.addCircle(((float) targetWidth) / 2,
((float) targetHeight) / 2,
(Math.min(((float) targetWidth), ((float) targetHeight)) / 2),
Path.Direction.CW);
Paint paint = new Paint();
paint.setColor(Color.GRAY);
//paint.setStyle(Paint.Style.STROKE);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
paint.setDither(true);
paint.setFilterBitmap(true);
canvas.drawOval(new RectF(0, 0, targetWidth, targetHeight), paint) ;
//paint.setColor(Color.TRANSPARENT);
canvas.clipPath(path);
Bitmap sourceBitmap = scaleBitmapImage;
canvas.drawBitmap(sourceBitmap, new Rect(0, 0, sourceBitmap.getWidth(),
sourceBitmap.getHeight()), new RectF(0, 0, targetWidth,
targetHeight), paint);
Hey Mukesh what a great code. Thanks a lot. Mukesh I need one more help if you can, I want to add 3dp round border with that. So could you please help me that How can I do it? I have done with your above example but need to give border as well.
ReplyDeleteThanks
Gaurav
This comment has been removed by the author.
ReplyDeleteThanks Gaurav,
ReplyDeleteYou can add the 3dp round border across your image using "drawable". I am sharing my code in which I am doing the same thing.May be its helps you.....
rounded.xml:
And in my layout(xml) where I am using the imageview to show the rounded image with 3 dp border,I just set the backround from drawable.
See the code:
Let me know its helps you or not??
hey thanks for reply :) unfortunately I can't see you code. can I have it by email?
ReplyDeletegauravdarji1100@gmail.com
Thanks,
Gaurav
Yes Sure,
ReplyDeleteCheck your email.
I have dropped an email with the code.
Hey thank you very much. :)
ReplyDeleteThanks,
Hey Mukesh Good morning. I need more help from you dear. I have implemented as per you code and it's work perfectly. But Mukesh How can I give that bitmap image height and weight in DP? I want that cropped images circular shape in "80*80 DP" ... so please could you please help me?
ReplyDeleteThanks,
Gaurav
Hey , there is two way to achieve this:
ReplyDelete1. Using xml, simply provide the layout_height and layout_width as 80*80 dp Or
2. Using java first find the id of imageview and then
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.width = 80;
params.height = 80;
imgView.setLayoutParams(params);
In this way you can do it in java.
hey dear Mukesh, I have did something else. I have implemented method to get DP to pixel value.. and it work perfectly. :) See below code:
ReplyDeletepublic static int getDPEquivalentPixels(Context context, float dp){
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
int pixels = (int) (metrics.density * dp + 0.5f);
return pixels;
}
Thanx Gaurav, for sharing your code and I like the way you did.The another and good way to do this.
ReplyDeletethanks a lot...
Do you have codes in pure java? I have a bufferedimage and I want to make it into a circle shape
ReplyDeleteHey Mukesh Thanks for your code but i cannot see the code for adding a 3 dp border around the circle (interior).Could you please update the answer so that it can be useful for others as well.
ReplyDeleteHello Friends,
ReplyDeleteNow check the code I just added the code for adding border around the image.
Hey Mukesh thanks for your quick replay.However the border visible now is a rectangular one.I needed some thing like this.If possible could you tell me how to achieve it.
ReplyDeletehttp://stackoverflow.com/questions/14050813/how-to-make-an-image-fit-into-a-circular-frame-in-android
hello, have you tried using "Oval" in xml, how its look like ?
ReplyDeleteYes Mukesh I just replaced and checked.However after setting the image i cannot see the border i have used your above method getRoundedShape() and changed the targetWidth and targetHeight to 150 dp also tried using 50dp but still only the image is visible not the border around it.
ReplyDeleteAlso using the above code gives me error
ReplyDeleteCaused by: java.lang.OutOfMemoryError
at android.graphics.Bitmap.nativeCreate(Native Method),at android.graphics.Bitmap.createBitmap(Bitmap.java:551),at android.graphics.Bitmap.createScaledBitmap(Bitmap.java:437)
Do u have any idea Mukesh why am i encountering such a issue since my app crashes because of it?
ReplyDeleteHI,
ReplyDeleteThe out Of Memory error occur because of the large bitmap size, try to scale bitmap image and then crop.
Hi mukesh can u suggest me how will i go about it or provide some code since i do not know how much to scale it
ReplyDeleteHey Bro,
ReplyDeleteGreat post I was looking for something similar for hours!!!
One problem I cant see all the code and modifications (blank... =\)
can you send the example code to -misterish86@gmail.com ?
TNX again, def going to my fav bar... =)
keep up the good work,
cheers.
Sure , I will update the blog with complete running code....
ReplyDeleteHi Mukesh Yadav,
ReplyDeleteCan u please update this post. My email id is shankarraopilli@gmail.com. if u don't mind can i get the source code.
Really i didn't get ur post.
Hello Shankar,
ReplyDeleteSure, soon I will upload the complete code.
Mukesh it would have been appreciable if you could provide some code for scaling as it has been showing vm out of memory issue to many using the above code.
ReplyDeleteHello Friends, I just uploaded the complete source code on my git repository, you can find it here:
ReplyDeletehttps://github.com/mukesh4u/
Hi,
ReplyDeleteI want to be able to zoom into the image and have the circle also increase in size, basically pinch the image, have it zoom in as well as circle.
Any idea how I could do this?
Thanks
AA
Hi Mukesh
ReplyDeleteI added the above code in my application. But its not working. Can you please figure out where I am doing wrong.
I am calling a function crop2 on clicking of a button.
code is here --
http://paste.ubuntu.com/6111641/
Hello Mukesh,
ReplyDeleteI am using your source code from git.
after it execute line
startActivityForResult(cropIntent, PIC_CROP);
in performcrop() function, its not entering onActivityResult() fuction.
I can see that it is failing at line
if (resultCode == RESULT_OK)
[ while its not failing at this line when onActivityResult() is being called by startActivityForResult(captureIntent, CAMERA_CAPTURE); line ]
Any idea why its happening.
I am using Eclipse and virtual device manager.
Hello Mukesh, it is a very nice tutorial....
ReplyDeletecan you help me out to make this kind of shape
http://fiddle.jshell.net/x4pVy/404/show/
Hey Mukesh, I have used your code and works perfectly fine. But you have fixed the height and width of target bitmap. Due to this my image is displaying small on large screen size.
ReplyDeletePlease Help...!!!!
Hey thanks for posting this.
ReplyDeletebut precision of image is not clear .and when i am using this code
Bitmap targetBitmap = Bitmap.createBitmap(targetWidth,
targetHeight,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(targetBitmap);
final Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
Bitmap sourceBitmap = scaleBitmapImage;
final Rect rect = new Rect(0, 0, sourceBitmap.getWidth(), sourceBitmap.getHeight());
//final RectF rectF = new RectF(rect);
canvas.drawCircle(((float) targetWidth - 1) / 2,
((float) targetHeight - 1) / 2,
(Math.min(((float) targetWidth),
((float) targetHeight)) / 2), paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(sourceBitmap,
rect,
rect, paint);
precision is clear but it is not crop center can you help me
hey mukesh can you help me ??
ReplyDeletei have set the image in circle and now i want to set border around the image??
So help me by providing solution
thanks Mukesh
ReplyDeleteThanks, Great tutorial!
ReplyDeletehellor sir ..i m new here.
ReplyDeletei want to perform a task for my app in which user can select image from gallery or camera and crop it and display ....can u help me in doing this task please
Hi Mukesh Yadav,
ReplyDeleteCan u please update this post. My email id is okky.agung.w@gmail.com. if u don't mind can i get the source code.
Thanks