Question

I’m trying to animate an ImageView so it’s slowly shown from left to right.
When I asked this before I was having trouble to explain what I wanted, so this time I created the desired effect using HTML / JS:

http://jsfiddle.net/E2uDE/

What would be the best way to get this effect in Android?

I tried changing the scaleType and then applying a ScaleAnimation directly to that ImageView:

Layout:

<ImageView
    android:id="@+id/graphImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:scaleType="centerCrop"
    android:background="@android:color/transparent"
    android:contentDescription="@string/stroom_grafiek"
    />

Java:

scale = new ScaleAnimation((float)0,
        (float)1, (float)1, (float)1,
        Animation.RELATIVE_TO_SELF, (float)0,
        Animation.RELATIVE_TO_SELF, (float)1);
scale.setDuration(1000);

graphImage.startAnimation(scale);

But this stil scales the image.

I also tried wrapping the ImageView in a FrameLayout, hoping I could just animate the FrameLayout:

<FrameLayout
    android:layout_width="70dp"
    android:layout_height="fill_parent"
    android:clipChildren="true"">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|left|clip_horizontal" />
</FrameLayout>

This will still try to scale my ImageView to fit inside the FrameLayout.

Answer 1

There are several ways to do this – one way is to simply change the clip on the canvas (i.e. the area where the view is allowed to draw) of the ImageView drawing your image. Slowly increasing the right-hand edge of the draw bounds will result in same effect as in your example link.

I have written some example code which illustrates this technique. If you download/build/run the project, clicking on the image will run the reveal animation.

Have a look at the onDraw method of the CoveredImageView class, which has the following basic structure:

@Override
protected void onDraw(Canvas canvas) {
    ...
    canvas.getClipBounds(mRect);
    mRect.right = ...;
    canvas.clipRect(mRect);
    ...
    super.onDraw(canvas);
    ...
    invalidate();
}

The clip is adjusted and then invalidate() is called, causing onDraw() to be called again.

I have also written some code to interpolate the right clip value from the elapsed time, which does not depend on any particular version of Android. However, as a note, from Android 3.0 there is a new animation framework and a ValueAnimator class which could help perform such tasks.