About a month ago, XDA-Devs member newone757 created a really great theme based on the one used in Windows Phone 7 - hence the name, Android Phone 7. He was kind enough to post the image files, a template image, and a short how-to, as well. I've taken the personalization a step further and created icons to fit my needs, and now it's your turn.

This theme was made for, and written using, a high resolution device (EVO 4G - 800x480). It hasn't been tested at lower resolutions, although it should work. For lower resolutions, you may want to consider using fewer icons on each screen or manually resizing them in Photoshop once Part 2 is available.

Setting The Mood

Estimated time required: 30 minutes

Difficulty: Low

ADW.Launcher or Launcher Pro Plus

ADW: [qr]org.adw.launcher[/qr] LP: [qr]com.fede.launcher[/qr]

Both ADW and LP have their advantages and disadvantages. newone757 recommends purchasing Launcher Pro Plus, but being cheap, I initially opted to simply use ADW (it's bundled with CM6); however, in writing this article, I did the theme in LP as well. The major drawback to using ADW for this theme is that it's not as easy to change the dock and app drawer icon. Because LP has substantially easier dock customization than ADW, it's probably a better long-run decision - it offers you more options for custom theming down the road. Again, though, those who are already running ADW can get away with using it.

Left: ADW, Right: LP

Desktop Visualizer

[qr]jp.co.bii.android.app.dskvzr[/qr]

Desktop Visualizer is the app used to create the icons. Obviously, it's absolutely required. Don't worry, though - it's free.

Beautiful Widgets

[qr]com.levelup.beautifulwidgets[/qr]

Beautiful Widgets isn't necessarily required, especially as it isn't free, but it's well worth the money (and to date is the only app I've paid for aside from LP Plus - which I only purchased to write this). Like LP, there are other options, but the amount of customization available makes this a must-have for anyone interested in using custom themes. I'm only asking you to buy one thing, and it's only $2 - work with me here.

Photoshop

As the template images are .PSD files, Photoshop is required to create custom icons based on the template. If you would like to create your own icons in another image editor, that's obviously just fine - and in that case, you won't need PS.

If you don't have Photoshop, don't worry: you can use the bundled icons or create them in another program. The icon sizes are 355x132 px (for the 3x1 icons), 115x266 (for the 2x1) and 115x133 (for the 1x1).

Icons and Wallpapers

