Set Background Image to Relative Layout using Glide in Android

Question

How can I do this using Glide? I want to cache image to use it another time also. Thanks in advance.

Answer 1

Thanks all. All of your answers helped me out. I also find useful solutions with Glide's official documentation. I have switched over to Glide App Module in order to have common usage of it.

https://medium.com/@nuhkocaa/manage-all-your-glides-in-a-single-class-with-glidemodule-on-android-4856ee4983a1

Answer 2

Currently, at version Glide version 4.9.0, you can set a background for Relative Layout as:-

Glide.with(MainActivity.this)
                    .load(IMAGE_URL)
                    .into(new CustomTarget<Drawable>() {
                        @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
                        @Override
                        public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
                            mLinearLayout.setBackground(resource);
                        }

                        @Override
                        public void onLoadCleared(@Nullable Drawable placeholder) {

                        }
                    });

Answer 3

You can load an image in a RelativeLayout like this. I'm just showing you the hard part which is setting an image to the background.

For Glide version before 4.X

Glide.with(this).load(imageViewPath).asBitmap().into(new SimpleTarget<Bitmap>(relLayoutWidth, relLayoutHeight) {
    @Override
    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
        Drawable drawable = new BitmapDrawable(context.getResources(), resource);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            yourRelativeLayout.setBackground(drawable);
        }
    }
});

For caching, refer to this page: Caching and Cache Invalidation.

Update for Glide v4 onward:

GlideApp.with(this).load(R.drawable.backgroundimage).into(new SimpleTarget<Drawable>() {
            @Override
            public void onResourceReady(Drawable resource, Transition<? super Drawable> transition) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    yourRelativeLayout.setBackground(resource);
                }
            }
        });

Answer 4

Glide.with(ctx).asBitmap().load(url).centerCrop().into(object: CustomTarget<Bitmap>(){
            override fun onLoadCleared(placeholder: Drawable?) {
            }

            override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
                val wRatio = view.width/resource.width.toFloat()
                val hRatio = view.height / resource.height.toFloat()

                val minRatio = min(wRatio,hRatio)

                val destBitmap = Bitmap.createScaledBitmap( resource,(resource.width*minRatio).toInt(), (resource.height*minRatio).toInt(),false)
               view.background = BitmapDrawable(resources,destBitmap)
            }
        })

This works for me

PS: There would be an error when the bitmap is too large

java.lang.RuntimeException: Canvas: trying to draw too large bitmap.

So you'd better scale that bitmap like what i did in above code

Answer 5

Here's the code for Kotlin

• Glide 4.9.x
• Since the SimpleTarget is deprecated now we have to use CustomTarget as below

Glide.with(this).load(UCrop.getOutput(data)).into(object : 
                        CustomTarget<Drawable>() {
                        override fun onLoadCleared(placeholder: Drawable?) {
                            TODO("Not yet implemented")
                        }

                        override fun onResourceReady(
                            resource: Drawable,
                            transition: Transition<in Drawable>?
                        ) {
                            ib_pet_profile_image.background=resource
                        }

                    })

Answer 6

I think the best way to achieve it's works with your own ViewTarget implementation, because this class has specific methods to be handled by Glide automatically in different scenarios.

The abstract implementation for ViewGroup (LinearLayout, RelativeLayout and so on).

public abstract class ViewGroupTarget<Z> extends ViewTarget<ViewGroup, Z> implements GlideAnimation.ViewAdapter {

    public ViewGroupTarget(ViewGroup view) {
        super(view);
    }

    /**
     * Returns the current {@link android.graphics.drawable.Drawable} being displayed in the view using
     * {@link android.widget.ImageView#getDrawable()}.
     */
    @Override
    public Drawable getCurrentDrawable() {
        return view.getBackground();
    }

    /**
     * Sets the given {@link android.graphics.drawable.Drawable} on the view using
     * {@link android.widget.ImageView#setImageDrawable(android.graphics.drawable.Drawable)}.
     *
     * @param drawable {@inheritDoc}
     */
    @Override
    public void setDrawable(Drawable drawable) {
        view.setBackground(drawable);
    }

    /**
     * Sets the given {@link android.graphics.drawable.Drawable} on the view using
     * {@link android.widget.ImageView#setImageDrawable(android.graphics.drawable.Drawable)}.
     *
     * @param placeholder {@inheritDoc}
     */
    @Override
    public void onLoadStarted(Drawable placeholder) {
        view.setBackground(placeholder);
    }

    /**
     * Sets the given {@link android.graphics.drawable.Drawable} on the view using
     * {@link android.widget.ImageView#setImageDrawable(android.graphics.drawable.Drawable)}.
     *
     * @param errorDrawable {@inheritDoc}
     */
    @Override
    public void onLoadFailed(Exception e, Drawable errorDrawable) {
        view.setBackground(errorDrawable);
    }

    /**
     * Sets the given {@link android.graphics.drawable.Drawable} on the view using
     * {@link android.widget.ImageView#setImageDrawable(android.graphics.drawable.Drawable)}.
     *
     * @param placeholder {@inheritDoc}
     */
    @Override
    public void onLoadCleared(Drawable placeholder) {
        view.setBackground(placeholder);
    }

    @Override
    public void onResourceReady(Z resource, GlideAnimation<? super Z> glideAnimation) {

        this.setResource(resource);
    }

    protected abstract void setResource(Z resource);

}

The specific implementation, in this case for LinearLayout.

public class LinearLayoutTarget extends ViewGroupTarget<Bitmap> {

    private Context context;

    public LinearLayoutTarget(Context context, LinearLayout linearLayout) {

        super(linearLayout);

        this.context = context;
    }

    /**
     * Sets the {@link android.graphics.Bitmap} on the view using
     * {@link android.widget.ImageView#setImageBitmap(android.graphics.Bitmap)}.
     *
     * @param resource The bitmap to display.
     */
    @Override
    protected void setResource(Bitmap resource) {

        view.setBackground(new BitmapDrawable(context.getResources(), resource));
    }

}

To work with.

Glide.with(this.getApplicationContext())
                .load(R.drawable.your_image)
                .asBitmap()
                .into(new LinearLayoutTarget(this.getApplicationContext(), (LinearLayout) yourLinearLayoutInstanceHere));

Or even more simple working without Bitmap.

The specific implementation.

public class LinearLayoutTarget extends ViewGroupTarget<Drawable> {

    public LinearLayoutTarget(LinearLayout linearLayout) {

        super(linearLayout);
    }

    /**
     * Sets the {@link android.graphics.Bitmap} on the view using
     * {@link android.widget.ImageView#setImageBitmap(android.graphics.Bitmap)}.
     *
     * @param resource The bitmap to display.
     */
    @Override
    protected void setResource(Drawable resource) {

        view.setBackground(resource);
    }

}

To work with.

Glide.with(this.getApplicationContext())
                .load(R.drawable.your_image)
                .into(new LinearLayoutTarget((LinearLayout) yourLinearLayoutInstanceHere));