Image not resizing correctly on android

Question

I'm having trouble with a library I got from the GitHub. The Library leads to round an image. The rounding part works very well, but the image resizing doesn't do as great as the rest. It differs from image to image and I'd like to make this work to resize any image to the size of my View on android. For example, if I call this with android:layout_width="100dp" , I'd like to the image to be resized that much.

Thank you very much for your time.

This is the library:

package com.roundimage.support;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
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.provider.MediaStore;
import android.util.AttributeSet;
import android.widget.ImageView;

public class CircularImageView extends ImageView {

    private int borderWidth = 3;
    private int viewWidth;
    private int viewHeight;
    private Bitmap image;
    private Paint paint;
    private Paint paintBorder;
    private BitmapShader shader;

    public CircularImageView(Context context) {
        super(context);
        setup();
    }

    public CircularImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setup();
    }

    public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setup();
    }

    private void setup()
    {
        // init paint
        paint = new Paint();
        paint.setAntiAlias(true);

        paintBorder = new Paint();
        setBorderColor(Color.WHITE);
        paintBorder.setAntiAlias(true);     
    }

    public void setBorderWidth(int borderWidth)
    {
        this.borderWidth = borderWidth;
        this.invalidate();
    }

    public void setBorderColor(int borderColor)
    {       
        if(paintBorder != null)
            paintBorder.setColor(borderColor);

        this.invalidate();
    }

    private void loadBitmap()
    {
        BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();

        if(bitmapDrawable != null)
            image = bitmapDrawable.getBitmap();
    }

    @SuppressLint("DrawAllocation")
    @Override
    public void onDraw(Canvas canvas)
    {
        //load the bitmap
        loadBitmap();

        // init shader
        if(image !=null)
        {           
            shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            paint.setShader(shader);
            int circleCenter = viewWidth / 2;

            // 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
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter + borderWidth, paintBorder);
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter, paint);
        }       
    }

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

        viewWidth = width - (borderWidth *2);
        viewHeight = height - (borderWidth*2);

        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) {
                // We were told how big to be
                result = specSize;
            } else {
                // Measure the text
                result = viewWidth;

            }

        return result;
    }

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

        if (specMode == MeasureSpec.EXACTLY) {
            // We were told how big to be
            result = specSize;
        } else {
            // Measure the text (beware: ascent is a negative number)
            result = viewHeight;           
        }
        return result;
    }
}

This is how I call it on XML:

<com.roundimage.support.CircularImageView
    android:id="@+id/item_pic"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:src="@drawable/example_id" />

How this stays like:

And how the image really is:

And for different images with different sizes, for different devices with diferent resolution, the image appear in a different way..

Answer 1

Try using scaleType in the xml to be fitXY

android:ScaleType = "fitXY"

Or programmatically

imageview.setScaleType (ScaleType.FITXY)

If it doesn't work try another scaletype.

EDIT: See this post here.

Answer 2

Ok, your code should work well, But it put image in image view without resize to fit in viewer, because you had these results.

Try adding this in layout:

android:scaleType="fitCenter"

Read mode about this in this tutorial: http://www.peachpit.com/articles/article.aspx?p=1846580&seqNum=2

Answer 3

@youssefhassan link points it out correctly:

You have to resize your image bitmap to desired size:

` private void loadBitmap() { BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();

    if(bitmapDrawable != null) {
        int size = getPixelsFromDp(70);
        Bitmap imageRealSize = bitmapDrawable.getBitmap();
        image = Bitmap.createScaledBitmap(imageRealSize, size, size, true);
    }
}

` Where 'getPixelsFromDp' is a function to get dp's you added on xml in pixels (you can find load of pages to get its implementation)