title: Creating a Slide Show that Fade images into each other and transforms
body: <p>I am trying to create an image slide show that is similar to <a href="http://www.youtube.com/watch?v=zZM11G7kMuY" rel="nofollow">this</a></p>
  
  <p>I found <a href="http://code.davidjanes.com/blog/2009/11/23/animated-slideshow-on-android/" rel="nofollow">this tutorial</a> which shows me how to make images fade into each other, which works really well, but I can't find any examples how to make it do the movement/scaling at the same time so I am trying to adapt it.</p>
  
  <p>I have added a scale animation and put that along with the alpha animation in an animationset but I can't get it to work correctly, it is only doing the animation on every other image and then when the zoom starts it zooms one way and switches and then zooms the other way.</p>
  
  <p>I am reasonably new to Android have not done any animations before and am having difficultly understanding how the example is working. Therefore I am having difficulty amending it.</p>
  
  <p>Can anyone help me work out what I am doing wrong? I'm starting to pull my hair out!</p>
  
  <p>My java code is:</p>
  
  <pre><code>  public class TopListActivity extends Activity {
  
      ImageView slide_0;
      ImageView slide_1;
  
      @Override
      public void onCreate(Bundle savedInstanceState) {
  
          super.onCreate(savedInstanceState);
          setContentView(R.layout.test2);
  
          slide_0 = (ImageView) findViewById(R.id.slide_1);
          slide_1 = (ImageView) findViewById(R.id.slide_2);
  
      }
  
      private static class AnimationTimer extends TimerTask implements
              AnimationListener {
  
          TopListActivity topList;
          Vector&lt;BitmapDrawable&gt; images;
          int count = 0;
  
          public AnimationTimer(TopListActivity _topList) {
              this.topList = _topList;
  
              this.images = new Vector&lt;BitmapDrawable&gt;();
  
              Resources resources = topList.getResources();
              images.add((BitmapDrawable) resources.getDrawable(R.drawable.one));
              images.add((BitmapDrawable) resources.getDrawable(R.drawable.two));
              images.add((BitmapDrawable) resources.getDrawable(R.drawable.three));
              images.add((BitmapDrawable) resources.getDrawable(R.drawable.four));
              images.add((BitmapDrawable) resources.getDrawable(R.drawable.five));
              images.add((BitmapDrawable) resources.getDrawable(R.drawable.six));
  
              if (this.images.size() &gt; 0) {
                  this.topList.slide_0.setBackgroundDrawable(this.images.get(0));
  
                  if (this.images.size() &gt; 1) {
                      this.topList.slide_1.setBackgroundDrawable(this.images
                              .get(1));
                  }
  
              }
  
              this.count = 1;
          }
  
          public void launch() {
              if (this.images.size() &gt;= 2) {
                  (new Timer(false)).schedule(this, 100);
              }
          }
  
          @Override
          public void run() {
              this.doit();
              this.cancel();
          }
  
          private void doit() {
              if ((this.count % 2) == 0) {
                  AnimationSet set = new AnimationSet(false);
  
  
                  AlphaAnimation animation = new AlphaAnimation(1.0f, 0.0f);
                  animation.setStartOffset(5000);
                  animation.setDuration(3000);
                  animation.setFillAfter(true);
  
                  ScaleAnimation zoom = new ScaleAnimation(1, 1.20f, 1, 1.20f);
                  zoom.setStartOffset(0);
                  zoom.setDuration(8000);
                  zoom.setFillAfter(true);
  
                  set.addAnimation(animation);
                  set.addAnimation(zoom);
                  set.setAnimationListener(this);
  
                  this.topList.slide_1.startAnimation(set);
              } else {
  
                  AnimationSet set = new AnimationSet(false);
  
                  AlphaAnimation animation = new AlphaAnimation(0.0f, 1.0f);
                  animation.setStartOffset(5000);
                  animation.setDuration(3000);
                  animation.setFillAfter(true);
  
                  ScaleAnimation zoom = new ScaleAnimation(1.20f, 1, 1.20f, 1);
                  zoom.setStartOffset(0);
                  zoom.setDuration(8000);
                  zoom.setFillAfter(true);
  
                  set.addAnimation(animation);
                  set.addAnimation(zoom);
                  set.setAnimationListener(this);
  
                  this.topList.slide_1.startAnimation(set);
              }
          }
  
          public void onAnimationEnd(Animation animation) {
              if ((this.count % 2) == 0) {
                  this.topList.slide_1.setBackgroundDrawable(this.images
                          .get((this.count + 1) % (this.images.size())));
              } else {
                  this.topList.slide_0.setBackgroundDrawable(this.images
                          .get((this.count + 1) % (this.images.size())));
              }
  
              this.count++;
              this.doit();
  
          }
  
          public void onAnimationRepeat(Animation animation) {
          }
  
          public void onAnimationStart(Animation animation) {
          }
      }
  
      @Override
      public void onResume() {
          super.onResume();
  
          (new AnimationTimer(this)).launch();
      }
  }
  </code></pre>
  
  <p>and my layout is:</p>
  
  <pre><code>    &lt;FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/frame"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"&gt;
      &lt;ImageView
          android:id="@+id/slide_1"
          android:layout_gravity="center_vertical"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" /&gt;
      &lt;ImageView
          android:id="@+id/slide_2"
          android:layout_gravity="center_vertical"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" /&gt;
  &lt;/FrameLayout&gt;
  </code></pre>