Android, why adding left/right margin scales up image?

Question

I have two image views, one on top of the other. Behind imageView displays user's image while the top one is cover image (just face area is fully transparent like following screenshot).

My layout is like this:

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rlContainer">

    <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/ivUserImage"
            android:contentDescription="@string/content_description"/>

    <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/ivCoverImage"
            android:contentDescription="@string/content_description"
            android:scaleType="fitXY"/>
</RelativeLayout>

I'm using OnSwipeTouchListener class in order to adjust user's shape in transparent (face) area. I have following code in onCreateView() of my fragment:

mrlContainer = (RelativeLayout) view.findViewById(R.id.rlContainer);
        mUserImage = (ImageView) view.findViewById(R.id.ivUserImage);
        mUserImage.setImageURI(mImgUri);
        mCoverImage = (ImageView) view.findViewById(R.id.ivCoverImage);
        mCoverImage.setOnTouchListener(new OnSwipeTouchListener(mContext) {
            public void onSwipeTop() {
                moveImageToTop();
            }
            public void onSwipeRight() {
                moveImageToRight();
            }
            public void onSwipeLeft() {
                moveImageToLeft();
            }
            public void onSwipeBottom() {
                moveImageToBottom();
            }

            public boolean onTouch(View v, MotionEvent event) {
                return getGestureDetector().onTouchEvent(event);
            }
        }); 

And my movement methods are these:

private void moveImageToTop() {
        LayoutParams layoutParams = (LayoutParams) mUserImage.getLayoutParams();
        layoutParams.topMargin -= 20;

        mUserImage.setLayoutParams(layoutParams);
    }

    private void moveImageToBottom() {
        LayoutParams layoutParams = (LayoutParams) mUserImage.getLayoutParams();
        layoutParams.bottomMargin -= 20;

        mUserImage.setLayoutParams(layoutParams);
    }

    private void moveImageToRight() {
        LayoutParams layoutParams = (LayoutParams) mUserImage.getLayoutParams();
        layoutParams.rightMargin -= 20;

        mUserImage.setLayoutParams(layoutParams);
    }

    private void moveImageToLeft() {
        LayoutParams layoutParams = (LayoutParams) mUserImage.getLayoutParams();
        layoutParams.leftMargin -= 20;

        mUserImage.setLayoutParams(layoutParams);
    }

Now, moveImageToTop() and moveImageToBottom() are working fine when I touch screen and move my finger top or bottom. However, image scales up when I move left or right.

What you think? Where is my mistake? Any suggestion would be appreciated. Thanks

Answer 1

As I know, default image scaleType is FIT_CENTER. You didn't change only position since you set MATCH_PARENT in both axis. Also you change View boundaries. By changing vertical boundaries you didn't change image size inside ImageView if your image is fit in horizontal axis.

If I were you, I will use Animation framework or change position during onLayout change and ask for relayout after every swipe.

Answer 2

I changed xml code of behind image to following code and left/right movement fixed:

<ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/ivUserImage"
            android:contentDescription="@string/content_description"
            android:scaleType="center"/>

Anyway, I decided to use PhotoView library by chrisbanes which is very easy to use.