Android Gallery bad image overlapping in CoverFlow

Question

I'm tinkering with CoverFlow from here to match my preferences and can't fix one problem. Here's the screenshot:

screenshot

Pictures on the right from center image are overlapping in bad way. Here's my code:

protected boolean getChildStaticTransformation(View child, Transformation t) {

  final int childCenter = getCenterOfView(child);
  int rotationAngle = 0;
  t.clear();
  t.setTransformationType(Transformation.TYPE_MATRIX);

    if (childCenter == mCoveflowCenter) {
        transformImageBitmap((ImageView) child, t, 0);
    } else {      
        rotationAngle = Math.abs(mCoveflowCenter - childCenter);
        transformImageBitmap((ImageView) child, t, rotationAngle);         
    }    

return true;
}

/**
* This is called during layout when the size of this view has changed. If
* you were just added to the view hierarchy, you're called with the old
* values of 0.
*
* @param w Current width of this view.
* @param h Current height of this view.
* @param oldw Old width of this view.
* @param oldh Old height of this view.
 */
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  mCoveflowCenter = getCenterOfCoverflow();
  super.onSizeChanged(w, h, oldw, oldh);
 }

 /**
  * Transform the Image Bitmap by the Angle passed 
  * 
  * @param imageView ImageView the ImageView whose bitmap we want to rotate
  * @param t transformation 
  * @param rotationAngle the Angle by which to rotate the Bitmap
  */
 private void transformImageBitmap(ImageView child, Transformation t, int rotationAngle) {            
  mCamera.save();
  final Matrix imageMatrix = t.getMatrix();
  final int imageHeight = child.getLayoutParams().height;
  final int imageWidth = child.getLayoutParams().width;

  mCamera.translate(0.0f, 0.0f, 100.0f);

  float zoomAmount = 0;
  //skalowanie za pomocą translate nie rotational angle?
  zoomAmount = Math.abs((float) (rotationAngle));

  Log.v("zoom", Float.toString(zoomAmount));
  mCamera.translate(0.0f, 0.0f, zoomAmount - 300.0f);          

  mCamera.getMatrix(imageMatrix);               
  imageMatrix.preTranslate(-(imageWidth/2), -(imageHeight/2)); 
  imageMatrix.postTranslate((imageWidth/2), (imageHeight/2));
  mCamera.restore();
}

It's translatimg the camera for each picture, so smaller pictures are more into screen (in logcat values are perfect). What does it mean? Do I have to draw the smaller pics first, then larger, etc.? If so, how I can do that?

Answer 1

mCamera.translate(xTranslate, 0.0f, translateDepth);

In the Coverflow class use the above function to increase the depth (More positive = More smaller) or translate in X direction. Also you can use some scaling. Use the centerOffset value as well. Serves the purpose.

Answer 2

You have specify the correct order by overriding getChildDrawingOrder function of Gallery class. Above behavior can be achieved by following piece of code:

int lastPosition;

@Override
protected int getChildDrawingOrder(int childCount, int i) {

    if (i == 0)
        lastPosition = 0;

    int centerPosition = getSelectedItemPosition()
            - getFirstVisiblePosition();

    if (i == childCount - 1) {
        return centerPosition;
    } else if (i >= centerPosition) {
        lastPosition++;
        return childCount - lastPosition;
    } else {
        return i;
    }
}