Fresco: adjustviewbounds functionality

[ChrisMpitzios]

what i am trying to achieve is the effect where my imageview would have a match_parent width and its height will adapt in order to preserve its aspect ratio.

this is my SimpleDraweeView

android:id="@+id/categories_root_cell"
android:background="#ff0000"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="@string/c_generic_descr_image"
fresco:actualImageScaleType="fitCenter"
fresco:placeholderImageScaleType="fitCenter"
/>

i am also setting holder.categoriesImage.setAdjustViewBounds(true); in my adapters getview,
where holder --->
static class ViewHolder {
@InjectView(R.id.categories_root_cell_image) SimpleDraweeView categoriesImage;
@InjectView(R.id.categories_root_cell_text) TextView categoryTitle;

    public ViewHolder(final View view) {

        ButterKnife.inject(this, view);
    }
}

what i get is this :

from what you have said i shouldnt have used setAdjustViewBounds as it is not supported (or it wont be supported in the future), but if i dont then the behaviour is even stranger and the image is not visible.

maybe i am missing something but i was able to achieve it before using SimpleDraweeView with this setup

   <ImageView
    android:id="@+id/categories_root_cell_image"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:contentDescription="@string/c_generic_descr_image"/>

and the result is this

what it seems to be the problem is that adjustViewBounds functionality can not be supported. what is being done is that the image loaded itself gets resized correctly but the SimpleDraweeView doesnot get resized and keeps the original image's height.

[tyronen]

wrap_content is not supported for SimpleDraweeViews, unless you call setAspectRatio in Java code.

If you want the image to keep its original aspect ratio, and at build time you know neither what that is nor the size of the parent, you can do this in your SDV:

android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"

[ChrisMpitzios]

   wrap_content is not supported for SimpleDraweeViews, unless you call setAspectRatio in Java code.

i saw it in the docs but i was just trying things.

the point is that i had to use a framelayout where weight can not be used.

this is what i do in my adapter:

 Uri imageUri= Uri.parse(RES_PATH + R.drawable.icn_initial_cat_tech);
 holder.categoriesImage.setImageURI(imageUri)

where --> private final String RES_PATH = "res:///";

this is the cell if i change it to linear in order to use weight

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               xmlns:fresco="http://schemas.android.com/apk/res-auto"
               android:orientation="vertical"
>

              <com.facebook.drawee.view.SimpleDraweeView
              android:id="@+id/categories_root_cell_image"
              android:background="#ff0000"
              android:layout_width="match_parent"
              android:layout_height="0dp"
              android:layout_weight="1"
              android:contentDescription="@string/c_generic_descr_image"
              fresco:actualImageScaleType="fitCenter"
              fresco:placeholderImageScaleType="fitCenter"
              />

             <TextView
              android:id="@+id/categories_root_cell_text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="center"
              android:background="@android:color/transparent"
              android:textColor="@color/categories_root_text"
              android:textSize="@dimen/categories_root_text_size"/>

   </LinearLayout>

in this case images do not appear at all ,

but (for some reasons i dont know) if i set
holder.categoriesImage.setAdjustViewBounds(true);
in getview then i have exactly the same result as before

what i think is that setting the weight will not change things because for some reason SimpleDraweeView takes into consideration the original image's height so using weight makes him to adapt its height to this (which is not correct)

[plamenko]

The reason why wrap_content and adjustviewBounds are not supported is explained in http://frescolib.org/docs/using-drawees-xml.html#_
If you absolutely need to achieve this functionality (even though it would not look pleasant to the users as the views will jump on screen as images start to arrive), you can do it as follows:

In XML do:

android:layout_width="match_parent"
android:layout_height="0dp"

In Java, instead of just setting the URI, you'll have to build a controller and set both URI and a controller listener, like explained here: http://frescolib.org/docs/listening-download-events.html#_
In onIntermediateImageSet and onFinalImageSet methods do this:

mSimpleDraweeView.setAspectRatio((float) imageInfo.getWidth() / imageInfo.getHeight());

[chongivan]

It's
android:layout_width="match_parent"
android:layout_height="wrap_content"

[ChrisMpitzios]

thanks a lot for the responses .
The point is (as mentioned above) that it needs android:layout_height="wrap_content" and not android:layout_height="0dp". This may happen because fresco ignores wrap_content in order to keep backwards compatibility but cannot ignore 0dp.
So in order to have this specific ui setup you need to resize the view (using setAspectRatio() ) and set height to wrap_content. But wrap_content, as fresco documents advise, should not be used and with this assumption it may be proved error prone. However it works. Thanks

[plamenko]

wrap_content should work correctly as long as the other dimension is not wrap_content too and aspect ratio other than 0 is set.
Yeah, in some cases 0dp doesn't work and wrap_content has to be used, we should amend the documentation.

[ffelini]

@plamenko Thank you for help.
This code really works (in most of the cases)

mSimpleDraweeView.setAspectRatio((float) imageInfo.getWidth() / imageInfo.getHeight());

I have one special case.
I'm laoding a very thin image that should autofil his height, but for some reason it doesn't.

imageInfo.getWidth() = 641
imageInfo.getHeight() = 37

so aspectRatio is about 17

Image is resized about 3 times bigger than should be by height.

Here is the layout

 <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/thumbnail_image_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            fresco:actualImageScaleType="fitCenter" >

I think it happens only for very thin images because others with ( ex: 640x290) are resized properly.

[Ilya-Gazman]

I found a fully working solution for that.
https://github.com/facebook/fresco/pull/1028

[amankumarjain]

I have a recycler view holder with image view type, i am using SimpleDraweView but my image height is dynamic in every holder to to manage that view, by fixing height of view cut portion of images, i want to display full image inside that holder, please help me how to achieve that.

[KevinPan]

how many guys were made crazy by wrap_content

[abdulelahragih]

Actually The best thing Frisco did is get rid of wrap content .... it makes images jump in a recyclerview/listview and it confuses the user.
My solution to this is that I get image height from my server and I set the width to matche parent and then I get screen width to find my image width as it is match parent (and getting rid of any vertical margins/padding around SimpleDraweeView in calculation)
Then programmatically, I set the calculated height when I first populate SimpleDraweeView to the recyclerview and now all SimpleDraweeView in the recyclerview are in the size of the image they will receive before even getting the image (so all SimpleDraweeView aware of the size of the images they will load) , so no jumping issue and it works well.
Just make sure to get screen width and if there are verical margins/paddings around your SimpleDraweeView or its list item, subtract them from screen width to get images actual width