Fill Listview row height with view when row is resized

Question

I am facing a seemingly simple issue but after many hours on the case now I cannot figure it out. I am trying to create a ListView with rows that contains an ImageView which re-sizes based on the ImageView's image. This works through subclassing the ImageView and giving it a height ratio to follow since I know the image size before loading it:

Custom subclass of ImageView onMeasure method:

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (mHeightRatio > 0.0) {
            // set the image views size
            int width = MeasureSpec.getSize(widthMeasureSpec);
            int height = (int) (width * mHeightRatio);
            setMeasuredDimension(width, height);
        }
        else {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }

In the adapter I set the ratio of the ImageView:

holder.couponImage.setHeightRatio(359.0/1080.0);

The Problem is that I also want an overlay on the ImageView in form of a RelativeLayout with a semi-transparent background and containing a TextView. The issue is that when the ImageView Rezises the overlaying RelativeLayout doesn't, the white in the image below is the RelativeLayout:

enter image description here

The row XML looks like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <se.bdms.babydirect.views.DynamicHeightImageView
        android:id="@+id/couponImage"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:src="@drawable/coupon_01"/>

    <RelativeLayout
        android:id="@+id/relRedeemedOverlay"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@color/almostWhiteTransparent"
        android:gravity="center"
        >

        <se.bdms.babydirect.views.TextViewMega
            android:id="@+id/lblRedeemed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextField"
            android:textColor="@color/headlineGray"
            android:layout_centerInParent="true"
            android:textSize="24sp"/>

        </RelativeLayout>

</RelativeLayout>

I have tried multiple solutions to fix this among them: this and this. I have succeeded in making the RelativeLayout the same size as the ImageView by subclassing that in the same way the ImageView is subclassed but then then TextView is still not centered vertically and stays at the top like nothing happened.

I would like to let the RelativeLayout know that the row height has changed and fill the row and then the TextView centers itself based on the new height.

Does anyone have a clue what to do about this? Any help is greatly appreciated!

You are signaling not 1 but 3 problems: "when the ImageView rezises, the overlaying RelativeLayout doesn't", "white should cover this as well" and "TextView is still not centered", am I right? — shkschneider, Dec 04 '14 at 09:19
@shkschneider The RelativeLayout is the white so that is the same thing only visually explained. The thing with the TextView is if I subclass the RelativeLayout in the same way I subclass ImageView the TextView will not take any note of thing and stay at the top of the row. The best solution for me would be if there was a way to make the RelativeLayout fill the row and the TextView follows. Edited question. — PaperThick, Dec 04 '14 at 09:24

Bruce · Answer 1 · 2014-12-06T06:43:47.173

I think the problem is just that you need to tell the overlay that it is the same height as the image. You'll be able to do that because the parent is already a RelativeLayout. I'm showing aligning the child RelativeLayout to the ImageView, but you could also use alignParentTop="true" and alignParentBottom="true". Also, I think best is if the parent view has height wrap_content, and both children are match_parent.

Once your overlay is the full height of the item, your centerInParent should work to center it within the overlay (which it already is).

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

    <se.bdms.babydirect.views.DynamicHeightImageView
        android:id="@+id/couponImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:src="@drawable/coupon_01"/>

    <RelativeLayout
        android:id="@+id/relRedeemedOverlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignTop="@id/couponImage"
        android:layout_alignBottom="@id/couponImage"
        android:background="@color/almostWhiteTransparent"
        android:gravity="center"
        >

        <se.bdms.babydirect.views.TextViewMega
            android:id="@+id/lblRedeemed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextField"
            android:textColor="@color/headlineGray"
            android:layout_centerInParent="true"
            android:textSize="24sp"/>

        </RelativeLayout>

</RelativeLayout>

Let me know whether that works.

Hi, thank you for answering. That almost worked, the RelativeLayout overlay did fill the row this time but the TextView is not centered in it. It sticks to the top. — PaperThick, Dec 08 '14 at 14:40
Try making both layout_height and layout-_width of the TextView match_parent, and set android:gravity (NOT layout_gravity) = "true". — Bruce, Dec 08 '14 at 15:13
No sorry does not work. The weird thing is that your original answer works on my old API 10 device. But not on my current API 19 S4. — PaperThick, Dec 09 '14 at 09:20

Fill Listview row height with view when row is resized

1 Answers1