Jonas Rabbe's tumblr

At work I was creating a custom version of the ExpandableListView for Android. The main differences is that you should be able to lock a group of child items, which should not collapse when the group is collapsed; and if there are hidden items when the group is collapsed, then the first of those items should be rendered with a gradient alpha, making the item fade out. This is illustrated in the screenshot below, the text framed in red shows the look I was aiming for.

My first attempt rendered the item into a view, but I couldn’t get the layout of the item right, and adding the ItemView to my list broke the layout something fierce.

Turns out I was over-complicating matters.

A quick test showed that I could simply that the view I wanted to have the gradient alpha and add that to a FrameLayout subclass. The subclass (henceforth known as AlphaGradientFrame) only overrides the dispatchDraw() method based on the method for rendering a gradient alpha channel on a view above.

@Override
protected void dispatchDraw(Canvas canvas) {
    super.dispatchDraw(canvas);

    // Create a shader that is a linear gradient that 
    // covers the reflection
    Paint paint = new Paint();
    LinearGradient shader = new LinearGradient(0, 0, 0,
            getHeight(), 0xffffffff, 0x00ffffff,
            TileMode.CLAMP);
    // Set the paint to use this shader (linear gradient)
    paint.setShader(shader);
    // Set the Transfer mode to be porter duff and DST_IN
    paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
    // Draw a rectangle using the paint with our linear gradient
    canvas.drawRect(0, 0, getWidth(), getHeight(), paint);
}

This works perfectly, my view is drawn with a nice fade, and the layout doesn’t break. Winning!