Ion sets the imageView height to a wrong value

Question

I dont know why this is happening: After loading the image with the Ion library, my image shows two white bars below and above image. I don't want to have that.

bildschirmfoto 2014-10-03 um 15 42 25

My ImageView is displayed in a listview item. My adapter code looks like this:

if (node.getImageUrl() != null) {
    ivImage.setVisibility(View.VISIBLE);
    Ion.with(ivImage)
            .placeholder(R.drawable.anne_eli_icons_set_up_anne_eli_logo_530px)
            //.error(R.drawable.error_image)
            //.animateLoad(android.R.anim.cycle_interpolator)
            .animateIn(android.R.anim.fade_in)
            .load("http://app.anne-eli.at/" + node.getImageUrl().getUrlBig());


} else {
    ivImage.setVisibility(View.GONE);
}

My imageview layout like this: <LinearLayout ... <ImageView android:id="@+id/fragment_appointment_list_item_article_iv_image" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/anne_eli_icons_set_up_anne_eli_logo_530px" android:background="@color/gray1" /> </LinearLayout>

Any ideas?

score 1 · Answer 1 · answered Oct 03 '14 at 23:54

1

change your imageview layout to this one:

<LinearLayout ...
<ImageView
        android:id="@+id/fragment_appointment_list_item_article_iv_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY" <!-- this line added , also your can use other value too like cropCenter ... -->
        android:src="@drawable/anne_eli_icons_set_up_anne_eli_logo_530px"
        android:background="@color/gray1" />
</LinearLayout>

answered Oct 03 '14 at 23:54

MHP

2,613
1
16
26

I dont want to crop or fit. I just want the image to scale to 100% width and take as much height as necessary. The problem is that the imageViews dimension are not matching the image. Not the other way round. – stoefln Oct 04 '14 at 17:01

score 0 · Answer 2 · answered Oct 03 '14 at 23:18

0

I think it may be whatever value "gray1" is, but it looks very white because it's lighter than the image in the background. Remove the background attribute in the xml and it'll be invisible.

Likewise, without setting a scaleType on the ImageView, it's going to default to center. This will attempt to resize the image so it fits to the center of the ImageView without cropping. The ImageView is bound to the width of it's container. The image provided is much wider than that, so it shrinks the image to fit. This means the tops and bottoms will be shrunk as well, and the image becomes smaller than the height of the container. If you want the image to be near the top, you can try setting the scaleType to fitStart instead.

answered Oct 03 '14 at 23:18

DeeV

35,865
9
108
95

I deleted this because I wasn't sure if ion was the cause (the height is supposed to resize to fit the image). If it helps though because this is the only thing I can think of. – DeeV Oct 04 '14 at 00:17
"The image becomes smaller than the height of the container": The height is wrap_content, so I dont see any reason why there the gray background is visible on top and below. I didnt have the background in the first place, I just put it there to make the problem more visible. – stoefln Oct 04 '14 at 17:04
wrap_content only means that the view is designated to be whatever size it feels it should be. In other words, ImageView is told that it's height can be between 0 and the maximum height of it's container. Just because the backing bitmap is shorter doesn't mean the ImageView has to adjust it's height accordingly (even if we think it should). So perhaps ImageView is written to take the height of it's image pre-scaled. Then it scales the image, but doesn't adjust the height of the View itself. – DeeV Oct 05 '14 at 06:56
One thing you can try is to set adjustViewBounds dimension to true. It's intended to adjust the bounds of the ImageView to keep the aspect ratio of the backing image. – DeeV Oct 05 '14 at 07:02

Ion sets the imageView height to a wrong value

2 Answers2