How to show image with blurred background via Glide in Android?-ThrowExceptions

Exception or error:

Goal is effectively show image in center with blurred background in ImageView via GLide.
Maximum height of image is 200dp.

Goal

Temp. solution:
I have two ImageView‘s that are overlaping (first bottom ImageView has: android:scaleType="fitXY"):

//Blurred background
<ImageView
    android:id="@+id/previewBackground"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="200dp"
    android:scaleType="fitXY"
    android:adjustViewBounds="true"/>

//Center image
<ImageView
    android:id="@+id/preview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="200dp"
    android:adjustViewBounds="true"/>

Two Glide‘s:

Create and Show blur background:

Glide.with(mCtx)
    .load(Uri.fromFile(file))
    .transition(DrawableTransitionOptions.withCrossFade())
    .placeholder(new ColorDrawable(Color.TRANSPARENT))
    .transform(new BlurTransformation(25, 3))
    .into(previewBackground);

Show center image:

Glide.with(mCtx)
    .load(Uri.fromFile(file))
    .transition(DrawableTransitionOptions.withCrossFade())
    .placeholder(new ColorDrawable(Color.TRANSPARENT))
    .into(preview);

Gradle:

implementation 'com.github.bumptech.glide:glide:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
implementation 'jp.wasabeef:glide-transformations:4.1.0' //to use BlurTransformation

Problems:
The background and center image loads in different time, because there is using of two GLides.
Probably bad effectivity.

I tried solution with one Glide and one ImageView:
.into(new CustomTarget<Drawable>() {...}, but there is problem with GLide does not know ImageView size, and placeholder and transition does not work.

next tried ImageViewTarget:

.into(new ImageViewTarget<Drawable>(preview) { //Have to be ImageViewTarget for placeholder and transition working
    @Override
      protected void setResource(@Nullable Drawable resource) {
        //preview.setScaleType(ImageView.ScaleType.FIT_XY);
        preview.setBackground(resource);
      }
})

placeholder and transition working well, but blurred background does not show, because blurred background width is the same as center image. When I use preview.setScaleType(ImageView.ScaleType.FIT_XY); center image fills all possible width. I need show image to the center with width and maxHeight 200dp and blurred background stretch to maximum width and maxHeight 200dp.

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *