Android Custom launcher with Liquid Crystal Display (LCD) theme

LCD home screen
If you're feeling nostalgic about the 60's Liquid Crystal Display (LCD) and you own an Android phone, you're in luck. The best thing is you don't have to root your precious phone to own this theme but of course, you will have extra nifty features (if you did it). I came across this fantastic home screen from Lifehacker, love at first sight!

The author, z3u5 has done a terrific job, a video tutorial is provided on mycolorscreen (using SSLauncher on HTC device). Below are the steps derived from Marco's Youtube description.  If you want some setup instructions for total noobs like me, please refer further down the article.

Part 1: Before you begin
These are the apps you will need:
UCCW: Custom clock widget
Elixir 2: Widgets
SS Launcher The Original (or Nova or GO Launcher)

Required for homescreen setup:
See the page's description for everything you need
Nexus 4 Wallpaper, SSLauncher Backup, PSD for extra Elixir 2 Widget Icons (Thanks Roger Morse):

Part 2: SS Launcher Setup
Now you can do this with either Nova/Apex or Holo Launcher, but it is a lot easier with SS Launcher. Also this screen was designed for the paid version (The Original) as some parts and options can't be chosen with the free version.

1. Drag all the widgets into the 'trash bin' at the top.
2. Go into the Menu - Preferences.
3. Enable Full Screen, Disable Scroll Wallpaper, Go back
4. Go into Menu - Theme - Label.
5. Enable Hide Labels, Apply Changes.

Or using Nova/Apex/GO:

• Grid Size 16x5
• 2 screen / Wallpaper
• Enable Dock
• Horizontal / Vertical margins none
• Resize any widget
• Overlapping widget

Part 3: Wallpaper Setup
Simply use the one that is provided for your phone. If it doesn't too well, try apps such as Wallpaper Wizardrii, Multipicture live Wallpaper or even Photo Editor.


Part 4: UCCW
To add the skins:
- Hold down on the homescreen - New Widget - UCCW - any size.
- In the main menu after tapping the widget, select "Open uzip", now just find where you pasted the folder and look for the skin you want to add.
- After it appears on your homesreen, resize it to the way it looks in the video.
- Add both the .uzips provided.
- Hold down on the skin, then tap the skin, this will allow for complete resizing and moving of the skin.
- You might have to re-position the skin's objects, see the link below for more info on moving objects as well as general UCCW tips.

More UCCW Tutorials
Turn Hotspots mode ON to prevent opening the editor each time.

Part 5: Elixir 2 Widget
Remember to add a 3x1 size.

*** Please Note: the backup only restores the toggles, not the icons. To change the icons, simply tap the Play Icon, customize icons. Then you just got to change each one of the icons that have been provided. It's quite easy to change and only takes a few minutes ***

Part 6: Shortcuts Setup
1. Hold down on the homescreen - New Shortcut
2. Under target - select your preferred app
3. Style - select the image that has no background but just an icon with text underneath.
4. Icon - Icon - Import - then import the folder that has all the icons in them, go back, then select your preferred icon.
5. Resize and position the icon as desired.
6. Hold down on the icon - Copy, then hold down to another area on the screen - paste.
7. Repeat for all shortcut areas.
8. Now hold down on each icon - Edit - Target - Select your desired app.
9. Repeat for all the shortcuts, for the app drawer icon, change Type to Page and Target to Applications.

--------   END   --------

If you're someone
- who has no idea how to use launcher, never heard of elixir 2 and uccw
- owns Samsung Note2
- prefers GoLauncher EX for some reasons

