ImageView doesn't wrap content in RelativeLayout

Question

I have a TableLayout with 6 childs/entrys. These childs are a custom RelativeLayout. In each RelativeLayout is a big TextView in the middle and an ImageView and small TextView at the bottom.

The ImageView should be as tall as the TextView next to it. That's why I set the attribute ALIGN_TOP and ALIGN_BOTTOM to the TextView (you can see it in code below). This works very well and both - ImageView and TextView - have the same height now. But the problem is, that the left and right side of the ImageView don't "wrap content" anymore (as you can see on the screenshot).

Is there a way to fit the left and right side to the image and remove the "padding"?

Here is my code:

view_display_component.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >   
<TextView
    android:id="@+id/tvDisplayBig"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:layout_weight="1"
    android:gravity="center"
    android:textColor="@color/white"
    android:textSize="@dimen/font_size_extra_large" />

<ImageView
    android:id="@+id/imageViewDisplayIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_below="@id/tvDisplayBig"
    android:layout_gravity="bottom"
    android:adjustViewBounds="true"
    android:baselineAlignBottom="true"
    android:scaleType="fitCenter"
    android:src="@drawable/stopwatch_64"
    android:visibility="visible" />

<TextView
    android:id="@+id/tvDisplaySmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"  
    android:layout_alignParentBottom="true"
    android:gravity="bottom"
    android:includeFontPadding="false"
    android:textColor="@color/white"
    android:textSize="@dimen/font_size_small" />                
</merge>

class DisplayComponent which extends RelativLayout

public DisplayComponent(Context context) {
    super(context);
    LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    inflater.inflate(R.layout.view_display_component, this, true);
    tvDisplay = (TextView) getChildAt(0);
    icon = (ImageView) getChildAt(1);
    tvName = (TextView) getChildAt(2);

    setupAlign();
}

private void setupAlign() {
    if(index % 2 == 0) {    // LEFT SIDE
       // same as "RIGHT SIDE"
    } else {        // RIGHT SIDE
        RelativeLayout.LayoutParams paramsIcon = (RelativeLayout.LayoutParams) icon.getLayoutParams();
        paramsIcon.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        paramsIcon.addRule(RelativeLayout.ALIGN_TOP, tvName.getId());
        paramsIcon.addRule(RelativeLayout.ALIGN_BOTTOM, tvName.getId());
        icon.setLayoutParams(paramsIcon);
        RelativeLayout.LayoutParams paramsTvName = (RelativeLayout.LayoutParams) tvName.getLayoutParams();
        paramsTvName.addRule(RelativeLayout.RIGHT_OF, icon.getId()); 
        tvName.setLayoutParams(paramsTvName);

        tvName.setBackgroundColor(Color.BLUE); // only for testing
        icon.setBackgroundColor(Color.YELLOW);
    }

Answer 1

I found an (ugly) solution. Because my icon is square, I created a custom ImageView and overrode the onSizeChanged() method like this:

public class IconImageView extends ImageView {

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

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if(h != oldh && h > 0)
            getLayoutParams().width = h;  // same width as height
    }
}

But this works only if the image is square. That's why I am still searching for a better solution. Maybe some layout solution with a better setting of alignment.

Best regards!