Lots of our reader send me email asking for how to crop image as in google plus app and facebook messanger profile image in circle.So I decided to put this tutorial live on how you can crop that imageview in circle.
There are more ways of doing it I got this using the canvas elements on the android.The android bitmap can be used to align,stretch,and lots more.The Android bitmapdrawable give a lots of flexibilty to attain image crop.
Some inspiration of what we are trying to build is somthing like this:
Above is the Image of facebook messanger .The profile image here is cropped to circle.This is what we are going to develop.
Lets start creating.
1.Create New ProjectNew->Android Application Project.
2.Create New Class file RoundprofImage.java
Right Click on package com.androidgreeve.profile.roundimage ->New->RoundprofImage.java
3.Copy the below code in roundimage.java file
package com.androidgreeve.profile.roundimage
import
android.graphics.Bitmap;
import
android.graphics.BitmapShader;
import
android.graphics.Canvas;
import
android.graphics.ColorFilter;
import
android.graphics.Paint;
import
android.graphics.PixelFormat;
import
android.graphics.Rect;
import
android.graphics.RectF;
import
android.graphics.Shader;
import
android.graphics.drawable.Drawable;
public class RoundImage extends Drawable {
private final Bitmap mBitmap;
private final Paint mPaint;
private final RectF mRectF;
private final int mBitmapWidth;
private final int mBitmapHeight;
public
RoundImage(Bitmap bitmap) {
mBitmap = bitmap;
mRectF = new RectF();
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
final BitmapShader
shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP,
Shader.TileMode.CLAMP);
mPaint.setShader(shader);
mBitmapWidth = mBitmap.getWidth();
mBitmapHeight = mBitmap.getHeight();
}
@Override
public void draw(Canvas
canvas) {
canvas.drawOval(mRectF, mPaint);
}
@Override
protected void
onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
mRectF.set(bounds);
}
@Override
public void setAlpha(int alpha) {
if (mPaint.getAlpha() !=
alpha) {
mPaint.setAlpha(alpha);
invalidateSelf();
}
}
@Override
public void
setColorFilter(ColorFilter cf) {
mPaint.setColorFilter(cf);
}
@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
@Override
public int
getIntrinsicWidth() {
return mBitmapWidth;
}
@Override
public int
getIntrinsicHeight() {
return mBitmapHeight;
}
public void setAntiAlias(boolean aa) {
mPaint.setAntiAlias(aa);
invalidateSelf();
}
@Override
public void
setFilterBitmap(boolean filter) {
mPaint.setFilterBitmap(filter);
invalidateSelf();
}
@Override
public void setDither(boolean dither) {
mPaint.setDither(dither);
invalidateSelf();
}
public Bitmap
getBitmap() {
return mBitmap;
}
}
Now you can add the image view in activity_main.xml file.copy the following code in it.
Activity_main .xml
Activity_main .xml
<?xml version="1.0"
encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:orientation="vertical" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:layout_gravity="center"
android:src="@drawable/image" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/Androidgreeve"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/Androidgreeve"/>
</LinearLayout>
import android.app.Activity;
import
android.graphics.Bitmap;
import
android.graphics.BitmapFactory;
import
android.os.Bundle;
import
android.widget.ImageView;
import
com.androidgree.profile.roundprofimage.R;
public class MainActivity extends Activity {
ImageView
imageView1;
RoundImage
roundedImage;
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView1 = (ImageView)
findViewById(R.id.imageView1);
Bitmap
bm = BitmapFactory.decodeResource(getResources(),R.drawable.image);
roundedImage = new RoundImage(bm);
imageView1.setImageDrawable(roundedImage);
}
}
Run the project .All is done now!
Hope you find easier to understand the code.Please Comment your views
Sponsor:
Do miss out to check out the offer of the month post! we already started gifting the Ebooks.
14 comments
Awesome post!!!
Nice post!!!! Well written
Can u post more implementation of this in list view...Thanks in advance
Well written !! More useful if source is also provided!!your blog has been more informative .. Thanks!!
awesome post !!! Thanks for writing and posting this
Thanks u liked it @Rakesh
Thanks @Rave ez keep commenting
Will soon post an implementation for this @George .Thanks for suggestion
Yeah I will look into that problem the source will reach all my subscribers soon @alex
U are welcome @Suraj
nice
facebook messenger free download
very interesting post........
androidtraininginchennai
Can you please tell how to get the white border around the round image?\
Thanks!
Thank you for the information, I think this article is very useful for all who read it.
.