Dreamer

I want start by saying thanks to everyone who checked out my last post. I hope everyone who followed the tutorial or download the templates turned some heads rocking that home screen. Of course, we all know our devices can't stay with one look for long. So without any further ado, I'd like to introduce:

Dreamer

You better clear your calendars, kids. Weighing in at just widgets, this theme is a force to be reckoned with. Aside from the clock widget and app drawer shortcut, each piece has something special. It's the little things, really.

Here we go...

As always, you'll need Zooper and Tasker. You'll also need to download (if you haven't, of course) Media Utilities. You just need it. Trust me. You're always going to need it. You might also want to check out Album Art Grabber. It's extremely useful, although not entirely necessary if you're not lazy like me. Also, since you all read my last post and downloaded AutoNotification, I won't need to leave a link to it here...or here. Oh and Nova Launcher. Prime.

Make sure you have labs enabled (again), 16 x 9 grid and no margins. Disable dock, status bar, and find a way to get rid of that navigation bar (if you have one).

You also need to open up Media Utilities, grant Notification Access, and check off Zooper, all the experimental features, and change the cover art size to 720 (or whatever your horizontal pixel count may be on your device).

Clock and Battery Widget

At the top of the screen, add a Zooper widget and resize it to 9 x 1. Set the widget background to #ff444444. Add a rich text module, center left anchor, and X offset at 10. Font family is Roboto-Light, size is 20 and change the text to:

#Dhh:mm#[s=15]#Da#[/s]

Set the blur to 25 and the shadow's X and Y offsets to 5 each.

Now add another rich text module, center right anchor, and X offset to 10 as well. Use the same font family and size as above, but change the text to:

#BLEV#$#BSTAT#!=Discharging?+$

Same blur settings as above too, except the X offset is -5.

I've also set the module OnTap action for the time to open the clock, the battery opens the battery stats settings shortcut and I've disabled the OnTap action for the widget.

Done!

App Drawer

This widget is 9 x 1 as well, with the same widget background colour, #ff444444, except we're putting it at the bottom of the screen. Add a rectangle with a center right anchor. Set the width to 41 and the height to 40. Set the colour to #ff000000, and set the blur to 50.

Next, add another rectangle with the same anchor, no offsets, width and height to 40, and colour set to #ff444444. Set the OnTap action for this one to the Nova Launcher, App Drawer action.

Finally, add a text module, set the X offset to 10, change the font family to Roboto-Bold, change the text to ... , and set the font size 25. Set rotate to 90, blur to 25, and shadow X offset to 5. Disable the widget OnTap action then we'll move on to the next one.

Album Art

This is where Media Utilities comes in. First, download the awesome wallpaper here. Once you've done that, add a bitmap module and select the wallpaper for your bitmap image (you can use a different one if you like, I don't mind). Set the screen anchor to center top then scroll down to advanced parameters and input the following text:

$#TMU_ISPLAYING#=1?[b]#TMU_COVERART#[/b]$
$#TMU_ISPLAYING#=1?[oy]-50[/oy]:[oy]0[/oy]$

These two lines will check if music is currently play and change the image to the album art and shift it upwards a little bit.

Next, we'll add a rectangle, anchored at screen top, Y offset to -9, with a width of 37 and a height of 10. Change the colour to black (#ff000000) and set the blur to 50.

Go back, long-press on the rectangle you just created, tap the overlapping rectangles with the little + in them, and change the screen anchor to center bottom. This creates an exact replica of the rectangle you just created, but puts it on the bottom instead. I've renamed the modules Shadow Top and Shadow Bottom just so I could tell the difference, but you don't need to do that.

Now we'll add a progress bar. Set the anchor to bottom left, then scroll down to edit the progress min/max values. Make sure Min is set to 0, change Value to #TMU_PLAYTIME#, and Max to #TMU_TRACK_LENGTH#. This creates a moving progress bar that will follow the current song you're listening to. Neat!

Keep the FG colour white, but set the BG colour to #00000000 (100% transparent). Set the width to 360, height to 5, blur to 50, and change the shadow colour to white (#ffffffff). This makes it look like it's glowing.

Then you'll want to move on to advanced parameters to input this string:

$#TMU_ISPLAYING#=0?[oy]-50[/oy]:[oy]0[/oy]$

This will cause the progress bar to hide when there isn't any music playing.

Finally, we're going to add another rectangle with an anchor on the bottom left, Y offset at -5. Turn the corners up to 10, or 20, or anything higher than the height and width, then set the blur to 50, and shadow colour to white. That's going to glow too. Time for more advanced parameters:

