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

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

Alll the world is a laboratory to the inquiring mind! Join Us

Comments

Rakesh said…
Awesome post!!!
Rave ez said…
Nice post!!!! Well written
George said…
Can u post more implementation of this in list view...Thanks in advance
alex sanchez said…
Well written !! More useful if source is also provided!!your blog has been more informative .. Thanks!!
suraj said…
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
Anonymous said…
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.
.

Popular posts from this blog

The Guide to DeepLearning with Tensorflow and Keras - The Beginning

Data visualization in python matplotlib with example

A Deep Intro to Machine Learning(Python) - A Beginners Guide