30
Oct
snap20101010_120010
Last Updated: November 7th, 2010

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 code for https://play.google.com/store/apps/details?id=org.adw.launcher LP: QR code for https://play.google.com/store/apps/details?id=com.fede.launcher

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.

snap20101010_120010 lp_clockweath

Left: ADW, Right: LP

Desktop Visualizer

QR code for https://play.google.com/store/apps/details?id=jp.co.bii.android.app.dskvzr

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 code for https://play.google.com/store/apps/details?id=com.levelup.beautifulwidgets

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

snap20101010_120014 snap20101010_120010 snap20101010_120027

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.

Aaron Gingrich
Aaron is a geek who has always had a passion for technology. When not working or writing, he can be found spending time with his family, playing a game, or watching a movie.

  • leftbrain99

    Ummm... WHO can't change the dock and app drawer icon with ADW??? See: http://bit.ly/cFtxXu

    • Aaron Gingrich

      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.

      • leftbrain99

        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.

        • Aaron Gingrich

          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?

    • http://www.androidpolice.com/author/jaroslav-stekl/ Jaroslav Stekl

      The point is, you never argue with Aaron. He always wins his fights ;)

      • Aaron Gingrich

        Haha, I wish! ;)

  • http://euandroid.com.br Tsuharesu Luciel

    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?

    • Aaron Gingrich

      As long as you give us proper credit, we'd be honored :)

      • http://euandroid.com.br Tsuharesu Luciel

        Thx guy ^^
        ill post it tomorrow morning (here in brazil)

  • MotlaQ

    am i able to do it with my Nexus One

    • Aaron Gingrich

      Sure can :)

  • http://www.AndroidPolice.com Artem Russakovskii

    Post your final desktop screenshots when you are done, people - let's see what design variations you can come up with.

  • LadaR

    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?

  • http://suddenfish.net Daryl

    I'd love to know what Font you used for those widgets, it fits perfectly!

    Great tutorial, I love Android even more now.

  • John
    • Aaron Gingrich

      Very slick!

  • http://www.google.com NameAnon

    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.

  • Regi

    can you please share the actual pictures that you use for the tutorial?

  • Joey

    i don't see newone's folder within the zip...

  • Justin

    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?

  • andrew

    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!

    • Aaron Gingrich

      Could you post an SS?

  • andrew

    oh and i have htc desire hd and i am using launcher pro plus

  • Mahesh

    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

  • D.A.

    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.

  • 4Don

    the Link for "multiupload" which contains all the graphics (icons ect) does NOT work!

    Help, Please!

  • Jonas Weichert94

    The ZIP file is broken or deleted. However it's inaccessable. ;)
    Could you please re-upload it?

  • Personamaster117

    Hey the zip wont work the link is blank when i press it can u fix it

  • The-fox-1990

    can u reuplaod the zip file pls ?

  • Vivian

    Where is the zip folder? I can't even find it

  • Esteeb

    MALWARE WARNING!! THE LINK TO THE ZIP FILE WILL INSTALL MALWARE AND ADWARE. DO NOT DOWNLOAD ZIP FILE.

  • http://metronic.vn/ Metronic

    It's really interesting. Thanks for sharing that^^

Quantcast