Wave Scale Animation in GridViews in Android

By | May 28, 2013

Hello all

Previously I have shown many posts where we animate each row of the GridView randomly, linearly etc.

GridView RandomFade animation in Android

and

Cascade animation in a ListView in Android.

Wave Scale

Wave Scale

In today’s post I will show you how to create a wave scale animation in the ListViews.

Please refer to my old posts for the extra code. Here I am posting only the animation XML only for the wave animation.

layout_wave_scale.xml ( inside the res/anim folder)

<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="100" />
    <scale
        android:fromXScale="0.5" android:toXScale="1.5"
        android:fromYScale="0.5" android:toYScale="1.5"
        android:pivotX="50%" android:pivotY="50%"
        android:duration="200" />
    <scale 
        android:fromXScale="1.5" android:toXScale="1.0"
        android:fromYScale="1.5" android:toYScale="1.0"
        android:pivotX="50%" android:pivotY="50%"
        android:startOffset="200"
        android:duration="100" />
</set>

Apply it to the GridView and see the result.

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/grid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="60dp"
    android:gravity="center"
    android:horizontalSpacing="10dp"
    android:layoutAnimation="@anim/layout_wave_scale"
    android:numColumns="auto_fit"
    android:stretchMode="columnWidth"
    android:verticalSpacing="10dp" />

One thought on “Wave Scale Animation in GridViews in Android

  1. Umesh Isran

    Thank you. Its a very helpful post. 🙂
    I have a question..
    Q) In Wave scale animation, the animation and display of gridview items is sequential. I want to have the same but during the animation all the other gridview items have to be displayed.
    i.e. If 1st item is animating, all the other items should be displayed on the screen.

    Is this possible..?

    Reply

Leave a Reply

Your email address will not be published.