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.
Setting The Mood
Estimated time required: 30 minutes
Difficulty: Low
ADW.Launcher or Launcher Pro Plus
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
Desktop Visualizer is the app used to create the icons. Obviously, it's absolutely required. Don't worry, though - it's free.
Beautiful Widgets
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).
- Copy and paste the AP7 theme folder (unzipped) to the SD card of your device.
- Set the background to the solid black image (black.png).
- Hit Menu -> Wallpaper -> Gallery -> Navigate to the image
- Remove all existing icons, widgets, etc. Screen(s) should be blank.
- Set home screen to be 5 rows (default is 4):
- ADW: Menu -> ADWSettings -> Screen Preferences -> Desktop Rows -> 5
- LP: Menu -> Preferences -> Advanced Settings -> check "5 Icon rows in homescreen"
- Add icons:
- This step varies slightly depending on which launcher you're using:
- 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).

- Repeat steps 1-5 until all icons are placed where you want them. A few notes:
- 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.
- Vertical icons (1x2): Obviously, choose 1x2 in Desktop Visualizer.
- 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.
- Menu -> Preferences -> Appearance Settings -> Dock Background -> Custom -> Navigate to the dock bar image.
- Now, let's add the Clock and Weather widget. You can either use just the clock, or both the clock and weather:

- If you're only using the clock (Step 7, left image):
- 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.
- 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.
- 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.
- If you're using both clock and weather (Step 7, right image):
- 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.
- 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.
- 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.
- 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.
- 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.






48,561
34,817
22,179
2,027





32 Comments
Ummm... WHO can't change the dock and app drawer icon with ADW??? See: http://bit.ly/cFtxXu
Fine. You can't change the dock and app icon's *easily*. Obviously they can be changed, or else you wouldn't be able to download themes.
The point is that it's more difficult in ADW.
Edit: I knew I worded it carefully: I said for "this theme" and went on to say it was EASIER to customize the dock in LP. "Easier" and "possible" are not synonyms.
I agree that it's not as easy, but your "careful wording" is nothing but misleading. And as long as you are going to get picky by discussing synonyms...
Remove the prepositional phrase and you actually said "the major drawback to using ADW...is that you can’t change the dock and app drawer icon." That's just not true, so no modifying prepositional phrase could make it true. You can change them, even on this theme. But it's a minor point.
Changed to "The major drawback to using ADW for this theme is that it’s not as easy to change the dock and app drawer icon."
Is that acceptable?
The point is, you never argue with Aaron. He always wins his fights
Haha, I wish!
Hey guys, can i translate this tutorial and put in my site? Is an Android site too, and in the end of the post that i get it from here? Please?
As long as you give us proper credit, we'd be honored
Thx guy ^^
ill post it tomorrow morning (here in brazil)
am i able to do it with my Nexus One
Sure can
Post your final desktop screenshots when you are done, people - let's see what design variations you can come up with.
Combination of what I learned here and from a thread at xda-developers...
http://www.twitpic.com/32mxfp (homescreen)
http://www.twitpic.com/32mxmd
Hi, thanks for this tutorial. But I have HTC Desire and with both LP and ADW I have problem that icons don't fit. There is a lot of space between them (much more than you have, for example between mail and browser). Any ideas why?
Very weird. Well first off, in my experience ADW produces less gap (look at the side by side images: http://www.androidpolice.com/2010/10/30/how-to-create-a-customized-android-phone-7-theme-part-1/#adw-launcher-or-launcher-pro-plus)
Can you post an SS to show me how much space you mean?
Turns out that reinstall (or restart, I did both) fixed this problem, so sorry for previous post
No problem, glad you got it worked out
I'd love to know what Font you used for those widgets, it fits perfectly!
Great tutorial, I love Android even more now.
Helvetica/Myriad Pro: http://www.androidpolice.com/2010/10/31/how-to-create-a-customized-android-phone-7-theme-part-2/
Work in progress:
http://img641.imageshack.us/img641/6015/screenshotuzn.png
Very slick!
Just pointing out something I noticed - but on the Moto Droid, your dimensions for the 2x1 (tall) icon appear to be off, heightwise.
115x266 was noticeably shorter than the two 1x height widgets next to it. 115x286 appears to match their height much better. In all honesty, another 10px is probably necessary to be "perfectly accurate", but it passes the casual glance test for my purposes.
can you please share the actual pictures that you use for the tutorial?
Unfortunately, my declutter OCD already kicked in and I deleted the source images. Most are from DeviantArt and the rest are from Google. For example, the Talk image:
http://insp1ration.deviantart.com/art/Lets-talk-24856629?q=boost:popular+lets+talk&qo=10
Camera:
http://browse.deviantart.com/?q=camera&order=9&offset=48#/dyxh2s
And so on.
Sorry!
i don't see newone's folder within the zip...
I tried this on my fascinate. Pretty easy for the most part but on the 2x1 when it gets uploaded onto my phone the text is blurry. Any ideas on how to fix this?
great guide thanks! i have a problem. how come on your screen, all images are not that far apart, i am not able to put them really close to each other. please help
thanks!
Could you post an SS?
oh and i have htc desire hd and i am using launcher pro plus
Aaron the icon files are removed. Can you please post some other links. I couldn't find a better ones so only I'm asking for it
Loved the post.
I'm running ADW w/ DV.
I moved the App Drawer icon from the dock & then hid the dock.
I changed the icon image in ADW, but want to create a larger size icon to match the DV icons on the homescreen (1x1 would be fine).
Even though the App Drawer isn't an app, is there any way of getting around this?
Thanks.
the Link for "multiupload" which contains all the graphics (icons ect) does NOT work!
Help, Please!