Android: Vertical ListView with overlapped rows

Paulius Vindzigelskis picture Paulius Vindzigelskis · Apr 18, 2012 · Viewed 7.4k times · Source

How to create listview like this in android 1.6 or 2 (because of renderscript, which works only in 3 or later, but I need list to work on almost all androids):

enter image description here

Answer

Paulius Vindzigelskis picture Paulius Vindzigelskis · Apr 23, 2012

I used Camera.setTranslate(x, 0, z) in drawChild, where changed x position for rotation virtualization and z for overlaping. Then there was problem with overlapping, because last item was on top and first on bottom layer. So, in onCreate() method called this.setChildrenDrawingOrderEnabled(true) and overriden protected int getChildDrawingOrder (int childCount, int i) {} where I could change order for middle and later rows. This idea was given by Renard, who suggested me in other my post about almost same thing here.

My getChildDrawingOrder(int, int) implementation to get overlapping I need:

@Override
protected int getChildDrawingOrder (int childCount, int i) {
    int centerChild = 0;
    //find center row
    if ((childCount % 2) == 0) { //even childCount number
        centerChild = childCount / 2; // if childCount 8 (actualy 0 - 7), then 4 and 4-1 = 3 is in centre.      
        int otherCenterChild = centerChild - 1;
        //Which more in center?
        View child = this.getChildAt(centerChild);
        final int top = child.getTop();
        final int bottom = child.getBottom();
        //if this row goes through center then this
        final int absParentCenterY = getTop() + getHeight() / 2;
        //Log.i("even", i + " from " + (childCount - 1) + ", while centerChild = " + centerChild);
        if ((top < absParentCenterY) && (bottom > absParentCenterY)) {
            //this child is in center line, so it is last
            //centerChild is in center, no need to change
        } else {
            centerChild = otherCenterChild;
        }
    }
    else {//not even - done
        centerChild = childCount / 2;
        //Log.i("not even", i + " from " + (childCount - 1) + ", while centerChild = " + centerChild);
    }

    int rez = i;
    //find drawIndex by centerChild
    if (i > centerChild) {
        //below center
        rez = (childCount - 1) - i + centerChild;
    } else if (i == centerChild) {
        //center row
        //draw it last
        rez = childCount - 1;
    } else {
        //above center - draw as always
        // i < centerChild
        rez = i;
    }
    //Log.i("return", "" + rez);
    return rez;

}

I hope this post will help someone in future

Screenshot is actually almost the same as I mentioned in my question. I used alpha, so overlayed items is a little bit see-through:

enter image description here