Wednesday, April 16, 2014

Android animation crops the view

I had this simple Animation XML:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromXDelta="100%"
        android:toXDelta="-10%" />
    
    <translate
        android:duration="100"
        android:fromXDelta="-10%"
        android:startOffset="300"
        android:toXDelta="0%" />
</set>

Which simply enough should have slide a view from the right, and cross the left border of the screen and then return back to its place.

Simple enough...? Nothing is simple!

As it seemed, the OS cropped the darn view, rendered it with a missing 10% of the view right edge.
I've searched and tried different approaches for hours, (... guys hours for a stupid animation!!!)

After a long while I finally found a blog post from 2011 that made some sense.

Since Chet says, and I agree that these flags, once you are aware of their existence, make clear sense of what they do, and since he explain in detail the 'why', I'm not going to, because he did it magnificently, I'll just sum it up:


fillEnable is by default 'false'
fillAfter is by default 'false', and IS NOT effected by the fillEnabled flag.
fillBefore is by default 'true', and IS effected by the filleEnabled flag.

So to conclude this, here is the solution that worked for me(Note the bold lines):

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fillBefore="false"
        android:fillEnabled="true"
        android:fromXDelta="100%"
        android:toXDelta="-10%" />
    
    <translate
        android:duration="100"
        android:fillBefore="false"
        android:fillEnabled="true"
        android:fromXDelta="-10%"
        android:startOffset="300"
        android:toXDelta="0%" />
</set>

1 comment: