How to load only part of image with Glide from Firebase?

Question

I have imageview, which should show only part of image (part which fits into part of screen). After user click, it will open whole image. But I can´t figure out, how to load only part of image into imageview. Problem is that Glide fits image into imageview, always.

Glide.with(context)
     .using(new FirebaseImageLoader())
     .load(storageReference)
     .into(imageView);

How it is looks now. Red part is ImageView.

How it is working now

How I wish to have it.

How I would like to have it

EDIT

Following code will fits, but it show whole image, only only part of it and it destroy proportions.

android:scaleType="fitXY"
android:adjustViewBounds="true"

You can use simpletarget to process image before updating to imageView — Mohammed Atif, Feb 20 '17 at 09:58

score 2 · Answer 1 · edited Feb 20 '17 at 10:35

2

Add scale type in your XML of ImageView. add this android:scaleType="matrix"

edited Feb 20 '17 at 10:35

sharp

1,191
14
39

answered Feb 20 '17 at 10:04

Patel Jaimin

231
1
11

I think you should add marginRight and marginBottom in minus value. – Patel Jaimin Feb 20 '17 at 10:47
android:scaleType="matrix" is solution. I had problem, that image didn´t have enought point to cover imageview on display from side to side. This can be handled by resampling image or using android:scaleY and android:scaleX. – Michalsx Feb 20 '17 at 10:55
Okay, Hope you like my solution. Add you can apply my second solution also.In that your ImageView cut from Right and Bottom and that gives you same effect that you want. – Patel Jaimin Feb 20 '17 at 11:00

score 1 · Answer 2 · answered Feb 20 '17 at 10:20

Glide.with(mContext)
                .using(new FirebaseImageLoader())
                .load(storageReference)
                .asBitmap()
                .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                .into(new SimpleTarget<Bitmap>() {
                    @Override
                    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                        Bitmap targetBitmap = Bitmap.createBitmap(resource, x, y, width, height);
                        imageView.setImageBitmap(targetBitmap);
                    }
                });

Here you can resize your bitmap from Glide according to your dimensions. But make sure your provided dimensions are always smaller than the actual bitmap.

Since you are using this code in list, Bitmap targetBitmap; should be declared globally to reuse same bitmap object throughout the list. This will reduce RAM consumption of your app.

Read links related to cropping bitmaps if you need further clarity for the code Bitmap targetBitmap = Bitmap.createBitmap(resource, x, y, width, height);

Don't forget to make targetBitmap as Global, otherwise memory impact will be too high.

score 0 · Answer 3 · answered Feb 20 '17 at 10:06

0

Just add this to your Imageview

android:adjustViewBounds="true"
    android:scaleType="fitXY"

answered Feb 20 '17 at 10:06

Aditya Vyas-Lakhan

13,409
16
61
96

This will just make the image fit to ImageView without any unwanted background. But this guy wants A part of image to be displayed. – Mohammed Atif Feb 20 '17 at 10:07
Thank you, but it doesn´t seem to be solution, as you can see in my question EDIT. – Michalsx Feb 20 '17 at 10:27
did you try other scaletypes? like matrix,centercrop etc – Aditya Vyas-Lakhan Feb 20 '17 at 10:42
I tried matrix (it is very close to required result, but it doesn´t fits image from side to side - there is space on left and right side) and I do not want to center, because I have to show top of image. FitStart is also not ok and rest of it is center. – Michalsx Feb 20 '17 at 10:46

score 0 · Answer 4 · answered Feb 20 '17 at 10:08

0

Add this into your xml

 android:scaleType="fitXY"
 android:adjustViewBounds="true"

answered Feb 20 '17 at 10:08

Rajkumar Kumawat

290
2
11

Thank you, but it doesn´t seem to be solution, as you can see in my question EDIT. – Michalsx Feb 20 '17 at 10:27
You can also use android:scaleType="centerCrop" – Rajkumar Kumawat Feb 20 '17 at 10:31

score 0 · Answer 5 · edited May 23 '17 at 12:34

Ok, thank to Mohammed Atif, Patel Jaimin and Henry, I end up with following solution.

<ImageView
 android:id="@+id/ivImage"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="matrix"/>

 Glide.with(this)
        .using(new FirebaseImageLoader())
        .load(storageReference)
        .asBitmap()
        .into(new SimpleTarget<Bitmap>() {
         @Override
         public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                    Bitmap targetBitmap = Bitmap.createBitmap(resource, 0, 0, resource.getWidth(), resource.getHeight());
                    ivImage.setImageBitmap(targetBitmap);

                    final Matrix matrix = ivImage.getImageMatrix();
                    final float imageWidth = ivImage.getDrawable().getIntrinsicWidth();
                    final float scaleRatio = ivImage.getWidth() / imageWidth;
                    matrix.postScale(scaleRatio, scaleRatio);
                    ivImage.setImageMatrix(matrix);
                }
            });

How to load only part of image with Glide from Firebase?

5 Answers5