Pages theme for Android

Created a theme based on yihaomizhijia’s screen setup named “Rainbow”.
Default android screen full of app icons is too much to handle sometimes. Even if you place apps in categorized folders, you spend 3-4 (or more) seconds in locating that folder on screen when you need it. For a better screen management, check this out.

5 screens. Each screen dedicated to one category of apps. Favorites, Communication, Social, Media, Tools.
Each screen holds 4 app cards. 20 cards to choose from. Browser, Camera, Chat, Facebook, Files, Gallery, Instagram, Mails, Maps, Music, News, Phone, Settings, Store, Tasks, Text, Twitter, Voice, Weather, Youtube.
1 special screen to hold your other widgets.
Jump from any screen to any other screen easily by tapping the category buttons at the left of each screen.
No special wallpapers needed. Any white wallpaper will do.

Sounds good? Super good you say? Let's get to it then.

== INSTRUCTIONS ==
To use this skin, you have to install, apply and edit/assign hotspots to the skin.

INSTALL

Download the Pages UCCW Skins from play store. This is a skin installer. Launch the "Pages UCCW Skins Installer" app from app drawer and tap "Install Skin".
Next screen, tap "OK" for "Replace app?".
Next screen, tap "Install". When that finishes, tap "Done". Skin is now installed.
Install and Edit instructions can be seen in this video - http://www.youtube.com/watch?v=gSf0fcCNktk

APPLY
You must have Ultimate custom widget (UCCW) 2.5.6 or higher installed.
Recommendation -

Use Nova/Apex launcher. Six screens. Grid size 8x5. Vertical (height) and horizontal (Width) margin = None. Dock as overlay and hidden. Top and bottom shadow - disabled. Widget overlap enabled. Solid white wallpaper.
On Galaxy S3, Nexus 4 etc high resolution devices - don't overlay/hide the dock. Instead, add a blank page to the dock and switch to that.
If the bars and cards are still not lining up properly, use different combinations of Vertical (height) and horizontal (Width) margin values.

Place Drawer and page jump shortcutsFirst thing you wanna do is place the "app drawer" and "Jump to page" shortcuts on all pages.

Long press on the homescreen > tap 'Apex/Nova Actions' > tap 'App Drawer'. Place the created icon at 2nd row, 1st column.
Long press on the homescreen > tap 'Apex/Nova Actions' > tap 'Jump to page' (only in Nova) > tap 'Screen/Page 1'. This will create a shortcut icon for jumping to screen/page 1.
Similarly create shortcut icons for screen 2, 3, 4, 5, 6.
Here's where on the screen to put these icons -
Screen 1 shortcut - 3rd row, 1st column
Screen 2 shortcut - 4th row, 1st column
Screen 3 shortcut - 5th row, 1st column
Screen 4 shortcut - 6th row, 1st column
Screen 5 shortcut - 7th row, 1st column
Screen 6 shortcut - 8th row, 1st column
Do all the above steps on all 6 screens.

Place side navigation bars Now you want to give all the icons the colorful background as see in the screenshots. The colored nav bar is made up of 2 Pages-bar skins.

Long press homescreen > tap 'widgets' > tap UCCW at the end > tap UCCW 1x4.
This will open the skins list. Skins downloaded from play store will show up ONLY HERE. Tap on any skin and it'll be applied to the widget.
List of which skin to select -
Screen 1 - Pages-Bar1a
Screen 2 - Pages-Bar1b
Screen 3, 4, 5, 6 - Pages-Bar1

We'll call this the top nav bar.
Then long press the widget > tap 'Resize' and resize them in a way so that the last 3 blocks of the "top nav bar" overlap the first three shortcut icons you placed previously. (i.e. app drawer, screen 1, screen 2). Watch the video starting from 14:08 to see what I mean.
If you can't see the white circular shortcut icons, long press the widget and tap 'Send to back'.
Place another 1x4 size uccw widget on the screen in similar fashion.
List of which skin to select -
Screen 1, 2 - Pages-Bar2
Screen 3 - Pages-Bar2a
Screen 4 - Pages-Bar2b
Screen 5 - Pages-Bar2c
Screen 6 - Pages-Bar2d
We'll call this the bottom nav bar.
Then long press the widget > tap 'Resize' and resize them in a way so that the entire "bottom nav bar" overlaps the last four screen jump shortcut icons you placed previously.
If you can't see the white circular shortcut icons, long press the widget and tap 'Send to back'.

Make shortcut icons transparent At this stage, all the shortcut icons you had placed are visible on top of the nav bars. Icon of each of these shortcuts need to be replaced with a transparent icon. Save this transparent png (mirror) on your sdcard.

Long-press the shortcut icon and tap 'Edit'
On the 'Edit Shortcut' pop-up, tap the icon
Nova 2.1 & higher - swipe to the leftmost page (Tab name - Gallery).
Apex launcher - tap 'Select picture'.
Tap on your file browser here and browse to the location of the transparent png. Tap on the transparent png.
Nova 2.1 & higher - On "Crop image" window, simply tap the OK button. Apex users won't need / get this step.
You'll be back on the 'Edit Shortcut' pop-up with the icon gone transparent. Apex users tap OK here. Nova users tap the checkmark at the top left corner.
Do this for all 6 shortcuts on all 6 screens.

Place app cards and widgetsFirst five of the six screens will have 4 app cards each. Each of these app cards will launch the assigned app. Sixth screen is for other widgets.

Place a UCCW widget of 4x2 size on the screen. Select any of the "Pages-*" skins. (other than Pages-Bar* )
This creates what I'm calling an app card. Place other app cards on all screens in similar way.
Place any other widgets like Gallery, YouTube, Play Music etc on the sixth screen.

HOTSPOTS
Assign apps to App cards

Launch UCCW app itself. Tap Menu, tap "hotspot mode" and tap 'OFF'. UCCW will exit.
Now tap anywhere on the app card. It'll open in uccw edit window.
Scroll through the components in the bottom half of the screen. There's only one hotspot in each of the app cards.
Tap 'hotspot 1' > tap 'Apps' > tap on the app you want to assign.
You can change shape colors and text colors from this window as well. This applies to nav bar skins too.
When done, tap Menu > "hotspot mode" and tap 'ON'. UCCW will exit.
Your changes will now be applied to the widget.