Please refer the steps below which I've spent one whole night to figure it out:

  1. Go to Play Store, download GoLauncher EX, UCCW and Elixir 2 - Widgets
  2. Download the All-in-One package which you can find from mycolorscreen to PC
  3. Extract the zip file content (LCD-all folder) and transfer it to your phone (/phone folder)
  4. Copy "Pixel LCD-7.ttf" from "/Phone/LCD-all/font" to "/Phone/GOLauncherEX/fonts"
  5. Open GoLauncher EX (you may set it as your default instead of TouchWiz)
  6. Hold and drag all the widgets into the trash bin which is located at the top
  7. Go to phone's "Menu" → "Preferences" to enter Go Launcher Settings page
    - check "Set as default launcher"
    - uncheck "Infinite Scrolling" and "High Quality Drawing" (prefer to have only 1 page as home screen)
    - "Wallpaper Mode" sets to off
  8. Click "Visual Settings"
    Under "Font" tab, do the following:
    - "App Labels Color" sets to #ff303225
    - "App Name Size" sets to custom size 10
    - Click on "Scan Font", then click on "Select Font", choose "Pixel LCD-7"
    Under "Backgrounds" tab, do the following:
    - "Wallpaper" → "Custom Wallpaper" → Gallery → LCD-all → lcd-wall-dock.jpg
    - None for "Dock Background"
    - "App Drawer Background" → "Custom Wallpaper" → Gallery → LCD-all → lcd-wall-nodock.jpg
    - Check "Blur Wallpaper"
    Under "Icons" tan, do the following:
    - Set "Icon Size" to custom size 96
    - Uncheck "Show Icon Base"
    - Leave the rest as it is
  9. Click "Back" to move on to "Appearance Settings"
    Under Home Screen tab, do the following:
    - Set "Grid Size" to 7 (rows) * 5 (columns)
    - Check "Show Status Bar"
    - Check "Show Icon Labels" (as you like!)
    - Uncheck "Show Label Background"
    - Set "Dock Row" as 1
    - Check "Show Dock"
  10. Press and hold at the empty home screen to bring up this menu
  11. Under "Add" tab, click on "Widget" icon and choose "UCCW 4x3"
  12. Press "UZIP" on the top right corner, choose "LCD.uzip". Place the hand cursor at the top of the home screen.  Click on "Touch here" to display the clock/weather widget.  You can then press and hold the widget to bring up the menu to resize.
  13. Open "UCCW" app, click on phone's "Menu" → "Settings"
    - Weather provider: Yahoo
    - Location: Choose Manual location, use cityid:xxxxxxx format else you might encounter invalid weather forecast (either empty weather icon or wrong city).  Do a city search in Yahoo! weather, the last 7 digits in the search result URL would be your city ID, e.g. "http://weather.yahoo.com/australia/victoria/melbourne-12707339/" 12707339 is city ID.
  14. You might find weird language above date text in the widget, that's actually day of week in Hungarian.  It will happen if you choose LCD.uzip, the author doesn't provide uzip for LCD-v1.1.  The only workaround I can think of is copy "magyar1.ctxt" from "/Phone/UltimateCustomClockWidget\LCD" folder to PC.  After changing all the Hungarian days into English, replace the original file in your phone. e.g.
    { "ID": 0,
    "name": "Sunday",
    "value": "Sunday",
    "value1": "",
    "value2": "",
    "value3": ""
    }, ...
  15. Next is to create a shortcut bar for phone settings with Elixir 2.  Repeat step 10, under "Add" tab, click on "Widget" icon and choose "Elixir 7x1"
  16. In the "Elixir 2" settings page, you will see 7 big X's at the top.
    - Click on the 1st X and choose "Hide" in the list, do the same to the last X.
    - Click on the triangle icon at the top right menu, choose "Customize icons", assign the icons according  ly in "LCD-all/icons/switch icons" folder in "Gallery. I replaced (from left to right order as shown in the first image):  [gps_on, gps_off], [mobile_data_on, mobile_data_off], [wifi_go_on, wifi_go_off], [autosync_on, autosync_off], [autobrightness_on, autobrightness_off]
    - Exit icon customization screen and proceed with assigning types to widget
    - Click on 2nd X, choose "GPS toggle" (you should see the icons are updated to the ones you've chosen earlier)
    - Click on 3rd X, choose "Mobile data toggle"
    - Click on 4th X, choose "Wi-Fi toggle"
    - Click on 5th X, choose "Auto-sync toggle"
    - Click on 6th X, choose "Auto-brightness toggle"
  17. When Elixir widget is configured, click on triangle icon again, choose "Backup widget data"
  18. - Assign a name to this widget
    - Choose "custom image" as Background type
    - Choose "lcd-elixir-bkg.png" in "\switch icons" folder in Gallery as background image.
    - Drag to the right end for "Background Transparency", "Icons Transparency", "Icons Size".  Uncheck "Maximize icons without label"
    - Check "Hide toggle labels"
    - Click "Backup" and "Create"
    - Drag the widget to the bottom of home screen, just above the dock
  19.  Change dock icons
    - Press and hold one dock icon, choose "Replace", click the left icon on the top right bar to bring out the Gallery, choose one from "\dock icons" folder
  20. Refer to the icons available in "\icons" folder in Gallery.  Drag those apps from App Drawer to the home screen.  Change the icons with the same method as step 19.
Done, hope you enjoy the new home screen.

UPDATE 20130516
Q: Why weather icons are still not showing up even though I entered the correct city ID?
A: Check Yahoo! weather API's condition codes here.  Compare the codes to the weather icons in your widget folder, in this case, it's "\Phone\UltimateCustomClockWidget\LCD\LCD".  You can either create your own icons or just copy and paste from the existing ones, rename it.

4 comments:

  1. hey! thanks for this, really helped with the days of the week!

    i still cant get location to work though, auto location makes it blank and when i type cityid:1099805 (adelaide), on the widget it just says cityid:1099805 isntead of adelaide australia?? any ideas?

    also, weatehr icons still aren't showing up. i had a look in Phone\UltimateCustomClockWidget\LCD\LCD and they are all there?

    thanks again

    ReplyDelete
    Replies
    1. Hey Ethan,

      It seems that the latest version of UCCW fixed this issue. Uncheck "Auto location", in Manual location, put "adelaide, australia". I've tried and it works fine.

      Weather icons do not cover all the weather types in the original bundle. What you can do is browse to that folder, make a copy of an existing icon and then rename it. For example, isolated thunderstorms (code: 37) and scattered thunderstorms (code: 38, 39) icons could look the same as thundershowers (code: 45).

      Delete
  2. Any additional icons? I could not find some essential icons such as Contacts, Twitter, Path, Flipboard etc.

    ReplyDelete
    Replies
    1. Twitter is included in the bundle. Someone did request for those other icons you mentioned but there's no reply from the author. Maybe you can just assign those unused icons to your preference.

      Delete