Can I use Glide to have CircleImage with overlapping icon like in Facebook messenger?

Question

I'm searching for a library that could help me make my cricular image view's like in Facebook Messenger (with z blue Messenger icon or grey Facebook icon). How they came up with it? Can it be done with Glide? If not, with what then?

Answer 1

Using CircleImageView/CircularImageView/RoundedImageView is not advised, we have many people reporting issues with them mostly because they hack the Bitmap out of the Drawable which is incompatible with the most basic feature of Glide: .crossFade(), also GIF animations may likely break with them.

The correct Glide way is to use Transformations, you can find a good enough one here: https://stackoverflow.com/a/25806229/253468

Glide 4.0 will have a built-in CircleCrop transformation.

Overlay icon

The overlay icon can be also added with a transformation:

// .transform(new CircleTransform(context)), new StatusTransform(context, user.getStatus()))
public static class StatusTransform extends BitmapTransformation {
    private final Status status;
    public StatusTransform(Context context, Status status) {
        super(context);
        this.status = status;
    }

    @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        int w = toTransform.getWidth(), h = toTransform.getHeight();
        Bitmap result = pool.get(w, h, Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        }
        Canvas canvas = new Canvas(result);
        canvas.drawBitmap(toTransform);
        switch(status) {
            case Online:
                canvas.draw*(online graphics);
                break;
            case Offline:
                canvas.draw*(offline graphics);
                break;
        }
        return result;
    }

    @Override public String getId() {
        return getClass().getName() + status;
    }
}

or simply have two ImageViews:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/user_profile_size"
    android:layout_height="@dimen/user_profile_size"
    >
    <ImageView
        android:id="@id/user_profile"
        android:layout_width="@dimen/user_profile_size"
        android:layout_height="@dimen/user_profile_size"
        />
    <ImageView
        android:id="@id/user_status"
        android:layout_width="@dimen/user_status_size"
        android:layout_height="@dimen/user_status_size"
        android:layout_gravity="bottom|end"
        />
</FrameLayout>

Both have pros and contras: Transformation results can be cached, so if you have 3 statuses Glide will store each user's profile image 3 times overlayed with a little icon, so it probably will be applied only once and then it's just a matter of decoding the cached PNG (not JPEG, because circle forces transparency). With two ImageViews you have to have two Glide load lines (or a Glide and a setImageResource), it may be a little slower to draw and layout. So you can trade processor time to disk space with the two approaches. With the ImageView approach you can also animate the transitions between status changes and have the status always show, even when the profile image is loading slowly because of bad network.

In case of the Transformation if the code of the transform method changes, you'll need to invalidate the cache, which can be achieved by:

.signature(ApplicationVersionSignature.obatain(context)) // every release
// or
.signature(new StringSignature(String.valueOf( System.currentTimeMillies() / (10 * 60 * 1000) ))) // every 10 minutes

Alternatively this invalidation can be built into the getId() method somehow.

Answer 2

1.I would suggest you to checkout Image Management Library by Facebook that is Fresco that is pretty awesome and mature as compared to other Image Loading Library.

2.Fresco has SimpleDraweeView as custom image view which supports Rounded Corners and Circles link and supports Animated(.gif, .webp) as well as Normal Images(.jpg, .png).

3.Fresco handles all the things caching of images with 3 Tier architecture ( BITMAP_MEMORY_CACHE, ENCODED_MEMORY_CACHE and DISK_CACHE). It also reduces OOM(Out Of Memory) issues. When image in a view goes out of screen it automatically recycles the bitmap, hence releasing the memory.

Answer 3

if your target is only have a CircleImage give a shot at this:

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class RoundedImageView extends ImageView
{
    public RoundedImageView(Context context)
    {
        super(context);
    }

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

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

    public RoundedImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes)
    {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    public static Bitmap getCroppedBitmap(Bitmap bmp, int radius)
    {
        Bitmap sbmp;

        if (bmp.getWidth() != radius || bmp.getHeight() != radius)
        {
            float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
            float factor = smallest / radius;
            sbmp = Bitmap.createScaledBitmap(bmp, (int) (bmp.getWidth() / factor), (int) (bmp.getHeight() / factor), false);
        }
        else
        {
            sbmp = bmp;
        }

        Bitmap output = Bitmap.createBitmap(radius, radius,
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xffa19774;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, radius, radius);

        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#BAB399"));
        canvas.drawCircle(radius / 2 + 0.7f,
                radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(sbmp, rect, rect, paint);

        return output;
    }

    @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);
        canvas.drawBitmap(roundBitmap, 0, 0, null);
    }
}

and in your layout you can use this:

<mypkg.example.RoundedImageView
    android:id="@+id/roundimg"
    android:layout_width="54dp"
    android:layout_height="54dp"
    android:layout_gravity="center"/>

and programmatically you can set a letter..

Rect textBounds = new Rect();
String text = "N"
Bitmap bitmap = Bitmap.createBitmap(imageView.getLayoutParams().width, imageView.getLayoutParams().height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawColor(Color.DKGRAY);
TextPaint p = new TextPaint();
p.setColor(Color.WHITE);
p.setTextSize(imageView.getLayoutParams().height / 2);
p.setAntiAlias(true);
p.setTextAlign(Paint.Align.LEFT);
p.getTextBounds(text, 0, text.length(), textBounds);

int cx = imageView.getLayoutParams().width / 2;
int cy = imageView.getLayoutParams().height / 2;
canvas.drawText(text, cx - textBounds.exactCenterX(), cy - textBounds.exactCenterY(), p);

imageView.setImageBitmap(bitmap);

or an image ..

// image grabbed from an input stream
Bitmap photo = BitmapFactory.decodeStream(inputStream);
imageView.setImageBitmap(photo);

is this useful? more infos and credits here How to create a circular ImageView in Android?