ImageView taking too much vertical space

Question

i am working on a project with a staggered gridview that can support varying height for each nested view,

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

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:background="@android:color/holo_blue_light" />
    </LinearLayout>

as you can see in the pictures, for wide images the ImageView takes too much vertical space, this seems to not be an issue for narrow pictures, how do i fix this? Horizontal

i am not trying to re-scale the photo or crop it, i am trying to get rid of the whitespace below and above the picture, that space is a part of Imageview (i put a background to it to make sure) — user1333057, Sep 04 '14 at 12:13
the TextView isnt taking up extrta space(textView's background is blue), the offender is ImageView — user1333057, Sep 04 '14 at 12:21
Have u check this https://github.com/maurycyw/StaggeredGridViewDemo — Naveen Tamrakar, Sep 04 '14 at 12:25

score 26 · Answer 1 · answered Apr 20 '15 at 11:08

26

It's been a while, but for those who are dealing with this kind of problem right now: android:adjustViewBounds="true" should do the trick!

answered Apr 20 '15 at 11:08

p337

261
3
5

2

This solved my problem! Thank you, had to search a long time to find this. I just added the `adjustViewBounds="true"` to the `ImageView` – Kevin Van Ryckegem Sep 29 '16 at 00:13
So simple for something that took so long to solve. Thanks! – Whome Apr 07 '17 at 03:12

score 1 · Answer 2 · answered Sep 05 '14 at 12:29

I had a similar problem and I resolved it by overriding onMeasure method of RelativeLayout.

package com.etsy.android.grid.util;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.RelativeLayout;

public class DynamicHeightRelativeLayout extends RelativeLayout {

    public DynamicHeightRelativeLayout(Context context) {
        super(context);
    }

    public DynamicHeightRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public DynamicHeightRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        // Hack - This causes the height of RelativeLayout to match
        //        it's content when RelativeLayout is shown in StaggeredGridView. 
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

}

Then I used this class in XML layout file:

<?xml version="1.0" encoding="utf-8"?>
<com.etsy.android.grid.util.DynamicHeightRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ... />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ... />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ... />

</com.etsy.android.grid.util.DynamicHeightRelativeLayout>

score 0 · Accepted Answer · edited May 23 '17 at 12:32

0

as Naveen Tamrakar suggested, in StaggeredGridViewDemo they extended ImageView with the class "ScaleImageView" that solved the problem (not really sure what the problem is and why ImageView isnt wrapping around the image, but that's the solution)

edited May 23 '17 at 12:32

Community

1
1

answered Sep 04 '14 at 13:03

user1333057

607
1
8
19

score -3 · Answer 4 · answered Sep 04 '14 at 12:06

-3

You can use the ScaleType property..like this:

 android:scaleType="centerCrop"

There are several other types..just pick the one that fits best with your requirement.

answered Sep 04 '14 at 12:06

Alécio Carvalho

13,481
5
68
74

none fits, i need to keep the picture the same (ratio, no cropping) and get rid of the vertical whitespace – user1333057 Sep 04 '14 at 12:19
you can't really do it without 'scaleType', unless if you want the box to assume the same form of the image (same aspect ratio). – Alécio Carvalho Sep 04 '14 at 13:08
Use FrameLayout instead of LinearLayout..this will make the Text be on top of the image instead of below..by doing it, the extenal box will surround the image...you then can later use 'gravity' to align the text to the bottom. – Alécio Carvalho Sep 04 '14 at 13:29

ImageView taking too much vertical space

4 Answers4

Linked