Sunday, July 7, 2013

Pullin' Out: Clean, Functional UCCW Sidebars

for a full size preview click here

Okay, since some people found something dirty with my last theme's name, "Tucked Away", I figured I'd name this one something that couldn't possibly be misinterpreted.

This isn't really a theme like the others. I don't usually get a chance to use full screen wallpapers because I'm always completely redesigning my phone's UI. This was a good way for me to incorporate all of the things I need on my phone and still be able to show off my wallpaper.This really only uses UCCW and a couple of Nova Actions so this tutorial is mainly how to tweak it for your own needs.


Nova Launcher
ZIP File
Photoshop or other image editing software (if you want to change the shortcuts)

Editing the PSDs:

First thing is first, you'll need to tweak the sidebars to show the apps that you use most. You can see I've got my Google Apps on the left and Music, Photo, and Social on the right. In the PSDs, all of the layers are seperated so that you can easily change the headings, icons, and app titles. You can even change the length of the dividing lines in case your headings are a different length than mine. Everything falls on the gridlines so make sure you snap to them.

The font you'll need for editing the PSDs are all in the Roboto family, and the icons are based off of my Shapely White Icons. If you want you can change the icons to something else or delete them completely and just drop you own icons on top of the sidebar.

You may have already noticed that there is no phone or messaging icon. Don't worry about wasting room on these. The notifications provide hotspots for phone, messaging and gmail. The clock at the top provides hotspots for the clock and calendar.
After you have everything looking good, save it as a PNG.

Move files to your Phone:

  • The sidebar PNGs, wallpaper, and arrow icon PNGs can go anywhere on your phone
  • The UZIPs must be on your phone's internal storage. I suggest in the folder 'uccwOutput'
  • the weather icon folders go in 'Phone>UltimateCustomClockWidget>weather'

Setting up the Widgets:

If you haven't made any adjustments, you can skip this step. IF you have made changes and created a new PNG, you'll have to make some changes to the UZIPs. Open them up in UCCW and change image 1 to your new PNG. Now you'll have to adjust your hotspots. on the right, you've got 12 hotspots, one for each app going down the line. Pretty simple. The left side's hotspots are:

  1. Clock*
  2. Calendar*
  3. Phone*
  4. messaging*
  5. gmail
  6. google now (on google heading)
  7. chrome
  8. drive
  9. maps
  10. youtube

*you may also want to double check these to make sure your phone's stock apps use the same activity name.

Placing everything:

  • Set Nova Launcher to 9x16 grid, no margins
  • Place UCCW widgets and resize to 6x16 on left and right screens
  • Place 'jump to page x' Nova actions and change icons to the arrows
  • Change animation to none so the sidebars "slide" out

A few final notes:

  1. If you want white sidebars, open the PSDs and on each layer hit ctrl+i to invert the colors. The arrows and weather icons come in black and white.
  2. While I like the weather icons I've made, I'm going to redo them and tighten things up a bit. When I do update them, I'll create a seperate post for them with a new download, so be checking back.
  3. There isn't suppossed to be a gap between the sidebar and the edge of the screen but I figured it wasn't too distracting so I'd let it slide. If you know of a fix, feel free to leave it in the comments below.

1 comment:

  1. Hey man, unable to download the ZIP file for this them. Im totally loving it and would like to use it, mind emailing me the ZIP?