Load image from file in correct aspect ratio using Fresco

1.1k views Asked by At

I have to load an image into SimpleDraweeView from either a URL or a filename/Uri.

This is my xml layout:

<com.facebook.drawee.view.SimpleDraweeView
                    android:id="@+id/image"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    fresco:actualImageScaleType="centerCrop"
                    fresco:placeholderImage="@color/wait_color"
                    fresco:placeholderImageScaleType="centerCrop"
                    fresco:roundTopLeft="true"
                    fresco:roundTopRight="true"
                    fresco:roundBottomLeft="false"
                    fresco:roundBottomRight="false"
                    fresco:roundedCornerRadius="3dp" />

When I load an image from URLs such as Facebook or Instagram, I get the width and height of the image and based on that, I calculate the aspect ratio and set it to the SimpleDraweeView like this:

imageUrl = intent.getExtras().getString(KEY_IMAGE_URL);

                int width = intent.getExtras().getInt(KEY_WIDTH);
                int height = intent.getExtras().getInt(KEY_HEIGHT);

                float aspectRatio = (float) width / height;

                image.setAspectRatio(aspectRatio);

                Uri uri = Uri.parse(imageUrl);
                ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
                        .setProgressiveRenderingEnabled(true)
                        .setAutoRotateEnabled(true)
                        .build();
                DraweeController controller = Fresco.newDraweeControllerBuilder()
                        .setImageRequest(request)
                        .setOldController(image.getController())
                        .build();
                image.setController(controller);

Now, I need to be able to load the image into SimpleDraweeView using filename or Uri with correct aspect ratio, how do I do that?

3

There are 3 answers

0
Alexander Oprisnik On

In general, we do not encourage people to use this approach since Drawee may show more than 1 thing and there is no real intrinsic size. Read more about the reasons why wrap_content is not supported here. This page also has a link in the last paragraph how a controller listener can be used for this. However, it might be better to consider a different approach due to all the issues outlined in the Fresco documentation. For example, a fixed size and an appropriate scale type could work better.

1
Gilbert Mendoza On

Try this:
set adjustViewBounds = true

1
Amit Tiwari On

Solved it. Just got the width and height of the image and calculated the aspect ratio.

filename = intent.getExtras().getString(KEY_FILE);
            if (!TextUtils.isEmpty(filename)) {
                BitmapFactory.Options options = new BitmapFactory.Options();
                options.inJustDecodeBounds = true;
                BitmapFactory.decodeFile(filename, options);
                int height = options.outHeight;
                int width = options.outWidth;

                f = new File(filename);
                Uri uri = Uri.fromFile(f);

                float aspectRatio = (float) width / height;

                image.setAspectRatio(aspectRatio);
                ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
                        .setProgressiveRenderingEnabled(true)
                        .setAutoRotateEnabled(true)
                        .build();
                DraweeController controller = Fresco.newDraweeControllerBuilder()
                        .setImageRequest(request)
                        .setOldController(image.getController())
                        .build();
                image.setController(controller);
            }