Circular Image View with a background

Question

It came weird but i am very confused in that one .I need to download user profile pic like below image . I have the outside Background as png . But i am so confused how i can achieve this one . If any knows a better and optimized solution please rectify it here. I need that the downloaded image will cover inner white part only .

Possible duplicate of [ImageView in circular through xml](http://stackoverflow.com/questions/22105775/imageview-in-circular-through-xml) — Kushan, Jul 18 '16 at 09:21
Well thx for reply .The circular Image view i know .but how can i make the right bottom arrow part — ADM, Jul 18 '16 at 09:51
take a look at this: http://javapapers.com/android/android-chat-bubble/ its not exactly the same but basic idea is the same. They use a 9-Patch image. — Kushan, Jul 18 '16 at 10:21

score 0 · Answer 1 · answered Jul 18 '16 at 09:18

share with you

public class MyCircleImageView extends ImageView {

private  Paint paint;

public MyCircleImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    paint = new Paint();
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(Color.RED);
}

@Override
protected void onDraw(Canvas canvas) {

   Drawable drawable = getDrawable();
    if (drawable != null && drawable instanceof BitmapDrawable)
    {
        BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;

        Bitmap bitmap = bitmapDrawable.getBitmap();
        canvas.saveLayer(0,0,getWidth(),getHeight(),null,0);
        int bitmapWidth = bitmap.getWidth();
        int bitmapHeight = bitmap.getHeight();
        int minR = (bitmapHeight<bitmapWidth?bitmapHeight:bitmapWidth)/2;
        canvas.drawCircle(bitmapWidth/2,bitmapHeight/2,minR,paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

 //            canvas.drawBitmap(bitmap,0,0,paint);
        Rect srcRect = new Rect(0,0,bitmapWidth,bitmapHeight);
        Rect dstRect = new Rect(bitmapWidth/2-minR,0,bitmapWidth/2+minR,bitmapHeight);

        canvas.drawBitmap(bitmap,srcRect,dstRect,paint);

        paint.setXfermode(null);

        canvas.restore();

    }else {
        super.onDraw(canvas);
    }
}
}

score 0 · Answer 2 · answered Jul 18 '16 at 10:37

Here, You need two things circleimageview + background(blue image).

If you want best result for all devices then set-background with blue image and according to device give border_width to Cirlceimageview so you can get imageview like above.

<RelativeLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content">
   <de.hdodenhof.circleimageview.CircleImageView
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/profile_image"
       android:layout_width="wrap_content"
       android:layout_centerInParent="true"
       android:layout_height="wrap_content"
       android:src="@mipmap/profile" //user profile
       android:background="@mipmap/njvkf" //Blue image
       app:civ_border_width="4dp"
       app:civ_border_color="#31A1DA"/>
      </RelativeLayout>

Add Cirlceimageview class you can see result of above code snippet

dependencies {
        compile 'de.hdodenhof:circleimageview:2.1.0'
}

score 0 · Answer 3 · answered Jun 02 '18 at 08:24

0

You can use: app:civ_fill_color

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/v_image"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginEnd="8dp"
    app:civ_fill_color="@color/"
    android:src="@drawable/car" />

answered Jun 02 '18 at 08:24

John Nash

1
1

2

This question is 2 years old . And your answer will not work you see that triangle thing on right bottom . – ADM Jun 02 '18 at 08:25
1

Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others. – Tim Diekmann Jun 02 '18 at 08:42

Circular Image View with a background

3 Answers3