Android: Animation in Gallery View?

Question

When I use the Gallery widget, how do I get the images to say scale up & glow on being selected and scaled down & un-glow on being unselected?

All tutorials I've seen have this effect but I'm not able to see it...

Is there some kind of an animation that I have to attach to the Gallery?

Answer 1

Hope this is helpful. I manage to "simulate" the shrink/grow solution with the Gallery widget. Since they removed the getScale(), things get a little bit complicated. I think that this it's not the best solution at all, but at least I can live with it.

What I have found is that Gallery manages the focus EXTREMELY BAD. So, the first approach was to add a focus change listener on the ImageView displayed, but no luck there. Focus is a MESS there... in terms that, the selected image it's not the currently focused view. I have sent a mail to android-developers mailing list about some error on API doc (regarding the focusSearch()method and some focus contants).

Here's my solution to this problem:

Build an animation resource to 'grow' the image:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
       android:fromXScale="1.0"
       android:toXScale="1.10"
       android:fromYScale="1.0"
       android:toYScale="1.10"
       android:duration="300"
       android:pivotX="50%"
       android:pivotY="50%"
       android:interpolator="@android:anim/accelerate_decelerate_interpolator"
       android:fillAfter="false"/>

If you don't get what that means then you should proceed to read this

That will be our 'grow' effect, and you will need to save it in: res/anim/grow.xml or whatever name it suites you (but always in res/anim dir).

You can follow the resource guide from here to create a Gallery view. The ImageAdapter builds an ImageView every time that the Gallery object calls getView(). One workaround you could implement is adding a line to the getView() method that identifies a View with a position, this way:

...
i.setId(position);
...

With that line added to the getView() method of the ImageAdpater object, you can then unequivocally identify that view within a listener, for instance:

g.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
    public void  onItemSelected  (AdapterView<?>  parent, View  v, int position, long id) {
        Animation grow = AnimationUtils.loadAnimation(YourActivity.this, R.anim.grow);

        View sideView = parent.findViewById(position - 1);
        if (sideView != null)
           ((ImageView)sideView).setLayoutParams(new Gallery.LayoutParams(150, 100));

        sideView = parent.findViewById(position + 1);
        if (sideView != null)
           ((ImageView)sideView).setLayoutParams(new Gallery.LayoutParams(150, 100));

        v.startAnimation(grow);
        v.setLayoutParams(new Gallery.LayoutParams(170, 150));
    }

    public void  onNothingSelected  (AdapterView<?>  parent) {
        System.out.println("NOTHING SELECTED");

    }
    });

NOTE: You may notice that all the values from animation and from layout parameters has been choosen by me at hand. This is because i'm not going to clean code for you. And, this is just a workaround the BAD focus issue with this widget or the android view system. If focus were OK, then, all you need to do is set a focus change listener that makes the gros/shrink when it got focus/unfocused.

I hope this may help you to find a way around for your problem,

Regards,

New EDIT: This is the listener I have set, I also added the line i.clearAnimation() in the getView() method:

private class SelectListener implements AdapterView.OnItemSelectedListener {
     private Animation grow;
     private int last;

     public SelectListener() {
        grow = AnimationUtils.loadAnimation(RouteGallery.this, R.anim.grow);
        last = 0;
     }

     public void  onItemSelected  (AdapterView<?>  parent, View  v, int position, long id) {
        View sideView = parent.findViewById(last);
        if (sideView != null && last != position)
           sideView.clearAnimation();

        v.startAnimation(grow);
        last = position;
     }

    public void  onNothingSelected  (AdapterView<?>  parent) {
    }
}

Answer 2

You need to use an ImageSwitcher. The ImageSwitcher has methods for setting the in and out animations (when image is selected and deselected, or selected and replaced).

The following link has a good tutorial on how to use it in conjunction with the Gallery.

Answer 3

I implemented a similar animation like this:

final Animation shrink = AnimationUtils.loadAnimation(activity, R.anim.shrink);
shrink.setFillAfter(true);

gallery.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
        @Override
        public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {

            // This iterates through the views which are currently displayed on screen.
            for (int k=0; k<gallery.getChildCount(); k++){
                // Do whatever else you want, here.
                // This is how you get a particular element of a view
                ImageView background = (ImageView) gallery.getChildAt(k).findViewById(R.id.menu_item_background);

                //clear animation
                gallery.getChildAt(k).clearAnimation();

            }

            // Scale the selected one
            view.startAnimation(shrink);

        }

        @Override
        public void onNothingSelected(AdapterView<?> adapterView) {}

    });