Best daily deals

Links on Android Authority may earn us a commission. Learn more.

Android customization - Gmail and SMS message counts on your Homescreen with Zooper Widget

Add custom message counters for Gmail and SMS to your Homescreen using Zooper Widget in this weeks Android customization post. Just say "No" to that old red dot counter on your app icons.
October 23, 2014
Zooper Widget Gmail SMS Count

Continuing with notification management tools in our Android customization series, we will be using Zooper Widget today to build a simple Gmail and SMS counter for your Homescreen.

Last week, we took to notification management by using Tasker to popup a simple read-only alert for all incoming notifications to your device. Today’s approach works great along side the notification popup, adding a counter of specific notification types.

Zooper Widget is capable of handling a few messaging tasks, but has made it really simple to add Gmail and SMS counters to your custom widget. We will start with these two service today, then we’ll expand on the project next time, to include any app or service you have installed on your device.

Before we get started

Get it on Google Play Button
You will need Zooper Widget installed on your device for today’s project. Zooper Widget free will work, but again, it has limitations. You may consider dropping the $2.49 in the Google Play Store for Zooper Widget Pro if you wish to implement everything as we will in this project.

A little background before we get started: I am going to show off today’s project in several different ways, but I will only cover the new material once. You may need to head back to previous Zooper Widget tutorials to get an idea how you might handle each of the examples and what elements are available to you.

My primary Gmail widget is the basic gmail app icon, when a new message arrives, an additional image and text pops onto the screen. The other examples will include pure text, the boring old red dot counter and simply having the letter “G” popup when the time is right. Again, these are all near identical, just a touch of different code in the Advanced Parameters.

Zooper Widget Gmail SMS Count

Set up your base widget, for my personal usage, I have the app icon as the main element in my widget, it is clickable into Gmail itself, and I was sure to leave empty space within the actual widget area for both the pop up notification and as my way to click into the Zooper Widget setup screens.

There are two elements that are to be adjusted, the little popup image or red dot and the text counter.

For this, let us use the red dot example. I would have used my actual bitmap image popup as example, but I do not have permission to share the icons I’ve used (3K SR Black icon set.)

Again, I will leave it to you to design the widget, create your dot, or image, then size and position it appropriately. Take note of the X Offset value. We did this stuff back in this Zooper Widget tutorial, if you need help.

Now, create your text element, manually change it to a value like 10 for now so you can size and position it appropriately.

Once everything is looking good from a design perspective, we’ll go into the advanced stuff, as follows:

You remember your X Offset value from above, right? Good. Head on into your Red Dot.

Zooper Widget Advanced Gmail Notification

Scroll to the bottom and enter Advanced Parameters.

Enter the following code:

Replace “20” with your X Offset Value.

Tap the checkmark in the top right to save and exit Advanced Parameters.

Tap the system Back button to exit back to the Module Manager.

Zooper Widget Advanced Gmail Notification Text

Head into your Text element.

Scroll down a short ways and tap into Edit text manually.

Enter the following code:

$#SUG#>0?#SUG#: $

Tap the checkmark in the top right to save and exit the text editor.

Tap the system Back button to exit all the way out of Zooper Widget. That’s right, project complete.

What happened up there?

If you followed along previous Zooper Widget tutorials that worked with Advanced Parameters, including the Weather Warning system from a couple weeks back, then you might be able to guess your way through this one.

Once again, we utilized the IF statement for our string. #SUG# is the check for messages in your first Gmail account inbox. If you wish to see more options on that one, #SUG# and related live within the System section of Advanced Parameters. The only other new trick here is the blank text at the end of the Text element string – #SUG#: $ With the space ” ” after the colon, Zooper knowns to put nothing on screen.

As pseudo english, for the Red Dot we said IF Gmail message count is greater than 0 THEN position the red dot in view, ELSE position it ten thousand pixels off the screen. For the text string, IF Gmail message count is greater than 0 THEN show the message count, ELSE show nothing. I hope that made sense.

This is going to possibly be one of the shortest step-by-step tutorials that I ever write:

Using the same steps and code as in the Gmail tutorials above, change just one small thing – use Advanced code #SUSMS# instead of Gmail’s #SUG#. That is it, the SMS counter is pretty simple, once you’ve gone through the Gmail one.

What’s next

Now that you’ve got the hang of things here, go ahead and adjust the basic code above to work for the other Zooper Widget elements that you might like to use. I showed off the letter “G” popping up on screen, I assume you might want that embedded into another widget on your screen instead of a dedicated widget. Don’t be afraid to play with it and show off what you come up with.

You may also desire to tackle notifications for other services on your device. Although there are things that can be done within Zooper Widget alone, I have never bothered trying. Instead, I find that Tasker adds that extra functionality and customization. What do you know, we will be doing just that next week.

Next Week

Custom Notification Count Zooper Widgets

Gmail and SMS are a great start, but there are plenty of other messaging services that most of use. Next week on our Android customization series, we’ll take today’s tutorial to a whole new level. Utilizing Tasker, we’ll show you how to collect notifications from any app and display a counter on your Zooper Widget. By request, this will dive into Variables – that’s you Waterdroid – for both Tasker and Zooper Widget. Bring your thinking caps, it’s going to be a big one.

That is two rather simple projects in a row, don’t worry, they both lead into the big one for next week.

Any ideas on improving this project? Please show off your creations in the comments below, we love to see what you come up with.