title: Android Gallery zoom in/out
body: <p>Hi I am using the Gallery widget to show images downloaded from the internet.</p>
  
  <p>to show several images and I would like to have a gradual zoom while people slide up and down on the screen. I know how to implement the touch event the only thing I don't know how to make the whole gallery view grow gradually. I don't want to zoom in on one image I want the whole gallery to zoom in/out gradually.</p>
  
  <p>EDIT3: I manage to zoom the visible part of the gallery but the problem is I need to find a way for the gallery to find out about it and update it's other children too. </p>
  
  <p>What happens is if 3 images are visible then you start zooming and the gallery does get smaller, so do the images but what <strong>I would like in this case is more images to be visible</strong> but I don't know how to reach this desired effect. Here's the entire code:</p>
  
  <pre><code>public class Gallery1 extends Activity implements OnTouchListener {
  
  private static final String TAG = "GalleryTest";
  private float zoom=0.0f;
  // Remember some things for zooming
  PointF start = new PointF();
  PointF mid = new PointF();
  Gallery g;
  LinearLayout layout2;
  private ImageAdapter ad;
  
  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.gallery_1);
      layout2=(LinearLayout) findViewById(R.id.layout2);
  
      // Reference the Gallery view
      g = (Gallery) findViewById(R.id.gallery);
      // Set the adapter to our custom adapter (below)
      ad=new ImageAdapter(this);
      g.setAdapter(ad);
  
  
      layout2.setOnTouchListener(this);
  
  }
  
  
  public void zoomList(boolean increase) {
      Log.i(TAG, "startig animation");
  
  
      AnimatorSet set = new AnimatorSet();
      set.playTogether(
  
          ObjectAnimator.ofFloat(g, "scaleX", zoom),
          ObjectAnimator.ofFloat(g, "scaleY", zoom)
  
      );
      set.addListener(new AnimatorListener() {
  
          @Override
          public void onAnimationStart(Animator animation) {
  
  
          }
  
          @Override
          public void onAnimationRepeat(Animator animation) {
              // TODO Auto-generated method stub
  
          }
  
          @Override
          public void onAnimationEnd(Animator animation) {
  
          }
  
          @Override
          public void onAnimationCancel(Animator animation) {
              // TODO Auto-generated method stub
  
          }
      });
      set.setDuration(100).start();
  
  
  }
  
  
  public class ImageAdapter extends BaseAdapter {
      private static final int ITEM_WIDTH = 136;
      private static final int ITEM_HEIGHT = 88;
  
      private final int mGalleryItemBackground;
      private final Context mContext;
  
      private final Integer[] mImageIds = {
              R.drawable.gallery_photo_1,
              R.drawable.gallery_photo_2,
              R.drawable.gallery_photo_3,
              R.drawable.gallery_photo_4,
              R.drawable.gallery_photo_5,
              R.drawable.gallery_photo_6,
              R.drawable.gallery_photo_7,
              R.drawable.gallery_photo_8
      };
  
      private final float mDensity;
  
      public ImageAdapter(Context c) {
          mContext = c;
          // See res/values/attrs.xml for the &lt;declare-styleable&gt; that defines
          // Gallery1.
          TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
          mGalleryItemBackground = a.getResourceId(
                  R.styleable.Gallery1_android_galleryItemBackground, 1);
          a.recycle();
  
          mDensity = c.getResources().getDisplayMetrics().density;
      }
  
      public int getCount() {
          return mImageIds.length;
      }
  
      public Object getItem(int position) {
          return position;
      }
  
      public long getItemId(int position) {
          return position;
      }
  
      public View getView(int position, View convertView, ViewGroup parent) {
          ImageView imageView;
          if (convertView == null) {
              convertView = new ImageView(mContext);
  
              imageView = (ImageView) convertView;
              imageView.setScaleType(ImageView.ScaleType.FIT_XY);
              imageView.setLayoutParams(new Gallery.LayoutParams(
                      (int) (ITEM_WIDTH * mDensity + 0.5f),
                      (int) (ITEM_HEIGHT * mDensity + 0.5f)));
  
          } else {
              imageView = (ImageView) convertView;
          }
  
          imageView.setImageResource(mImageIds[position]);
  
          return imageView;
      }
  }
  
  public boolean onTouch(View v, MotionEvent event) {
  
      if (event.getAction() == MotionEvent.ACTION_MOVE
              &amp;&amp; event.getPointerCount() &gt; 1) {
          midPoint(mid, event);
  
          if(mid.y &gt; start.y){
  
              Log.i(TAG, "Going down (Math.abs(mid.y - start.y)= "+(Math.abs(mid.y - start.y))+" and zoom="+zoom); // going down so increase
              if ((Math.abs(mid.y - start.y) &gt; 10) &amp;&amp; (zoom&lt;2.5f)){
  
                  zoom=zoom+0.1f;
                  midPoint(start, event);
                  zoomList(true);
  
  
              }
              return true;
          }else if(mid.y &lt; start.y){
  
              Log.i(TAG, "Going up (Math.abs(mid.y - start.y)= "+(Math.abs(mid.y - start.y))+" and zoom="+zoom); //smaller
              if ((Math.abs(mid.y - start.y) &gt; 10) &amp;&amp;(zoom&gt;0.1)){
  
                  midPoint(start, event);
                  zoom=zoom-0.1f;
                  zoomList(false);
  
              }
              return true;
          }
  
      }
  
      else if (event.getAction() == MotionEvent.ACTION_POINTER_DOWN) {
          Log.e(TAG, "Pointer went down: " + event.getPointerCount());
          return true;
      }
      else if (event.getAction() == MotionEvent.ACTION_UP) {
          Log.i(TAG, "Pointer going up");
          return true;
      }
      else if (event.getAction() == MotionEvent.ACTION_DOWN) {
          Log.i(TAG, "Pointer going down");
          start.set(event.getX(), event.getY());
          return true;
      }
  
       return false;
         // indicate event was handled or not
     }
  
  private void midPoint(PointF point, MotionEvent event) {
      float x = event.getX(0) + event.getX(1);
      float y = event.getY(0) + event.getY(1);
      point.set(x / 2, y / 2);
   }
  </code></pre>
  
  <p>I realise I will probably have to extend the Gallery or even another View group or create my own class but I don't know where to start: which method use the one responsible for scaling...</p>
  
  <p>EDIT4: I don't know if he question is clear enough. Here is an example of states:</p>
  
  <p>State one: initial state, we have 3 images in view</p>
  
  <p>State 2: we detect vertical touches going up with 2 fingers = we have to zoom out</p>
  
  <p>state 3: we start zooming = animation on the gallery or on the children???</p>
  
  <p>state 4: gallery detects that it's 3 children are smaller </p>
  
  <p>state 5: gallery adds 1 /more children according to the new available space</p>
  
  <p>LAST UPDATE:
  Thanks to all that have posted but I have finally reached a conclusion and that is to not use Gallery at all:
  1. It's deprecated
  2. It's not customizable enough for my case</p>
  
  <p>If you want to animate several images at once you may want to consider using OpenGl, I am using libgdx library: 
  <a href="https://github.com/libgdx/libgdx" rel="nofollow">https://github.com/libgdx/libgdx</a></p>