Translate

Friday, January 11, 2013

Sample Animation to play the List of Images

I've designed the Activity with One ImageView (To get AnimationDrawables) and two buttons . One to start Playing and another for pausing it..... My Design is as Follows,

  main.xml

<RelativeLayout 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"
    tools:context=".MainActivity"
    android:background="#000000">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="61dp"
        android:layout_marginLeft="22dp"
        android:text="start" />
<Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="61dp"
        android:layout_marginRight="22dp"
        android:text="pause" />
    <ImageView
        android:id="@+id/iv"
        android:layout_width="fill_parent"
        android:layout_height="200dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="16dp"
         />

</RelativeLayout>
while working with Developing part(Java) I just did 3 main steps, 1. Created AnimationDrawable object. 2.added frames to that (frames are bitmap which was converted from drawable Images). 3.set AnimationDrawable as background of ImageView declared in UI. I started and paused animation using stop() and start() methods inside the OnClick() method.. My Java File is as follows,
package com.example.rakesh;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends Activity implements OnClickListener {
ImageView img;
 Button strtbtn,stpbtn;
AnimationDrawable mAnimation;
   @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
img = (ImageView) findViewById(R.id.iv);
        BitmapDrawable frame0 = (BitmapDrawable)getResources().getDrawable(R.drawable.a);
        BitmapDrawable frame1 = (BitmapDrawable)getResources().getDrawable(R.drawable.b);
        BitmapDrawable frame2 = (BitmapDrawable)getResources().getDrawable(R.drawable.c);
        BitmapDrawable frame3 = (BitmapDrawable)getResources().getDrawable(R.drawable.d);
        BitmapDrawable frame4 = (BitmapDrawable)getResources().getDrawable(R.drawable.e);
        BitmapDrawable frame5 = (BitmapDrawable)getResources().getDrawable(R.drawable.f);

        int reasonableDuration = 750;
        mAnimation = new AnimationDrawable();
        mAnimation.addFrame(frame0, reasonableDuration);
        mAnimation.addFrame(frame1, reasonableDuration);
        mAnimation.addFrame(frame2, reasonableDuration);
        mAnimation.addFrame(frame3, reasonableDuration);
        mAnimation.addFrame(frame4, reasonableDuration);
        mAnimation.addFrame(frame5, reasonableDuration);

        img.setBackgroundDrawable(mAnimation);      
        strtbtn = (Button) findViewById(R.id.button1);
        strtbtn.setOnClickListener(this);
        stpbtn = (Button) findViewById(R.id.button2);
        stpbtn.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {

      if(v.getId()== R.id.button1){

          mAnimation.start();
          mAnimation.setOneShot(false);
      }
      else
        mAnimation.stop();
    }
}

Another way we can set animation from xml too . I've declared duration and source in the xml called animation.xml which is located in anim folder .. I've set an Imageview in main.xml where we set the attribute android:src="@anim/animation", which is in layout folder. the codings are as follows, MainActivity.java
package com.example.rakesh;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;

import android.widget.ImageView;

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView im=(ImageView)findViewById(R.id.iv);
        AnimationDrawable ad=(AnimationDrawable)im.getDrawable();
        ad.start();

    }
}

activity_main.xml 

<RelativeLayout 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:background="#000000">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
          android:src="@anim/animation"
           />

</RelativeLayout>


  animation.xml 

<?xml version="1.0" encoding="utf-8"?>
<animation-list
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:oneshot="false">
  <item
    android:drawable="@drawable/img1"
    android:duration="83"
  />
  <item
    android:drawable="@drawable/img2"
    android:duration="83"
  />
  <item
    android:drawable="@drawable/img3"
    android:duration="83"
  />
  <item
    android:drawable="@drawable/img4"
    android:duration="83"
  />
  <item
    android:drawable="@drawable/img5"
    android:duration="83"
  />
  <item
    android:drawable="@drawable/img6"
    android:duration="83"
  />
  <item
    android:drawable="@drawable/img7"
    android:duration="83"
  />
  <item
    android:drawable="@drawable/img8"
    android:duration="83"
  />
  <item
    android:drawable="@drawable/img9"
    android:duration="83"
  />
  <item
    android:drawable="@drawable/img"
    android:duration="83"
  />

  </animation-list>

  you can put your own image in drawable folder and check this out .. Enjoy :) You can Download full source code from my mediafire Account Here

No comments:

Post a Comment