Android - Display Image Crop Center

Question

I want to know an Image inside a Circle Mask as follows. The user usually selected the image from the gallery or shoots one using the camera. Considering that the image is either Landscape or Portrait and not square. is there a way to display a center cropped image after choosing the image?

<com.mikhaellopez.circularimageview.CircularImageView
        android:id="@+id/ivCreateCompanyImage"
        android:layout_width="@dimen/big_logo_width_height"
        android:layout_height="@dimen/big_logo_width_height"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="@dimen/ten_dp"
        android:layout_marginTop="@dimen/thirty_dp"
        android:src="@drawable/add_image"
        android:scaleType="centerCrop"
        android:background="@drawable/logo_button_selector"
        app:border_color="@color/transparent"
        app:border_width="5"
        app:shadow="false" />

Java code

public void onActivityResult(int requestCode, int resultCode,
                                     Intent data)
        {

            if(resultCode != RESULT_OK)
                return;

            else if (requestCode == SELECT_FILE)
            {
                // this gives the Uri of the selected image
                Uri selectedImageUri = data.getData();
                try {

                    InputStream stream = getActivity().getContentResolver().openInputStream(selectedImageUri);
                    byte[] bytes = getBytes(stream);
                    Bitmap bitmap = BitmapFactory.decodeByteArray(bytes, 0, bytes.length);
                    int height_width = (int) getResources().getDimension(R.dimen.big_logo_width_height);
                    Bitmap scaledBitmap  = Bitmap.createScaledBitmap(bitmap,height_width,height_width,true);
                    ivCreateCompanyImage.setImageBitmap(scaledBitmap);
                }
                catch(Exception ex)
                {

                }
                //ivCreateCompanyImage.setImageURI(selectedImageUri);
            }
            else if( requestCode == CAPTURE_FROM_CAMERA)
            {
                File f = new File(Environment.getExternalStorageDirectory().toString());
                for (File temp : f.listFiles())
                {
                    if (temp.getName().equals("temp.jpg"))
                    {
                        f = temp;
                        ivCreateCompanyImage.setImageURI(Uri.fromFile(f));
                        break;
                    }
                }
            }
            super.onActivityResult(requestCode, resultCode, data);
        }

Answer 1

You can do this very simply (I've done this exact thing and its live on millions of devices right now) using Picasso and a Circular Image Transformation.

Here's a gist of the exact code I use in production.

Answer 2

This code is working for me

<com.abc.commons.helper.CircularImageView
                        android:id="@+id/capture_pic"
                        android:layout_width="100dp"
                        android:layout_height="100dp"
                        android:layout_gravity="center"
                        android:background="@drawable/payer_profile_image"
                        android:scaleType="centerCrop"
                        app:shadow="true" />

Create seperate java class name as CircularImageView.java and paste the entire below code and just give the reference of this class in your xml imgevoew tag and after that it will take care everything automatically

package com.xyz.commons.helper;
    import android.annotation.SuppressLint;
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.graphics.Bitmap;
    import android.graphics.BitmapShader;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Shader;
    import android.graphics.drawable.BitmapDrawable;
    import android.graphics.drawable.Drawable;
    import android.util.AttributeSet;
    import android.widget.ImageView;

    /**
     * This class is used to set style of image
     * means this class will help to set the image in circular form
     * @author santoshk
     *
     */

    @SuppressLint("DrawAllocation")
    public class CircularImageView extends ImageView {
        private int borderWidth;
        private int canvasSize;
        private Bitmap image;
        private Paint paint;
        private Paint paintBorder;

        public CircularImageView(final Context context) {
            this(context, null);
        }

        public CircularImageView(Context context, AttributeSet attrs) {
            this(context, attrs, R.attr.circularImageViewStyle);
        }

        @SuppressLint("Recycle")
        public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);

            // init paint
            paint = new Paint();
            paint.setAntiAlias(true);

            paintBorder = new Paint();
            paintBorder.setAntiAlias(true);

            // load the styled attributes and set their properties
            TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CircularImageView, defStyle, 0);

            if(attributes.getBoolean(R.styleable.CircularImageView_border, true)) {
                int defaultBorderSize = (int) (4 * getContext().getResources().getDisplayMetrics().density + 0.5f);
                setBorderWidth(attributes.getDimensionPixelOffset(R.styleable.CircularImageView_border_width, defaultBorderSize));
                setBorderColor(attributes.getColor(R.styleable.CircularImageView_border_color, Color.WHITE));
            }

            if(attributes.getBoolean(R.styleable.CircularImageView_shadow, false))
                addShadow();
        }

        /**
         * This method is used to set the width of border
         * @param borderWidth
         */
        public void setBorderWidth(int borderWidth) {
            this.borderWidth = borderWidth;
            this.requestLayout();
            this.invalidate();
        }

        /**
         * This method is used to set the color of border
         * @param borderColor
         */
        public void setBorderColor(int borderColor) {
            if (paintBorder != null)
                paintBorder.setColor(borderColor);
            this.invalidate();
        }

        /**
         * This method is used to set the shadow
         */
        public void addShadow() {
            setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
            paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);
        }

        @SuppressLint("DrawAllocation")
        @Override
        public void onDraw(Canvas canvas) {
            // load the bitmap
            image = drawableToBitmap(getDrawable());

            // init shader
            if (image != null) {

                canvasSize = canvas.getWidth();
                if(canvas.getHeight()<canvasSize)
                    canvasSize = canvas.getHeight();

                BitmapShader shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvasSize, canvasSize, false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
                paint.setShader(shader);

                // circleCenter is the x or y of the view's center
                // radius is the radius in pixels of the cirle to be drawn
                // paint contains the shader that will texture the shape
                int circleCenter = (canvasSize - (borderWidth * 2)) / 2;
                canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) + borderWidth - 4.0f, paintBorder);
                canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) - 4.0f, paint);
            }
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            int width = measureWidth(widthMeasureSpec);
            int height = measureHeight(heightMeasureSpec);
            setMeasuredDimension(width, height);
        }

        private int measureWidth(int measureSpec) {
            int result = 0;
            int specMode = MeasureSpec.getMode(measureSpec);
            int specSize = MeasureSpec.getSize(measureSpec);

            if (specMode == MeasureSpec.EXACTLY) {
                // The parent has determined an exact size for the child.
                result = specSize;
            } else if (specMode == MeasureSpec.AT_MOST) {
                // The child can be as large as it wants up to the specified size.
                result = specSize;
            } else {
                // The parent has not imposed any constraint on the child.
                result = canvasSize;
            }

            return result;
        }

        private int measureHeight(int measureSpecHeight) {
            int result = 0;
            int specMode = MeasureSpec.getMode(measureSpecHeight);
            int specSize = MeasureSpec.getSize(measureSpecHeight);

            if (specMode == MeasureSpec.EXACTLY) {          
                result = specSize;
            } else if (specMode == MeasureSpec.AT_MOST) {           
                result = specSize;
            } else {            
                result = canvasSize;
            }

            return (result + 2);
        }

        public Bitmap drawableToBitmap(Drawable drawable) {
            if (drawable == null) {
                return null;
            } else if (drawable instanceof BitmapDrawable) {
                return ((BitmapDrawable) drawable).getBitmap();
            }

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