Friday, October 19, 2012

Create Animation using Matrix

The former exercise demonstrate how to "Using Matrix create scaled bitmap". In this exercise, we will create animation using matrix.

Create Animation using Matrix


package com.example.androidmatrixanimation;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Matrix;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.OvershootInterpolator;
import android.view.animation.Transformation;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity {

 Button myButton;
 ImageView myImage1, myImage2;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        myButton = (Button)findViewById(R.id.mybutton);
        myImage1 = (ImageView)findViewById(R.id.myimage1);
        myImage2 = (ImageView)findViewById(R.id.myimage2);
        
        myButton.setOnClickListener(myOnClickListener);
        myImage1.setOnClickListener(myOnClickListener);
        myImage2.setOnClickListener(myOnClickListener);

    }
    
    OnClickListener myOnClickListener
    = new OnClickListener(){

  @Override
  public void onClick(View v) {
   applyAnimation(v);
   
  } 
    };
    
    private void applyAnimation(View v){
     MyAnimation myAnimation = new MyAnimation();
  myAnimation.setDuration(5000);
  myAnimation.setFillAfter(true);
  myAnimation.setInterpolator(new OvershootInterpolator());
  
  v.startAnimation(myAnimation);
    }

    public class MyAnimation extends Animation{

  @Override
  protected void applyTransformation(float interpolatedTime,
    Transformation t) {
   super.applyTransformation(interpolatedTime, t);
   
   final Matrix matrix = t.getMatrix();
   matrix.setScale(interpolatedTime, interpolatedTime);
  }
    }
    
}


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
    <Button
        android:id="@+id/mybutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />
    <ImageView
        android:id="@+id/myimage1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="center"
        android:src="@drawable/ic_launcher" />
    <ImageView
        android:id="@+id/myimage2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="center"
        android:src="@drawable/ic_launcher" />

</LinearLayout>




download filesDownload the files.

Download the APK.

4 comments:

  1. Thanks Very Muchh!!

    ReplyDelete
  2. Hi,

    Thanks for this post. I used the code exactly for my ImageView but it is causing my image to dissapear and then reappear at the end of the transformation. I'm using the API Level 10 (gingerbread 2.3.3). Do you have any idea why?

    Thanks.

    ReplyDelete
  3. hello Sim,

    Just re-tested on Nexus One with Android 2.3.6, and it work as expected.

    You can download the APK (with link in the post) to test it.

    ReplyDelete