Android Customization Battery Indicator Zooper Widget

Last week on our Android customization series we took a look at how to manage your keyboard on your Android device. Then, Joe came along and shared the 15 best keyboards for Android. Obviously, we want you to embrace your customization abilities on your device.

This week, I had suggested we might start talking about managing Location settings as a means to reduce battery consumption on your device. I must change gears and save Location settings for another time. I have been asked to take a quick look at how to change colors of elements and manage other notifications through Zooper Widget.

Today, we will try to keep it simple, I will show you how to change the color of a battery indicator based on the power status of your device.

Before we get started

You will be able to follow along today with just the free version of Zooper Widget from the Google Play Store, but do keep in mind that there are limitations and you’ll need to dish out $2.49 for Zooper Widget Pro if you wish to take things to the next level.

Now that you have Zooper Widget installed, create a widget that includes a battery indicator. If you are unsure how to do this, head back to one of our previous Zooper Widget tutorials. You might start with our full guide to all things Zooper Widget, or just take a look at the clock widget that kicked off our entire Android customization series.

Zooper Widget battery indicator color

Before we do any work, let’s look specifically at what we are doing here today. I have a Zooper Widget setup on my Homescreen that has my battery level as a number. For today, I’ve added an icon too, just for effect. Normally, the battery icon is white. From there, I want two things:

  1. When my battery level drops below 15%, make the battery icon change to the color red
  2. When I plug in the charger, I want the battery icon to turn green

Let’s get started

Head into your battery element of your Zooper Widget.

Scroll all the way to the bottom and tap on Advanced Parameters.

Zooper Widget Icon Advanced Parameters

I am sure you followed along our previous Zooper Widget Advanced Parameters tutorial, so you are somewhat comfortable with what you are looking at here.

Let’s organize our logic, we want the battery indicator to be white normally, red if battery is low and green when charging. There are a few ways to create the string for your Advanced Parameter, we previously looked at using the IF statement layout, so let’s do that again.

As a refresher, the IF statement in Zooper Widget looks like this: $X=Y?Z:W$ In plain English, that is: IF this equals that, then do this, or else, do that.

We have need for two IF statements today, and we will need to nest them to get our desired results. When nesting IF statements, it is sometimes best to start from the end, let’s do that, starting with the green power indicator.

$#BSTATN#=2?[c]00FF00[/c]:[c]FFFFFF[/c]$

IF Battery Status = Charging, then make icon color green, else leave it white.

Now we create the red color for when the power is below 15%.

$#BLEVN#<15?[c]FF0000[/c]:[c]FFFFFF[/c]$

IF battery Level is less than 15, then make the icon color red, else leave it white.

Now comes the tricky part, nesting these IF statements together. I will just give you the string, then we’ll look at what happened.

$#BSTATN#=2?[c]00FF00[/c]:$$#BLEVN#<15?[c]FF0000[/c]:[c]FFFFFF[/c]$

Zooper Widget battery Advanced Parameters

You’ll notice in the screenshot that I’ve used 20% as my battery level threshold, and that I used a slightly different shade of red, at FF2222. I hope it illustrates how you can change things up as well.

Basically, what I have done here is tell Zooper that if the phone is plugged in, make it green, else, if it’s not plugged in, check to see the battery level and make it white or red as needed. The double $$ is required to signify that a nested IF statement is to be evaluated. Finally, by having the very last result set as white (FFFFFF), I was able to eliminate the duplicate [c]FFFFFF[/c] entry.

Hit the checkmark in the top right corner to save your Advanced Parameter.

Tap the system Back button to save and exit all the way to the Homescreen. Give your new widget a go.

What’s next

I am certain that was a little much to grasp the first time through, however, I want to throw a few more things at you. First, let’s look at color values, then let’s look at alternative configurations.

Throughout all of the Android customization tutorials you have worked through with us, I have represented colors in full Hex form. That is the strings of six digits with characters ranging from 0 to F. Today we used FFFFFF (white), FF0000 (red), and 00FF00 (green). For each of these, we could have used a shorthand, which would be FFF, F00, 0F0.

The art of nesting IF statements is not the most efficient nor necessarily easiest to explain after the fact. Zooper Widget takes Advanced Parameters to a whole new level with alternative string methods. We don’t have the time to look at that in detail today, so I’ll just throw an example at you:

The following string was taken straight from the Zooper.org archives and will make it so that your battery icon is red when your power is below 10%, yellow when your power is 10%-20% and green when your power is greater than 20%.

[c=$#BLEVN#<=10?F00$$#BLEVN#>10 && #BLEVN#<20?FF0$$#BLEVN# >= 20?0F0$]#BLEV#[/c]

Next week

We will continue to look at battery saving techniques and technologies as our Android customization series continues. We plan to revisit the Location services topic, but must warn you, recent versions of Android offer rather limited automation functionality around Location services. We have a bit of a clunky workaround, but we’ll eventually have to take root actions to get things as smooth as can be.

Any Zooper Widget users out there care to suggest a cleaner solution to changing battery indicator colors?