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

1. You must have the latest version of Ultimate custom widget (UCCW) installed.
2. Download the Pages UCCW Theme app from Google Play Store or Amazon App Store.
3. If you downloaded the skin app from Amazon app Store and followed on-screen install instructions, you can jump to apply section below.
4. If you downloaded the skin app from play store, launch it from app drawer and tap "Install Skin" button in the app.
5. If your device is running anything below KitKat, it will ask you whether you want to replace the app. This step is replacing the skin installer with the actual skin. Tap "Ok" here. OR
6. If you are using a KitKat device, it will ask whether you want to update the existing app.
7. Tap "Install". When that finishes, tap "Done". Skin pack is now installed.

APPLY
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.

1. Long press on the homescreen > tap 'Apex/Nova Actions' > tap 'App Drawer'. Place the created icon at 2nd row, 1st column.
2. 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.
3. Similarly create shortcut icons for screen 2, 3, 4, 5, 6.
4. 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
5. 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.

1. Long press homescreen > tap 'widgets' > tap UCCW at the end > tap UCCW 1x4.
2. 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.
3. 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.
4. 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.
5. If you can't see the white circular shortcut icons, long press the widget and tap 'Send to back'.
6. Place another 1x4 size uccw widget on the screen in similar fashion.
7. 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.
8. 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.
9. If you can't see the white circular shortcut icons, long press the widget and tap 'Send to back'.

If there's gap between the two nav bars, do this -
Go to Nova Settings > Dock. Make sure "Enable Dock" is checked and "Dock as overlay" is unchecked under Advanced. Make sure "Dock Pages" has value 3 or more. Also note the "Dock height" value from here. (Apex should also have similar settings.)

Now, go back to the homescreen. You'll now have a dock. (i.e. the bar at the bottom which contains phone, msg, app drawer etc icons generally). Swipe the dock left or right. You'll get to an empty dock page. This being transparent, you won't see the dock now.

Having this dock enabled should close the gap between the nav bars. IF there are still gaps, change the value of the Dock height.
You can also change Nova settings > Desktop > Height Margin at this point to see which one fits best.


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.

1. Long-press the shortcut icon and tap 'Edit'
2. On the 'Edit Shortcut' pop-up, tap the icon
3. Nova 2.1 & higher - swipe to the leftmost page (Tab name - Gallery).
   Apex launcher - tap 'Select picture'.
4. Tap on your file browser here and browse to the location of the transparent png. Tap on the transparent png.
5. Nova 2.1 & higher - On "Crop image" window, simply tap the OK button. Apex users won't need / get this step.
6. 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.
7. 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.

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

HOTSPOTS
Assign apps to App cards

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

This completes the "Pages theme" setup. Here's the video showing all the instruction -



Here are some generic tips, troubleshooting steps and faqs.

Other awesome themes you might like -