How to maintain quality of the image downloaded from url to imageview and crop them to a circle?

Question

I am using the following code with the help of 'Android Universal image loader' library, but the quality of the image is very poor and I get too many skipped frames in my logcat, here is my code, please look and help how can I improve it?

private class DownloadImageTask extends AsyncTask<String, Void,
        Bitmap> {
    ImageView bmImage;

    public DownloadImageTask(ImageView bmImage) {
        this.bmImage = bmImage;
    }

    protected Bitmap doInBackground(String... urls) {
        String urldisplay = urls[0];
        //  Bitmap mIcon11 = null;
        ImageLoader imageLoader = ImageLoader.getInstance();
        Bitmap bitmap = imageLoader.loadImageSync(urldisplay);


        Bitmap circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(),
                Bitmap.Config.ARGB_8888);

        BitmapShader shader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
        Paint paint = new Paint();
        paint.setShader(shader);

        Canvas c = new Canvas(circleBitmap);
        c.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getWidth() / 2, paint);

        //img1.setImageBitmap(circleBitmap);
        //bmImage.setImageBitmap(circleBitmap);
        return circleBitmap;

    }

    protected void onPostExecute(Bitmap result) {


        bmImage.setImageBitmap(result);
    }
}

Answer 1

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;

import com.squareup.picasso.Transformation;


public class CircleTransform implements Transformation {
    @Override
    public Bitmap transform(Bitmap source) {
        int size = Math.min(source.getWidth(), source.getHeight());

        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
        if (squaredBitmap != source) {
            source.recycle();
        }

        Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());

        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        BitmapShader shader = new BitmapShader(squaredBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
        paint.setShader(shader);
        paint.setAntiAlias(true);

        float r = size/2f;
        canvas.drawCircle(r, r, r, paint);

        squaredBitmap.recycle();
        return bitmap;
    }

    @Override
    public String key() {
        return "circle";
    }
}

try like this:

Picasso.with(context).load("url").transform(new CircleTransform()).into(target);

Answer 2

Picasso and Volley are very good for images, I use Volley and I made a class that extends NetworkImageView and there I crop the image and make it round.

public class RoundedNetworkImageView extends NetworkImageView {

    private Bitmap frame;

    public RoundedNetworkImageView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    public RoundedNetworkImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // frame = BitmapFactory.decodeResource(context.getResources(), R.drawable.chat_list_profile_frame);
    }

    public RoundedNetworkImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // frame = BitmapFactory.decodeResource(context.getResources(), R.drawable.chat_list_profile_frame);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // super.onDraw(canvas);

        Drawable drawable = getDrawable();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        Bitmap b = ((BitmapDrawable) drawable).getBitmap();
        if (b != null) {
            Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

            int w = getWidth(), h = getHeight();

            Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
            canvas.drawBitmap(roundBitmap, 0, 0, null);
            // canvas.drawBitmap(frame, 0, 0, null);
        }
    }

    public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
        Bitmap sbmp;
        if (bmp.getWidth() != radius || bmp.getHeight() != radius)
            sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false);
        else
            sbmp = bmp;
        Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xffa19774;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());

        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#FFFFFF"));
        canvas.drawCircle(sbmp.getWidth() / 2 + 0.7f, sbmp.getHeight() / 2 + 0.7f, sbmp.getWidth() / 2 + 0.1f, paint);
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(sbmp, rect, rect, paint);

        return output;
    }

}

//--------- and when I am using it public // declaration

public RoundedNetworkImageView user_status_pic;

// getting the image from the url in an list adapter

viewHolder.user_status_pic.setImageUrl(image_url, imageLoader);