Making Text Visible According to background Image

A couple of while ago, My friend and I released an app called AniTime. Talking with some users, we found out there is the problem of the airing countdown blending in with the series Artworks, hence, making it unreadable. To be honest, we were well aware of this issue since before launch, but we were lazy to implement this. Talking to a senior developer, he gave me some pointers to use Palette.

The tldr; of what I wanted to do would be
if background image’s dominant color is closer to black, use white text
if not use black text

Extracting Dominant Color

This bit is easy as in we can use getDominantColor method in the Palette API, So we got the dominant color but now what? How do we determine if this color is closer to white or black? A couple of Google-fu led me to this Stackoverflow Answer which determines by calculating the luminance of a color. Combining that answer with the dominant color we got earlier, I was able to create the following method that determines whether the dominant color in a Bitmap is closer to black or white.

As you can see in the following pic, the result was still very unsatisfying . It had an accuracy of around 25– 30%. Looks okay but not good enough.

Let’s improve that accuracy.

Crop the Bitmap to necessary portion

Right now, we’re taking the dominant color from the whole image instead of just the background portion. Let’s try taking dominant color from the necessary part(the green portion) instead of the whole red portion. For that we will need to create a new Bitmap from the whole source image.

I did some simple math, and comes up with this solution which creates a Bitmap that covers only the green portion. We will then pass the croppedBitmap to our earlier method and see the result.

The final result improves the accuracy up to around from 70% which I find very satisfied with. This still isn’t perfect solution but I think it’s quite good. But hey, I’ll keep this posted if I find a better solution and if you find one, please do tell me too. Here’s a comparison of before and after for better visibility

This update will begins rolling out by the end of this month along with other improvements, so stay tuned. If you haven’t tried the app yet, please check out this awesome handcrafted app. It’s a plus if you’re an anime fan!