$#TMU_ISPLAYING#=0?[oy]-50[/oy]:[oy]-5[/oy]$
[ox]$((360/#TMU_TRACK_LENGTH#)*#TMU_PLAYTIME#)$[/ox]

The first line will hide this rectangle (now a circle) when music isn't playing. The second line will cause the circle to move along the bottom of the screen as the song progresses.

Finally, finally, set your OnTap action to open whichever music player you normally use (you might have to switch if it's not supported by Media Utilities. Sorry guys).

Next!

Now Playing

As you can probably see, I've added a few songs since the screenshot at the beginning of this article was taken, but that's beside the point. Set the widget background colour to #ff444444 and add a rich text module. Change the module OnTap action to the Play/Pause Media Utilities shortcut, and scroll down and change the text to:

$#TMU_ISPLAYING#=0?Tap here to play music
[sr=0.5](#TSONGCOUNT# Songs)[/sr]:#TMU_TRACK#
[sr=0.5]#TMU_ARTIST# - #TMU_ALBUM#[/sr]$

This will display 'Tap here to play music' with the number of songs available on your device shown below. I haven't tested this, but in order for this to work I made sure all my music was copied loose into the Music folder on my device and not organized in artist or album sub-folders. When music is playing it will display the song title with the artist's name and album title below.

Set the X margin to 175 (your device may require a higher/lower number), font size to 20, font family to Roboto-Light, and blur to 25 with shadow Y offset to 5. In advanced parameters, enter this:

$#TMU_ISPLAYING#=1&&#TTRACKNAMELENGTH#>25?[s]15[/s]:[s]20[/s]$

This will resize your text if music is playing AND (&&) the track's name length is greater than 25 characters.

Next create a text module with a center left anchor, X offset of 10 and Y offset of 5. Change the module OnTap action to the Previous Track Media Utilities shortcut and change the text to <. If you long press the < key on your keyboard you can select the more vertically stretched/horizontally squashed version that I used in this widget. Set the font size to 50 and family to Roboto-Thin. Change the blur to 25 and shadow Y offset to 5...again. In advanced parameters, input:

$#TMU_ISPLAYING#=0?[ox]-50[/ox]:[ox]10[/ox]$

This will, as above, hide the arrow when the music isn't playing. After that, clone the module, change the < to > and module OnTap to Next Track Media Utilities shortcut.

Done.

Almost there...

Google+ Feed

Last one, then on to Tasker.

Start by changing the widget background colour to #f333333. The first two modules are rectangles anchored in the center on the top and bottom with Y offset at -9. The width is set to 370 and height stays at 10. Change the colour to black (#ff000000) and set blur to 50.

Next add a rich text (or plain text. Sorry, force of habit) module. Set the anchor to top left, X offset to 20, and Y offset to 15. Change the text to say Google+ Notifications: and set the font size to 20 and font family to Roboto-Light. Blur, of course, to 25 and shadow Y offset to 5.

This next one needs to be rich text. Screen anchor is top left as well, X offset to 20 and Y offset to 60. Change the text to say:

[b]#TGPLUSTITLE1#:[/b]
[tr=50]#TGPLUSTEXT1#[/tr]

[b]#TGPLUSTITLE2#:[/b]
[tr=50]#TGPLUSTEXT2#[/tr]

[b]#TGPLUSTITLE3#:[/b]
[tr=50]#TGPLUSTEXT3#[/tr]

Change the X margin to 40 and lines to 10, font size to 15 and font family to Roboto-Light. Set the blur to the standard 25 and shadow Y offset to 5 (did I even need to say?)

Oh yeah...add a quick rectangle, center top anchor, Y offset to 50, width at 330 and height at 1.

Set the widget OnTap action to open Google+ and BAM we're done. How about a break? 'Cause I'm like this right now...

TASKER TIME! LET'S PARTY!!!

Create a profile called Get Track Name Length and choose the plugin state, Media Utilities State Play State Updated. Create a new task and give it the same name. Add If and change it so %isplaying ~ true. Then add the Test action, change type to variable length, data to %track, and store result in %TRACKNAMELENGTH. Add an else task, then variable set with the name set to %TRACKNAMELENGTH and To to 0. Then add List Files in Dir Music/ and store the result in %SONGNAMES. Add a variable set action and set %SONGCOUNT to %SONGNAMES(#). Next, add the Zooper Widget Pro Variable plugin and set ZW variable to SONGCOUNT and ZW text to %SONGCOUNT. Add an end if action, then add another Zooper Widget Pro Variable plugin action to set ZW variable to TRACKNAMELENGTH with ZW text to %TRACKNAMELENGTH.

Next add another profile called Get New Track Name Length and choose the plugin state, Media Utilities State New Track, then choose the Get Track Name Length task.

Finally (Yeah, I thought there would be more too), add an AutoNotification Intercept plugin state for Google+ for created notifications only, notification app set to Google+, and package name set to com.google.android.apps.plus. Name it Google+ Feed and let's begin the task construction.

Add the array push and set the name to %GPLUSTITLE, position 1, withe the value %antitle. Clone that action but change the name and value to %GPLUSTEXT and %antext. After this, add 2 Zooper Widget Pro Variable plugin actions; One with ZW variable to GPLUSTITLE1 and ZW text to %GPLUSTITLE1, and one with GPLUSTEXT1 and %GPLUSTEXT1 (noticing a pattern here?). Clone these actions a couple times and replace the 1's with 2's and 3's so your final result matches the screenshot above, then add a variable clear action to clear %GPLUSTITLE(3:), clone THAT and make the new one clear %GPLUSTEXT(3:).

That's it! We're done. Holy crap on a stick, no wonder I split the last one up. That was a trek. Congratulations, you are now a Dreamer too! As a reward for having gone through this lengthy and probably tedious tutorial, here's a link to everything. So you can compare what you've done with what I've made.

As always, thanks for reading, and feel free to +1, share, comment, or complain. See you next time!