How Do I Shrink and Slide a View into the Upper-Left Corner?

Question

I have a layout resource file:

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

  <!-- other widget here -->

  <ImageView
    android:id="@+id/thumbnail"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFFFF"
    android:layout_gravity="top|left"
    android:visibility="gone"/>

</FrameLayout>

At a certain point in time, this layout will be shown in my activity. At that point, I will set the visibility of the thumbnail ImageView to View.VISIBLE, and I then want to animate it to take up 30% of the width/height of the screen, located marginPixels from the upper-left corner (on my test device, marginPixels is 48). That will expose the underlying View, except for the portion taken over by the thumbnail.

To that end, I have the following Java:

thumbnail.setVisibility(View.VISIBLE);
thumbnail
  .animate()
  .scaleX(0.3f)
  .scaleY(0.3f)
  .x(marginPixels)
  .y(marginPixels)
  .setDuration(animDuration);

The result is that the animation happens, but thumbnail is centered within the FrameLayout.

I have tried:

• Both having and not having android:layout_gravity="top|left" on the ImageView in the layout XML

• translationX(marginPixels)/translationY(marginPixels) instead of x(marginPixels)/y(marginPixels)

• translationXBy(marginPixels)/translationYBy(marginPixels) instead of x(marginPixels)/y(marginPixels)

None seem to have an effect. The thumbnail is always centered. If I comment out the x() and y() calls, the result is also centered, suggesting that for some reason, they are being ignored. If, instead, I comment out the scaleX() and scaleY() calls (leaving x() and y() as shown in the original listing), the thumbnail is translated to the right position, but it is still full-size. If I use setX() and setY() on the thumbnail itself before the animation and comment out the x() and y() calls, the thumbnail initially is positioned at the right spot, but as soon as the scale animation kicks in, I'm back to being centered.

Now, I can certainly calculate the right value to use, given screen size and whatnot. But it would seem as though x()/y() should be the right methods to use on the ViewPropertyAnimator, so I am trying to figure out where I am going wrong.

UPDATE: This code works (or at least gets close — I haven't actually measured the results to confirm precise pixel placement):

int x=(int)(-0.35f*(float)bmp.getWidth())+marginPixels;
int y=(int)(-0.35f*(float)bmp.getHeight())+marginPixels;

thumbnail.setVisibility(View.VISIBLE);
thumbnail.setImageBitmap(bmp);
thumbnail
  .animate()
  .x(x)
  .y(y)
  .scaleX(0.3f)
  .scaleY(0.3f)
  .setDuration(animDuration);

What I do not grok is why those calculations are needed. IOW, why are the x and y contingent upon the scale?

Answer 1

When setting scale (either with setScale or through an animation), pivot values are being taken into account. The default values of pivotX and pivotY are half of the width and half of the height (respectively). So any scaling with default pivots will result in View being scaled from (or toward) the center of the View when the scale is 1.0f.

X and Y (as well as translationX and translationY) are not affected by pivots. You can see your thumbnail is actually being shifted by marginPixels (both vertically and horizontally).

If you try the following code, you'll see that everything works as expected.

thumbnail.setVisibility(View.VISIBLE);
thumbnail.setPivotX(0);
thumbnail.setPivotY(0);
thumbnail
  .animate()
  .scaleX(0.3f)
  .scaleY(0.3f)
  .x(marginPixels)
  .y(marginPixels)
  .setDuration(animDuration);