3

I am trying to use the support lib v4's RoundedBitmapDrawable in order to display Rounded bitmaps loaded asynchronously in ImageViews, either circled or rounded rectangles.
However, it looks like RoundedBitmapDrawable does not mesh very well with LayerDrawable :
If I try something like :

if (previousDrawable != null) {
                final Drawable[] layers = new Drawable[2];
                layers[0] = previousDrawable;                                
                layers[1] = roundedDrawable;
                TransitionDrawable drawable = new TransitionDrawable(layers);
                view.setImageDrawable(drawable);
                drawable.startTransition(3000);
            } else {
                view.setImageDrawable(roundedDrawable);
            } 

The TransitionDrawable launches but it does not respect the RoundedBitmapDrawable is not correctly displayed : its dimensions seems to shift somehow, if I set it to be a circle with :

  RoundedBitmapDrawable roundedDrawable = RoundedBitmapDrawableFactory
                    .create(getResources(), bitmap);
            roundedDrawable.setCornerRadius(bitmap.getHeight() / 2);
            roundedDrawable.setAntiAlias(true);

It is displayed correctly if I use ImageView.setImageDrawable(), but it results in a rounded rectangle if a TransitionDrawable displays it.

Does anybody has any idea why this display problem happen ?

Teovald
  • 4,369
  • 4
  • 26
  • 45

4 Answers4

0

Set

roundedDrawable.setCircular(true);

then it works fine

Chilja
  • 1
-1

Use Universal Image loader to fix your issue

https://github.com/nostra13/Android-Universal-Image-Loader

-1

This is my solution to create a rounded image:

package com.campusapp;

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;

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

    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();



    }



    public void setBorderWidth(int borderWidth) 
{

        this.borderWidth = borderWidth;
        this.requestLayout();
        this.invalidate();

    }

    public void setBorderColor(int borderColor)


 {
        if (paintBorder != null)
            paintBorder.setColor(borderColor);
        this.invalidate();


    }

    public void addShadow() 


{
        setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
        paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);


    }

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



{
            // We were told how big to be
            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

 {
            // Measure the text (beware: ascent is a negative number)
            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;

    }


}

After creating the class, replace your ImageView with the code below:

<com.yourpkg.CircularImageView
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:src="@drawable/your_image"
    app:border_color="#EEEEEE"
    app:border_width="4dp"
    app:shadow="true" />
David
  • 3,392
  • 3
  • 36
  • 47
parik dhakan
  • 787
  • 4
  • 19
  • Sure you can add the code! Click on "edit" beneath your answer and insert the code by clicking on the `{}` button. – David Mar 24 '15 at 08:01
  • Thank you! In order to further improve your answer you might also want to explain what your code does. And in general it's better not to paste a whole file but rather include a minimal working example. – David Mar 24 '15 at 10:42
-3
public static Bitmap getRoundedCornerBitmap(Context context, Bitmap input, int pixels , int w , int h , boolean squareTL, boolean squareTR, boolean squareBL, boolean squareBR  ) { 

    Bitmap output = Bitmap.createBitmap(w, h, Config.ARGB_8888);
    Canvas canvas = new Canvas(output);
    final float densityMultiplier = context.getResources().getDisplayMetrics().density;

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, w, h);
    final RectF rectF = new RectF(rect);

    //make sure that our rounded corner is scaled appropriately
    final float roundPx = pixels*densityMultiplier;

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);


    //draw rectangles over the corners we want to be square
    if (squareTL ){
        canvas.drawRect(0, 0, w/2, h/2, paint);
    }
    if (squareTR ){
        canvas.drawRect(w/2, 0, w, h/2, paint);
    }
    if (squareBL ){
        canvas.drawRect(0, h/2, w/2, h, paint);
    }
    if (squareBR ){
        canvas.drawRect(w/2, h/2, w, h, paint);
    }

    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(input, 0,0, paint);

    return output;

}

or you can see this also

Community
  • 1
  • 1
Vaishali Sutariya
  • 5,093
  • 30
  • 32