Flex Mobile List: How to get rid of grey overlay on renderer tap?

Question

I tried setting all possible styles to something other than grey, just to try and get rid of the grey overlay as shown in the "Hello item 1" in the attached image of a list. Nothing worked. I examined the ListSkin class too and didn't fins anything that would draw these. How to get rid of these overlays?

<s:List id="list" width="100%" height="100%"
            dataProvider="{dp}"
            focusAlpha="0"
            contentBackgroundAlpha="0"
            contentBackgroundColor="0xFFFFFF"
            selectionColor="0xFFFFFF"
            downColor="0xFFFFFF"
            borderVisible="false"
            >
</s:List>

Answer 1

I just helped a client with this same thing. You, basically, have to extend the LabelItemRemderer class to not draw the rectangle. It is not exposed via styles or colors for you to change.

Look at this code (Starting at line 853 in the LabelItemRemderer):

// Selected and down states have a gradient overlay as well
// as different separators colors/alphas
if (selected || down)
{
    var colors:Array = [0x000000, 0x000000 ];
    var alphas:Array = [.2, .1];
    var ratios:Array = [0, 255];
    var matrix:Matrix = new Matrix();

    // gradient overlay
    matrix.createGradientBox(unscaledWidth, unscaledHeight, Math.PI / 2, 0, 0 );
    graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
    graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
    graphics.endFill();
}

You basically need some way to force this code to not run. You can do this by creating your own itemRenderer from scratch. Or you can extend the LabelItemRenderer, override the drawBackground() method and copy all the parent drawBackground() code into your extended child; minus the block above.

I'd love to see the color exposed as a style or something. I'd love to see a magic property (or style) we could use to make the overlay vanish altogether. Feel free to log this as a bug into the Apache Flex Jira .