Glide: Feature Request: Round placeholder images

Created on 17 May 2016  路  5Comments  路  Source: bumptech/glide

Glide Version: 4.0.0-SNAPSHOT

Integration libraries: N/A

Device/Android Version: N/A

Issue details / Repro steps / Use case background:

Feature request: Round placeholder images. I currently take care of this manually. Now that this is baked in now for images via circleCropTransform, can this be applied to placeholder images as well?

Glide load line / GlideModule (if any) / list Adapter code (if any):

Glide.with(context)
    .load(url)
    .apply(RequestOptions.placeholderOf(drawable))
    .apply(RequestOptions.circleCropTransform(context))
    .into(view);

Layout XML: N/A

Stack trace / LogCat: N/A

enhancement v4 wontfix

Most helpful comment

I guess below code summarizes above discussion (except the listener). Sharing this in case someone needs it:

public static void convertToCircularBitmapDrawable(final Context context, Object url, ImageView imageView, int placeHolderResourceId) {
    Bitmap placeholder = BitmapFactory.decodeResource(context.getResources(), placeHolderResourceId);
    RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(context.getResources(), placeholder);
    circularBitmapDrawable.setCircular(true);
    Glide
        .with(context)
        .load(url)
        .apply(new RequestOptions()
            .circleCrop(context)
            .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
            .centerCrop(context)
            .error(circularBitmapDrawable)
            .placeholder(circularBitmapDrawable)
        )
        .apply(RequestOptions.circleCropTransform(context))
        .listener(new RequestListener<Drawable>() {
            @Override
            public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                if (e != null)
                    L.e(e);
                return false;
            }

            @Override
            public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                return false;
            }
        })
        .into(imageView)
    ;
}

All 5 comments

Transformations cannot be applied to placeholders because they're Drawables. You can't reuse code here that was designed for Bitmaps. I think the easiest way would be to create wrapping drawable that draws circular contents. This is the status quo. @sjudd is there any way to do this while keeping the general nature of placeholders?

Yup I think creating a wrapping Drawable is really the only way to do this.

I'd be willing to look at a pull request, but it might get confusing to have two different methods to circular crop items, one for placeholders and one for resources.

Is there any particular reason why you can't just use a circular asset? Usually placeholders are loaded from resources, not dynamically generated.

I just thought it would be convenient to be part of the library, especially for consistency and avoid the need for either an additional lib or code for doing so. But given that it's a drawable I agree it doesn't make sense. I have already gone the route of doing my own circular asset.

One argument against the hard-wired round assets is that people would need to do it for many assets and also changing a single number (e.g. rectangular corner size or border) would trigger a manual regeneration of resources. Though this can be automated: in my Android Color Filters app I wrote code to reuse one of the swatches to generate the app icon on the device.

@dkpalmer a popular approach seems to be to use RoundedBitmapDrawable from support v4 it actually overtook the "write a transformation" answer in a few months. That can be easily applied to rectangular placeholders while using a transformation for the real images.

I guess below code summarizes above discussion (except the listener). Sharing this in case someone needs it:

public static void convertToCircularBitmapDrawable(final Context context, Object url, ImageView imageView, int placeHolderResourceId) {
    Bitmap placeholder = BitmapFactory.decodeResource(context.getResources(), placeHolderResourceId);
    RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(context.getResources(), placeholder);
    circularBitmapDrawable.setCircular(true);
    Glide
        .with(context)
        .load(url)
        .apply(new RequestOptions()
            .circleCrop(context)
            .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
            .centerCrop(context)
            .error(circularBitmapDrawable)
            .placeholder(circularBitmapDrawable)
        )
        .apply(RequestOptions.circleCropTransform(context))
        .listener(new RequestListener<Drawable>() {
            @Override
            public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                if (e != null)
                    L.e(e);
                return false;
            }

            @Override
            public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                return false;
            }
        })
        .into(imageView)
    ;
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

AndroidJohnsonWang picture AndroidJohnsonWang  路  3Comments

StefMa picture StefMa  路  3Comments

sergeyfitis picture sergeyfitis  路  3Comments

r4m1n picture r4m1n  路  3Comments

Ncit picture Ncit  路  3Comments