ImageView doesn't adhere to layout rules when image is set

Question

I'm setting an image on a relative layout which is scaled. However when the image is set, the layout alignment rules are broken. The image is supposed to align to the left hand side, but shifts. The larger the image the further from the left hand edge the image is placed. Other layout items like text that rely on the placement of the image also move. The scaled image looks fine apart from its placement.

The image is 200px, the actual size of the bar's height is 70dp. I could resize the image but id like to know why this happens.

EDIT - I have also tried setting the image dynamically image.setImageResource(R.drawable.placeholder);

   <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:background="@drawable/footer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
    <ImageView
            android:id="@id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/placeholder"
            android:layout_alignParentLeft="true"
            />
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="test"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@id/icon"
            android:layout_above="@id/username"/>

    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@id/username"
            android:text="user name test"
            android:layout_marginBottom="15dp"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@id/icon"
            android:layout_alignParentBottom="true"/>
    <ToggleButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/play_media_btn_toggle"
            android:layout_marginTop="15dp"
            android:id="@id/play"
            android:layout_alignParentRight="true"
            android:textOn=""
            android:textOff=""/>
</RelativeLayout>

Answer 1

If you set your image dynamically, when your image resizes your holder is not set to fit the image so you have some weird disproportional gaps on one side (either width or height). You need to do this dynamically so you would avoid any gaps.

EDIT: here is an example how I scale the image (to fit the width) and then set it to holder and resize holder accordingly, this way I control the width of Holder and Image and ImageView (holder) scale type is Center.

float scaleFactor = (float)rssLayout.getWidth() / (float)bitmap.getWidth();     
    bitmap = Bitmap.createScaledBitmap(bitmap, (int)(bitmap.getWidth() * scaleFactor), (int)(bitmap.getHeight() * scaleFactor), true);
    bannerImage.setImageBitmap(bitmap);
    LayoutParams params = (LayoutParams) bannerImage.getLayoutParams();             
    params.width = bitmap.getWidth();
    params.height = bitmap.getHeight();
    bannerImage.setLayoutParams(params);

Hope this helps and enjoy your work

Answer 2

Setting the adjustViewBounds of your ImageView to true might fix your problem. By default, ImageViews don't scale their bounds when their content gets scaled, creating a messed up layout.