Why background of Round imageView is dark?

Question

I have created a round imageView based on this answer. It makes image round perfectly. However, I have two problems.

Image rotated 90 degree that I have no idea why (user clicks on a button, user's gallery displays, user selects an image as his profile pic)
image has dark background that I have no idea comes from where.

The class that I'm using:

public class RoundImageView extends ImageView {

    private Path path;
    private Paint paint;
    private PorterDuffXfermode porterDuffXfermode;

    public RoundImageView(Context context) {
        super(context);
        init();
    }

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

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

    private void init() {
        setWillNotDraw(false);

        path = new Path();
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
    }

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

        canvas.drawColor(Color.TRANSPARENT);

        // Create a circular path.
        final float halfWidth = canvas.getWidth()/2;
        final float halfHeight = canvas.getHeight()/2;
        final float radius = Math.max(halfWidth, halfHeight);

        path.addCircle(halfWidth, halfHeight, radius, Path.Direction.CCW);

        paint.setXfermode(porterDuffXfermode);
        canvas.drawPath(path, paint);
    }
}

The way I'm adding it in layout:

<com.allstarxi.widget.RoundImageView
                    android:layout_width="35dp"
                    android:layout_height="35dp"
                    android:src="@drawable/ic_launcher"
                    android:id="@+id/imageView"
                    android:contentDescription="@string/general_content_description"
                    android:scaleType="center" />

This is screenshot:

enter image description here

Hesam , I get your code and put mTopCard.setLayerType(LAYER_TYPE_HARDWARE, null); inside init() method and works for me, I also have hardware acceleration flag "true" on manifest — Marabita, Sep 14 '14 at 19:41

score 0 · Answer 1 · answered Jun 05 '14 at 08:10

try putting this in the RoundImageView class :

    public Bitmap getCroppedBitmap(Bitmap bitmap) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
            bitmap.getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

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

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    // canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
    canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2,
            bitmap.getWidth() / 2, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);
    //Bitmap _bmp = Bitmap.createScaledBitmap(output, 60, 60, false);
    //return _bmp;
    return output;
}

Then put this in onDraw:

getCroppedBitmap(BitmapFactory.decodeResource(getResources(), getDrawable()));

Thanks, Just one thing. BitmapFactory.decodeResource() is looking getResources as first parameter which is correct and 'int' as second parameter which is drawable. Should I pass something else instead of getDrawable()? — Hesam, Jun 05 '14 at 08:23
If the image is always the same, then try R.drawable.image_id. Otherwise, try making the image into a Bitmap another way and pass it into getCroppedImage — micnubinub, Jun 05 '14 at 08:29
I used this way http://stackoverflow.com/a/8306683/513413 (to get bitmap of image). Image displays but it is in square shape rather than Circle. I'm trying to find what is the problem. Your code seems okay! — Hesam, Jun 05 '14 at 08:43

score 0 · Accepted Answer · answered Jun 05 '14 at 12:17

Since, I couldn't find how to fix this issue, I used RoundedImageView library. It is good when you fix width and height of imageView. This is my sample:

<com.makeramen.RoundedImageView
                    xmlns:app="http://schemas.android.com/apk/res-auto"
                    android:layout_width="36dp"
                    android:layout_height="36dp"
                    android:src="@drawable/ic_launcher"
                    android:id="@+id/ivUserPic"
                    android:contentDescription="@string/general_content_description"
                    android:scaleType="centerCrop"
                    app:mutate_background="true"
                    app:border_width="0dp"
                    app:corner_radius="18dp"
                    app:oval="true"/>

score 0 · Answer 3 · answered Mar 05 '17 at 04:09

0

I have same experienced before because I loaded something from database in UI Thread, Are you load something from database/disk in UI Thread? if yes you need to load it using AsynTask, if not it will effecting your UI Rendering process

answered Mar 05 '17 at 04:09

jefry jacky

799
7
11

score -1 · Answer 4 · answered Jun 05 '14 at 12:23

-1

It is all about this: android:scaleType="center"

Try another scaleTypes from here and see the result:

CENTER, CENTER_CROP, CENTER_INSIDE , FIT_CENTER , FIT_END , FIT_START, FIT_XY, MATRIX

answered Jun 05 '14 at 12:23

Umit Kaya

5,771
3
38
52

Why background of Round imageView is dark?

4 Answers4