Image getting stretched when displayed in rounded imageview

Question

Below is my RoundedImageView class that extends ImageView:

public class RoundedImageView extends ImageView {

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

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

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

@Override
protected void onDraw(Canvas canvas) {

    Drawable drawable = getDrawable();

    if (drawable == null) {
        return;
    }

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

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


    Bitmap roundBitmap =  getCroppedBitmap(bitmap, w);
   // roundBitmap= ImageUtils.setCircularInnerGlow(roundBitmap, 0xFFBAB399, 4, 1);
    canvas.drawBitmap(roundBitmap, 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("#BAB399"));
    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 my xml code is:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="horizontal" >

        <com.example.scaletypedemo.RoundedImageView
            android:layout_marginLeft="30dp"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerInParent="true"
            android:scaleType="centerCrop"
            android:src="@drawable/a"
            android:adjustViewBounds="true" />

         <ImageView
                android:layout_marginLeft="50dp"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:scaleType="centerCrop"
                android:src="@drawable/a" />

    </LinearLayout>

</RelativeLayout>

So, the problem is, if I use ImageView the image displayed is not getting stretched but if I use the same image and display it in RoundedImageView and keeping all the properties same; the image is getting stretched as shown in the below screenshot:

Please help preventing the stretching of the image displayed in RoundedImageView...........I am badly stuck at this point.

Edit: After applying Zhenghong's solution, it resolved the stretching issue but then it is not showing the complete round.

Thanks in advance!!!

Answer 1

You should resize your bitmap by its width/height rate.

----EDITED---- This will be a more flexible way to do it.

@Override
protected void onDraw(Canvas canvas) {

    Drawable drawable = getDrawable();

    if (drawable == null) {
        return;
    }

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

    int w = getWidth(), h = getHeight();
    int radius = w < h ? w : h;

    Bitmap roundBitmap = getCroppedBitmap(bitmap, radius, w, h);
    // roundBitmap= ImageUtils.setCircularInnerGlow(roundBitmap, 0xFFBAB399,
    // 4, 1);
    canvas.drawBitmap(roundBitmap, 0, 0, null);

}

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius, int w, int h) {
    Bitmap sbmp;
    if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
        float _w_rate = 1.0f * radius / bmp.getWidth();
        float _h_rate = 1.0f * radius / bmp.getHeight();
        float _rate = _w_rate < _h_rate ? _h_rate : _w_rate;
        sbmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() * _rate), (int)(bmp.getHeight() * _rate), 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("#BAB399"));
    canvas.drawCircle(w / 2, h / 2, (w < h ? w : h) / 2, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(sbmp, rect, rect, paint);

    return output;
}

Answer 2

Another alternative is to create a transparent PNG for the border (a hollowed out circle in a square) and place it as the background of a view directly above, and with the same dimensions, of the ImageView.

Something like this:

EDIT:

Seems white on white images are porblematic :) (trust me, there's an image there...) So I uplaoded 2 more: