Android - Imageview with multiple bitmaps

Question

I am working on a chat application, which does need to show the profile picture of each person whom I'm chatting with. If it is a group conversation I need to design a layout like FB as below

I'm thinking of implementing it using LayerDrawable but not sure how. Also the images need to be loaded from server. I'm using Glide library to load images.

Answer 1

Considered 3 layouts side by side and wrap the top layout into circular shape.

<?xml version="1.0" encoding="utf-8"?>
<nz.co.example.components.CircleLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="@dimen/messaging_profile_pic_size"
android:layout_height="@dimen/messaging_profile_pic_size"
android:orientation="horizontal"
custom:diameter="@dimen/messaging_profile_pic_size"
>
<ImageView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:id="@+id/iv_left"
    android:scaleType="centerCrop"
    />

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="vertical"
    android:paddingStart="@dimen/line_spacing"
    android:paddingEnd="0dp"
    >
    <ImageView
        android:layout_width="@dimen/messaging_profile_pic_half_size"
        android:layout_height="@dimen/messaging_profile_pic_half_size"
        android:id="@+id/iv_top_right"
        android:scaleType="centerCrop"
        />
    <ImageView
        android:layout_width="@dimen/messaging_profile_pic_half_size"
        android:layout_height="@dimen/messaging_profile_pic_half_size"
        android:id="@+id/iv_bottom_right"
        android:paddingTop="@dimen/line_spacing"
        android:scaleType="centerCrop"
        />
</LinearLayout>

</nz.co.example.components.CircleLinearLayout>

And my Circular linearlayout code goes like this

public class CircleLinearLayout extends LinearLayout {

private Bitmap maskBitmap;
private Paint paint, maskPaint;
private float radius;

public CircleLinearLayout(Context context) {
    super(context);
    init(context, null, 0);
}

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

public CircleLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs, defStyleAttr);
}

private void init(Context context, AttributeSet attrs, int defStyle) {

    paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    maskPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    if(attrs != null)
    {
        TypedArray a = context.getTheme().obtainStyledAttributes( attrs,R.styleable.CircleLinearLayout, defStyle , 0);

        try {
            radius = a.getDimension(R.styleable.CircleLinearLayout_diameter, getResources().getDimension(R.dimen.messaging_profile_pic_size)) / 2;
        } finally {
            a.recycle();
        }
    }

    setWillNotDraw(false);
}

@Override
public void draw(Canvas canvas) {
    Bitmap offscreenBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas offscreenCanvas = new Canvas(offscreenBitmap);

    super.draw(offscreenCanvas);

    if (maskBitmap == null) {
        maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
    }

    offscreenCanvas.drawBitmap(maskBitmap, 0f, 0f, maskPaint);
    canvas.drawBitmap(offscreenBitmap, 0f, 0f, paint);
}

private Bitmap createMask(int width, int height) {
    Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ALPHA_8);
    Canvas canvas = new Canvas(mask);

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.WHITE);

    canvas.drawRect(0, 0, width, height, paint);

    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

    canvas.drawCircle(radius , radius , radius , paint);

    return mask;
   }
 }

Cheers, Sree