Android tip: ListView becomes black when scrolling

One of my Android apps recently suffered from a nefariously ugly UI glitch that, embarrassingly, a user reported to me. Strangely, this phenomenon did not surface itself in local testing on either emulators or devices when I first wrote the app; nevertheless, I was able to reproduce the error after the bug report came in. I suspect that recent updates in the Android platform might have exacerbated the issue for my app as I’m fairly certain I never saw it before.

HopRoll displays a ListView of hops and has a custom background like so:

When people scrolled through that list, however, they would see a nasty black partially rendered screen that made the app completely unusable as you can see below:

If you start to notice that your ListView containing custom backgrounds become horribly black when scrolling then you’ve got the same issue.

Luckily, it’s quite easy to rectify. It turns out that when scrolling, there is some rendering magic going on that can obstruct the background in an ungainly way; you can fix it by adding one line to the ListView’s layout definition:

<span class="line-number">1</span>

<code class="xml"><span class="line">android:cacheColorHint="@android:color/transparent"
</span>

With that line in place, scrolling, once again, becomes clean and smooth.

You can find my app, Hop Roll, which is your go-to home brew resource for all hop related information on Google Play and Amazon’s Android App Store – keep on trucking, baby!