Animate android Gridview Items

Question

I want to animate the items of a gridview, in such a way that each item gets concentrated to the centre of view and one item is visible, and then again the grid items move back to their original position. I've added images for clarity. The flow of animation is Fig 1- Fig 2- Fig 3 - Fig 4 - Fig 1. How can it be done?

Answer 1

I solved the problem in this way:

A. Find the total width(W) and height(H) of the Gridview.

W = (widthOfEachItem*totalItem) + (spacingBetweenItems*(totalItem-1))
H = (heightOfTheItem*totalItem) + (spacingBetweenItems*(totalItem-1))

B. Find the centre (Cx,Cy) of the Gridview; Cx = width/2, Cy= height/2. The x co-ordinate(Cx) will change for every item in a row. The y co-ordinate(Cy) will change for every item in a column.

C.

1. For the gridItem at position (0,0) of the matrix.

   Find the percentage for translation

   x% = (Cx/W)*100, y% = (Cy/W)*100

   Translate the item fromXDelta = 0 toXDelta = x%p fromYDelta = 0 toYDelta = y%p

2. For the gridItem at position (0,1) of the matrix. The x co-ordinate of the centre of the GridView is closer for this item, so we have to deduct (widthOfEachItem+spacingBetweenItems).

   Now Cx = Cx - (widthOfEachItem+spacingBetweenItems)

   Only x co-ordinate will change in this case. y co-ordinate will remain the same.

   Find the percentage for translation :

   x% = (Cx/W)*100, y% = (Cy/W)*100

   Translate the item fromXDelta = 0 toXDelta = x%p fromYDelta = 0 toYDelta = y%p

3. For the gridItem at position (1,0) of the matrix.

   The y co-ordinate of the centre of the Gridview is closer for this item, so we have to deduct (heightOfTheItem+spacingBetweenItems).

   Now Cy = Cy - (heightOfTheItem+spacingBetweenItems)

   Only y co-ordinate will change in this case. x co-ordinate will remain the same as that of item at (0,0).

   Find the percentage for translation -

   x% = (Cx/W)*100, y% = (Cy/W)*100

   Translate the item fromXDelta = 0 toXDelta = x%p fromYDelta = 0 toYDelta = y%p

4. For the grid-item at position (1,1) of the matrix.

   The x co-ordinate of the centre of the GridView is closer for this item, so we have to deduct (widthOfEachItem+spacingBetweenItems).

   Now Cx = Cx - (widthOfEachItem+spacingBetweenItems)

   The y co-ordinate of the centre of the GridView is closer for this item, so we have to deduct (heightOfTheItem+spacingBetweenItems).

   Now Cy = Cy - (heightOfTheItem+spacingBetweenItems)

   Both x and y co-ordinate will change in this case.

   Find the percentage for translation -

   x% = (Cx/W)*100, y% = (Cy/W)*100;

   Translate the item fromXDelta = 0 toXDelta = x%p fromYDelta = 0 toYDelta = y%p

   In this way calculate the values of x% and y% for all the items in the GridView.

   For the items in a row beyond the central item the toXDelta will be -ve.

   For the items in a column beyond the central item the toYDelta will be -ve.

   For more exact alignment of the items at the centre(after animation) consider adding and deducting the co-ordinate of the centre of each item to the centre of the Gridview.

   After translating the items from their original position to the centre, if you want to translate them back to their original position just make the values of to*Delta -ve.

   This is what I've done for the GridView item at (0,0):

<translate
            android:duration="600"
            android:fromXDelta="0%p"
            android:fromYDelta="0%p"
            android:toXDelta="-7.8%p"
            android:toYDelta="33.40%p" />
        <translate
            android:duration="600"
            android:fromXDelta="0%p"
            android:fromYDelta="0%p"
            android:startOffset="1050"
            android:toXDelta="7.8%p"
            android:toYDelta="-33.40%p" />