Creating a Zooper Media Widget with Media Utilities

Zooper widget is an Android app that allows you to completely customize your homescreen. It is simple to use, but also very powerful. Together with other 3rd party apps, the only limitation I’ve discovered is my own lack of creativity. Today I’m going to take the opportunity to walk through how we can build a Zooper Media widget using Media Utilities and Zooper.  (Note: I’m currently using Nova Launcher, but any launcher including Stock will work)  You will need the following versions of the plugins.

After installing the necessary apps, we’ll go ahead and set up Media Utilities to work with Zooper.  To do so we’ll first open the Media Utilities app, press on the menu button and open the settings.  In the settings menu, it is important to select the following checkboxes and then back out of the settings menu.

  • Application Integration >> Zooper
  • Experimental Features >> Make coverart available

Media Utilities Settings

At this point I’m going to assume that you know the basics in creating a Zooper widget.  If this is not the case, please look around the site for basic information/tutorials.

Below is a short list of some Media Utilities Variables and a brief description of each.  I will only be using a few in this tutorial (bolded), so you’ll have to go out there and play with the others and unleash the power of a Zooper and Media Utilities combo. If you’d like to view a complete list of the available variables, hop on over to my Media Utilities Variable List.

  • TMU_ALBUM – Album name
  • TMU_ARTIST – Artist name
  • TMU_TRACK – Track name
  • TMU_COVERART – URI to Bitmap containing current Coverart
  • TMU_ISPLAYING – 1 if playing 0 if not
  • TMU_CURR_APP – Current media app “pretty” name (i.e. Google Play Music, Pandora, Slacker, etc…)
  • TMU_CURR_PACKAGE – Current media app package name (

When you are ready to start editing the widget go ahead and tap the widget area.  Select Empty from the list of options.  We now have a blank, empty widget that we can work with.   Now we’ll start adding our modules and building our widget.

First select the Layout menu and then press the ‘+’ button in the upper right corner.  Next we’ll select a rectangle and build a base for our widget.  Go ahead and build the rectangle to your preferences.  Next we’re going to add the text for the Song MetaData (Artist, Album, Track, Coverart).

  • Text >> Edit Text Manually – Enter the following “Artist: #TMU_ARTIST#Artist
  • Now create 2 more Text Modules replacing the Text with the following
    • Album: #TMU_ALBUM#
    • Track: #TMU_TRACK#

To create the coverart, add a new bitmap module.

  • Advanced >> Advanced Parameters – Enter the following “[b]#TMU_COVERART#[/b]Coverart
  • You may need to scale the object to get it to fit.

To create the Next, Previous, Play, and Pause buttons we’ll add 4 bitmaps.  After selecting the desired bitmap and moving it into the desired position make the following change.

  • Widget OnTap Action >> Module On Tap >> Shortcuts >> Media Utilities Action >> Respective Action

Shortcuts-Actions Media Utilities Actions

We now have our very own custom media widget.  You’ll notice that I mentioned 4 bitmaps earlier (Previous, Next, Play and Pause), however there are only 3 control bitmaps in the widget.  There is a little trick that you can apply that will allow you to swap out bitmaps depending on a certain MU variable.  I leave this with you as a challenge.  After all, we all learn more through trial, error and experimentation. I haven’t discussed any of the Advanced Parameters and the great stuff that you can accomplish with them, so get out there and try new things.  As I said before, the limits are probably your own imagination.

Final-Media

***Note: This tutorial will not apply to ALL media players.  Some media players don’t supply all of the data in their API.