Facebook Messenger like profile image crop in android

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

importandroid.graphics.Bitmap;

importandroid.graphics.BitmapShader;

importandroid.graphics.Canvas;

importandroid.graphics.ColorFilter;

importandroid.graphics.Paint;

importandroid.graphics.PixelFormat;

importandroid.graphics.Rect;

importandroid.graphics.RectF;

importandroid.graphics.Shader;

importandroid.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;

      publicRoundImage(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 voidonBoundsChange(Rect bounds) {

            super.onBoundsChange(bounds);

            mRectF.set(bounds);

      }

      @Override

      public void setAlpha(int alpha) {

            if (mPaint.getAlpha() != alpha) {

                  mPaint.setAlpha(alpha);

                  invalidateSelf();

            }

      }

      @Override

      public voidsetColorFilter(ColorFilter cf) {

            mPaint.setColorFilter(cf);

      }

      @Override

      public int getOpacity() {

            return PixelFormat.TRANSLUCENT;

      }

      @Override

      public intgetIntrinsicWidth() {

            return mBitmapWidth;

      }

      @Override

      public intgetIntrinsicHeight() {

            return mBitmapHeight;

      }

      public void setAntiAlias(boolean aa) {

            mPaint.setAntiAlias(aa);

            invalidateSelf();

      }

      @Override

      public voidsetFilterBitmap(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

<?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"/> 

</LinearLayout>

import android.app.Activity;

importandroid.graphics.Bitmap;

importandroid.graphics.BitmapFactory;

importandroid.os.Bundle;

importandroid.widget.ImageView;

importcom.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.