To represent the two competing “like” and “dislike” tallies on individual videos, YouTube uses an elegant solution—a partially filled bar that indicates both values:

2012-12-21_2355

I wanted to use a similar interface in one of my applications to represent the “given” and “received” counts for an item. To display the values, I created a custom Android control called KarmaMeter. The bar uses the color theme defined in the corresponding section in the Android design documentation.

karma-bar

The code for the control is given below. It’s implemented as a View and supports animating the changes between different values:

To set the value displayed by the bar (between `0.0f` and `1.0f`), you can either directly use the property KarmaValue/SetKarmaValue. Or, if you maintain a count of your positive/negatives values, you can use the SetKarmaBasedOnValues method.