Download this ZIP, which contains all the graphics you'll need to get started:

  • newone's icons (in a separate folder within the .zip) and his templates (3x1 and 1x2)
  • My icons (all of the above are mine excluding Phone, Texts, and Gallery. I used newone's Mail icon but took the name off the mailbox).
  • Solid black background wallpaper
  • Black background with white at the top (shown)
  • Clear icon image for LauncherPro users

Creating The Theme

For now, I'm just going to go over how to do the theme with the pre-made icons provided. In Part 2 - going up tomorrow (10/31) - I'll cover how to create your own icons in Photoshop.

Setting Up The Theme

The process is nearly identical in both ADW/LP - the major differences are where certain options are located and whether you'll be using the custom dockbar (LP) or not (ADW).

  1. Copy and paste the AP7 theme folder (unzipped) to the SD card of your device.
  2. Set the background to the solid black image (black.png).
    1. Hit Menu -> Wallpaper -> Gallery -> Navigate to the image
  3. Remove all existing icons, widgets, etc. Screen(s) should be blank.
  4. Set home screen to be 5 rows (default is 4):
    1. ADW: Menu -> ADWSettings -> Screen Preferences -> Desktop Rows -> 5
    2. LP: Menu -> Preferences -> Advanced Settings -> check "5 Icon rows in homescreen"
  5. Add icons:
    1. Long press on screen addwidget
    2. Press "Widgets", then "Desktop Visualizer" deskvis
    3. Choose "Desktop Visualizer (4x1)" for landscape icons (i.e. Mail), "Desktop Visualier (1x2)"for portrait and square (i.e. Phone and Auto, respectively). deskvis_size
    4. Select Icon -> from Image File -> Gallery -> Choose the image (i.e. Mail). For action, Select Action -> Launch Application -> Navigate to the action. Delete whatever is in the Label field, and then press Ok. deskvis_settings
    5. This step varies slightly depending on which launcher you're using:
      1. ADW: Once you press Ok (above), it will ask you what size the widget is. Choose 3 columns and 1 row (3x1), then press Ok. Drag the icon to where you want it placed (for example, I have mail in the bottom left). adw_resize
      2. LP: The icon will drop to your desktop - you'll need to resize manually. Press and hold on the icon until you can move it; once it's selected (read: movable), you can release. This brings up the resize box. Drag the bottom-right corner to the left slightly, to resize it from 4x1 to 3x1. It will snap into place, so you'll know when you've done it. Once it snaps, you can release and hit the Back key on your phone, and then move the icon to where you want it placed (for example, I have mail in the bottom left). icon iconresize
    6. Repeat steps 1-5 until all icons are placed where you want them. A few notes:
      1. Square Icons (1x1): Desktop Visualizer doesn't have an option for 1x1. You can choose either 1x2 or 2x1 - in my experience, it doesn't matter which, as you resize it anyway. Obviously, in ADW you'll need to choose "1x1" at step 5; for LP you'll need to resize so that it's 1x1.
      2. Vertical icons (1x2): Obviously, choose 1x2 in Desktop Visualizer.
  6. By now, you should have all the icons placed. ADW users can skip on to the next step; LP users, we're going to set the custom dock background.
    1. Menu -> Preferences -> Appearance Settings -> Dock Background -> Custom -> Navigate to the dock bar image.
  7. Now, let's add the Clock and Weather widget. You can either use just the clock, or both the clock and weather: lp_clock lp_clockweath
    1. In either case, you need to add a Widget (Same way as Step 5.1), but this time, you're going to select Beautiful Widgets -> Beautiful Smaller Home Weather beaut_wid
    2. Scroll down until you see "Clock Skins" and "Weather Skins." clock_weath_skins skins
      1. If you're only using the clock (Step 7, left image):
        1. Press Clock Skins, then Download Skins. Scroll down until you find "LTTRSclock" by Tim Porter, and download. Switch back to the Installed Skins tab, and select the Letters skin. When the dialogue box pops up, press Apply, then Save & Apply.
        2. Press Weather Skins, then Download Skins again. Locate "none" by Drew Richard and download. Hit the Installed Skins tab, and select the none skin. Apply, then Save & Apply once more. Finally, press Save & Apply again, and it should drop the Widget to your desktop. Because your background is black, all that should show on the widget is the clock.
        3. If you're using LP, you need to resize it down to 3x1. Once you do that (or if you're using ADW), you can move it to the center of the screen, as shown.
      2. If you're using both clock and weather (Step 7, right image):
        1. There's no way around it: this part is going to suck if you're using LPP. Included in the skin folder you downloaded was a black_white.png image file for the background (can be seen in Step 7, right). The unfortunate bit: I created it for ADW. The trick, then (for LPP), is to select the right amount of white at the top. So, Menu -> Wallpaper -> Gallery -> select black_white.png. Here's where things get a little annoying: you have to use trial-and-error to find the right selection. It can be fairly time consuming and aggravating, but stick with it and you'll get it. The objective is to select enough so that there's a border between the icons and the Beautiful Widgets (again, as shown in Step 7). If you're using ADW, you have things much easier: just enlarge the orange selection box by pressing on the corner and dragging out to maximize the selection size.
        2. Next, press Clock Skins, then Download Skins. Scroll down until you find "LTTRSclockLight" by Tim Porter, and download. Switch back to the Installed Skins tab, and select the Letters skin. When the dialogue box pops up, press Apply, then Save & Apply.
        3. Press Weather Skins, then Download Skins again. Locate "LettersLight" by Tim Porter and download. Hit the Installed Skins tab, and select the none skin. Apply, then Save & Apply once more. Finally, press Save & Apply again, and it should drop the Widget to your desktop.
  8. Add any other widgets you'd like. For example, I'm using Power Control and News on my far left screen (screen 1), and an Agenda widget on the far right (screen 3). Note: I made an "OC" (OverClock) icon but couldn't use it because OverclockWidget is... well, a widget, not an app, and thus isn't compatible with Desktop Visualizer.
  9. Almost finished! From here on out, it's just tweaking some settings to your personal tastes. For example, I have the taskbar hidden. Alternatively, you can change the color to dark and continue to display it (coincidentally, this will alter the placement of the widgets and icons, so if you're using both weather and clock, you'll need to reconfigure the white bar on the background). The best way to accomplish this is to dig through the appearance and taskbar settings in your launcher of choice; some ROM's (such as CM6) also offer a number of taskbar tweaks.

And there you have it! Congratulations, you've officially given your phone a unique, eye-catching theme. Interested in creating custom icons for it? Proceed to Part 2, covering how to do just that using Adobe Photoshop.