Home » Android » android – ImageView taking too much vertical space

android – ImageView taking too much vertical space

Posted by: admin June 15, 2020 Leave a comment

Questions:

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?
Vertical Horizontal

How to&Answers:

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!

Answer:

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>

Answer:

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)

Answer:

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.