Fading arrows on imageswitcher

Question

I'm creating an application that uses an ImageSwitcher to show some images. I want to show arrows on either side of the screen in addition to a button on the bottom whenever a user has touched the screen or switched images. Just like you'll see when viewing screenshots for an application in Android Market.

So far I've had my activity implement OnGestureListener, and I've created an AsyncTask that fades in, sleeps for 1 seconds then fades out again whenever the ACTION_UP event is triggered. The problem is that I want to remove an arrow if the user flings to another image. There's three images.

Here's an exerpt of my code.

@Override
 public boolean onTouchEvent(MotionEvent event) {
  if (event.getAction() == MotionEvent.ACTION_UP) {
   new FadeInOutButtons().execute();
  }

  return mGesture.onTouchEvent(event);
 }

private void fadeOutAll() {


Animation fadeOut = AnimationUtils.loadAnimation(
    MyActivity.this, android.R.anim.fade_out);
  mButtonHolder.startAnimation(fadeOut);
  mButtonHolder.setVisibility(View.GONE);
  if (mRightArrow.getVisibility() == View.VISIBLE) {
   mRightArrow.startAnimation(fadeOut);
   mRightArrow.setVisibility(View.GONE);
  }
  if (mLeftArrow.getVisibility() == View.VISIBLE) {
   mLeftArrow.startAnimation(fadeOut);
   mLeftArrow.setVisibility(View.GONE);
  }
 }
private class FadeInOutButtons extends AsyncTask<Void, Void, Void> {

  @Override
  protected Void doInBackground(Void... params) {
   try {
    Thread.sleep(1000);
   } catch (InterruptedException e) {
   }
   return null;
  }

  @Override
  protected void onPostExecute(Void result) {
   fadeOutAll();
   super.onPostExecute(result);
  }

  @Override
  protected void onPreExecute() {
   Animation fadeIn = AnimationUtils.loadAnimation(
     MyActivity.this, android.R.anim.fade_in);
   mButtonHolder.startAnimation(fadeIn);
   mButtonHolder.setVisibility(View.VISIBLE);
   final int sz = mImages.size();
   if (sz > 1) {
    if (mPosition < sz - 1) {
     mRightArrow.startAnimation(fadeIn);
     mRightArrow.setVisibility(View.VISIBLE);
    }
    if (mPosition > 0) {
     mLeftArrow.startAnimation(fadeIn);
     mLeftArrow.setVisibility(View.VISIBLE);
    }
   }
   super.onPreExecute();
  }
 }
@Override


public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
   float velocityY) {
  final int sz = mImages.size();
  if (sz > 1) {

   if (velocityX < 0 && mPosition < sz - 1) {
    mInactive = mActive;
    mActive = (ImageView) mSwitcher.getNextView();
    mActive.setImageResource(mImages.get(++mPosition));
    mSwitcher.showNext();
   } else if (velocityX > 0 && mPosition > 0) {
    mInactive = mActive;
    mActive = (ImageView) mSwitcher.getNextView();
    mActive.setImageResource(mImages.get(--mPosition));
    mSwitcher.showPrevious();
   }
  }
  mInactive.setImageURI(null);

  return true;
 }

Have any of you done anything like this before? How can I make only the left arrow disappear when the third image is focused, and only the right one when the first is... And so on... ? I've been stuck on this for an hour.

Thanks!

Sorry about the formatting.

Answer 1

Firstly, don't use an AsyncTask if you're not actually doing any background work (sleeping doesn't count as work!). Use a Handler attached to the UI thread and postDelayed() to it.

WORKING EXAMPLE OF FADING VIEWS IN AND OUT

Firstly, your layout main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ImageSwitcher  
    android:id="@+id/imageSwitcher"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    />

<Button android:id="@+id/prev"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:text="Previous"
    />

<Button android:id="@+id/next"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:text="Next"
    />

</RelativeLayout>

Yes I'm using buttons rather than imageviews, just to keep the example simple.

Now the fade in and fade out animations:

fade_in.xml:

fade_out.xml:

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
       android:interpolator="@android:anim/accelerate_interpolator"
       android:fromAlpha="1.0" 
       android:toAlpha="0.0" 
       android:duration="500" 
       android:fillAfter="true"/>

Finally, some actual code for your main activity:

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity implements ViewFactory, OnTouchListener {

    ImageSwitcher imageSwitcher;
    View prev,next;
    Handler handler = new Handler();

    static final int[] images = {
        R.drawable.pic1,
        R.drawable.pic2,
        R.drawable.pic3
    };
    int currentImageIndex = 0;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        imageSwitcher = (ImageSwitcher)findViewById(R.id.imageSwitcher);
        imageSwitcher.setFactory(this);
        imageSwitcher.setOnTouchListener(this);
        prev = findViewById(R.id.prev);        
        next = findViewById(R.id.next);        
        setCurrentImage();
        scheduleHideButtons();
    }

    private void setCurrentImage() {
        imageSwitcher.setImageResource(images[currentImageIndex]);
    }

    private void scheduleHideButtons() {
        handler.removeCallbacks(hideButtonsRunnable);
        handler.postDelayed(hideButtonsRunnable, 3000);
    }
    private Runnable hideButtonsRunnable = new Runnable() {
        @Override public void run() {
            fadeButtons(false);
        }       
    };

    private void fadeButtons(final boolean fadeIn) {
        if (fadeIn) {
            scheduleHideButtons();
        }
        Animation anim = AnimationUtils.loadAnimation(this, fadeIn?R.anim.fade_in:R.anim.fade_out);
        prev.startAnimation(anim);
        next.startAnimation(anim);
        anim.setAnimationListener(new AnimationListener() {
        @Override
        public void onAnimationEnd(Animation animation) {
                prev.setVisibility(fadeIn?View.VISIBLE:View.GONE);
                next.setVisibility(fadeIn?View.VISIBLE:View.GONE);
            }
            @Override public void onAnimationRepeat(Animation animation) { }
            @Override public void onAnimationStart(Animation animation) { }             
        });
    }

    @Override
    public View makeView() {
        ImageView imageView = new ImageView(this);
        imageView.setBackgroundColor(0xFF000000);
        imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
        imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
            ImageSwitcher.LayoutParams.FILL_PARENT,
            ImageSwitcher.LayoutParams.FILL_PARENT));
        return imageView;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (event.getAction()==MotionEvent.ACTION_DOWN) {
            if (prev.getVisibility()==View.GONE) {
                fadeButtons(true);
            }
            else {
                scheduleHideButtons();
            }
        }
        return false;
    }
}