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:

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!

Answer 1

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.