Android Phone 7 Theme


  1. paulmz

    paulmz Well-Known Member

    [​IMG]
    by Paul M. Zahorosky of JerseyBoy Design

    Greetings and welcome to my tutorial on how to create a "Windows Phone 7" style "theme" on an Android device. This is not an exact copy of the Windows UI, but rather a new graphical interface for my phone greatly inspired by the image icons of the prototype Windows Phone 7 (as seen on XDA) and the "Living Tiles" of the actual Windows Phone 7.

    NOTE: Be sure to scroll through this entire first post (it's getting kind of long) for new and updated information. There are already dozens of icons and files to download and information for other devices will be added as needed or requested.

    ANOTHER NOTE: The only rule of this thread is the size of images posted. Please keep images to 750-pixels or less - otherwise the thread "stretches" wide and people have to scroll horizontally to read the post! Thanks.

    This was completed on an unrooted HTC DROID Incredible running LauncherPro Plus.

    [​IMG] [​IMG] [​IMG]
    [​IMG] [​IMG] [​IMG]

    Uploaded with ImageShack.us

    All of the image widgets are placed using Desktop Visualizer. Other tutorials on this type of theme call for using LauncherPro Plus to "resize" the widgets, but this creates irregular spacing between them. My solution to this problem is to start with the correct pixel dimensions for the images. This way they place at exactly the right size and all widgets are spaced perfectly (approximately 10-pixels, depending on the device).

    Before you start placing widgets on the homescreen:

    1. Make a blank (preferably black) wallpaper to go behind the widgets.
    2. Assure that "Auto-Fit Items" option is selected in the LauncherPro settings.
    Click here for examples plus a "why-and-how" to make this adjustment.
    3. Change the number of rows to 5 by pressing: [MENU]->[Preferences]->[Homescreen Settings]->[Number of rows]->[5]. Do not adjust the "5 Icon rows in homescreen" setting under "Advanced Settings".

    About the images:
    I created all of the icons from scratch myself using images from my personal photo collection, Google image searches, and Stock Exchange (stock.xchng - the leading free stock photography site). All images were resized by cropping in Photoshop (This post shows the process: Image Resizing Using Photoshop). Also using Photoshop, I added a 36-pixel high black rectangle with a 60% transparency and the white text with a small drop shadow (This post shows the process: Creating Image Labels in Photoshop). Use the "Save For Web" function under "File" and save the image as a .png file. Once completed, copy the .png files onto the phone (I put them in a "Widget Icon Images" folder in the /mnt/emmc folder).

    How to get the images as a widget:
    1. Make sure the .png image files are on the phone.
    2. Add a new widget to the homescreen (long-press empty space, select "Widgets" from pop-up).
    3. Go to "Desktop Visualizer" and press the correct widget size (listed as width x height).
    4. Press "Select Icon".
    5. Press "Image File".
    6. Search for and select your image (I use Astro File Manager for this as it shows a thumbnail and filename).
    7. Press "Select Action".
    8. Press either "Launch Application" and select application,
    ....-or- press "Other" to select a shortcut.
    ....NOTE: If you select "Other", "Activities", you can have widget trigger certain parts of
    ....certain apps (ie. go straight to "Alarm Clock" without having to go through "Clock").
    ....ANOTHER NOTE: If you select "None", it will be only an image widget that does nothing.
    9. Press the "Clear" button to delete all text in the "Label" box (If you leave the app name or type something in this box, it will show the label on top of the widget..
    10. Press "OK".

    [​IMG] [​IMG] [​IMG]
    [​IMG] [​IMG] [​IMG]

    Voila! You just created a widget with a custom image.
    Also... No LauncherPro widget resizing is necessary!

    For those who need a little help figuring out image sizes for the Desktop Visualizer widgets, the following list is based on LauncherPro's homescreen arrangement of 4-columns and 5-rows:

    1x1: 110 x 125
    1x2: 110 x 260
    1x3: 110 x 395
    1x4: 110 x 530
    2x1: 230 x 125
    2x2: 230 x 260
    3x1: 350 x 125
    3x3: 350 x 395
    4x1: 470 x 125
    4x4: 470 x 530


    All dimensions are in pixels, width by height for a device with a resolution of 480 x 800.
    Image dimensions for other devices are listed in links below.

    When resizing images in Photoshop, I just used the "crop" tool, set the specific dimensions and ppi (I used 72) in the options box, then added the black rectangle and text.

    Android7 "Tile" Widgets:
    Now, I'm a graphics guy - not a code guy... so it took me a while to figure out how to make some "Living Tile" type widgets. Thanks to mykela25 for posting that she was "making custom unread count widgets". I asked her "how?" and she told me about APK Manager, which can "take apart" an app and allow for changing the image files for backgrounds, icons, etc. After a lot of trial and error I came up with some good, solid widgets that fit the style of this theme.

    Hopefully this helps to create an awesome and unique layout.


    EASY LINKS TO POSTS THROUGHOUT THIS THREAD


    Android7 Widgets for 480x800 Resolution (Solid color "Living Tile" type widgets)

    Android7 Widgets for 480x854 Resolution (resized by Curt941)

    Android7 Widgets for 320x480 Resolution

    Desktop Visualizer Widget Image Dimensions
    Direct links to every post in this thread that include pixel dimensions for proper alignment using Desktop Visualizer (updated 11/10/10):


    Desktop Visualizer Widget Image Dimensions - 576 x 1024 Resolution - Dock and Notification Bar ON

    Desktop Visualizer Widget Image Dimensions - 540x960 Resolution - Dock and Notification Bar ON

    Desktop Visualizer Widget Image Dimensions - 540x960 Resolution - Dock and Notification Bar OFF

    Desktop Visualizer Widget Image Dimensions - 540x960 Resolution - Dock ON and Notification Bar OFF

    HTC Incredible Desktop Visualizer Widget Image Dimensions With Notification Bar Hiding (480x800 resolution)

    DroidX Desktop Visualizer Widget Image Dimensions (480x854resolution)

    HTC Eris Desktop Visualizer Image Dimensions (320x480 resolution)

    HTC Sense Desktop Visualizer Widget Dimensions (480x800 resolution)

    Android7 Layout Using ADW Launcher - Without Dock or Notification Bar (480x800 resolution)

    Desktop Visualizer Widget Dimensions using GO Launcher (480x800 resolution)

    Desktop Visualizer Image Size Test - Use this if your resolution is not listed.

    Desktop Visualizer Widget Images
    Direct links to every post in this thread that include images for download (updated 12/19/10):

    NEW! Revised Android7 Icons by Paul M. Zahorosky of JerseyBoy Design (480x800) with new font to match Android7 Widgets.
    Incredible Android 7 Icons by Paul M. Zahorosky of JerseyBoy Design (480x800) - Part 1
    Incredible Android 7 Icons by Paul M. Zahorosky of JerseyBoy Design (480x800) - Part 2
    Incredible Android 7 Icons by Paul M. Zahorosky of JerseyBoy Design (480x800) - Part 3
    Incredible Android 7 Stock Market Icons by Paul M. Zahorosky of JerseyBoy Design (480x800)
    Incredible Android 7 "Games" Icons by Paul M. Zahorosky of JerseyBoy Design (480x800)
    Incredible Android 7 "Mail" Icons by Paul M. Zahorosky of JerseyBoy Design (480x800)
    Incredible Android 7 Desktop Visualizer Icons by Krze RESIZED (480x800)
    Incredible Android 7 Icons by Excedio (480x800)
    Android 7 Icons by djbucksta (480x800)
    Android 7 "Teeter" Icon by djbucksta (480x800)
    Android 7 Icons by BlondeeLox (480x800)
    Android 7 Icon ImageShack Album by BlondeeLox (480x800)
    HTC Eris Android 7 Desktop Visualizer Icons by Paul M. Zahorosky of JerseyBoy Deisign (320x480)
    HTC Eris Android 7 "1950's Style" Icons by Paul M. Zahorosky of JerseyBoy Design (320x480)
    DroidX Android 7 Icons by Paul M. Zahorosky of JerseyBoy Design (480x854) - Part 1
    DroidX Android 7 Icons by Paul M. Zahorosky of JerseyBoy Design (480x854) - Part 2
    Incredible/EVO Android 7 Icons by dingopb
    New Expanded DroidX Android 7 Icons

    Images Only For Android 7 Theme Icons - Pre-Sized and Cropped Without Labels

    Android 7 Theme Desktop Visualizer Icon Libraries - ZIP files of all icons in this thread!

    Desktop Visualizer Widget Image Photoshop/GIMP Templates
    Attached files for easy download with every Desktop Visualizer widget dimension in a complete "blank slate" - ready for your images to be added (updated 11/10/10):

    View attachment 12477 - DroidX Desktop Visualizer Photoshop Templates
    View attachment 12904 - Incredible Desktop Visualizer Photoshop Templates
    HTC Incredible Desktop Visualizer GIMP Templates by Excedio
    View attachment 12734 - Dock Icons by paulmz @ JerseyBoy Design

    Fonts I used for my icons:
    Agency
    Myriad Pro Semibold

    Other useful posts:
    Direct links to other posts in this thread that have been particularly useful in completing this project (updated 11/10/10):

    Assign Desktop Visualizer Widget as a Direct Dial or Direct Message
    UPDATE: Enable LauncherPro Auto-Fit Option for Android 7 Theme
    Desktop Visualizer Update v. 1.1.1 Image Quality Setting
    Image Resizing Using Photoshop
    Image Resizing Using GIMP
    Creating Image Labels in Photoshop
    How to take screenshots of your Android based phone from Windows
    Desktop Visualizer Image Size Test - Use this if your resolution is not listed.
    Reskinning Widgets - A brief tutorial on using APK manager.
    Overlapping Widgets - Using ADW Launcher to make easy Android7 Tiles.
    How to slice one image into multiple tiles (by hard13).


    Here are the links to the xda-developers posts for the original idea:
    [Layout] Android Phone 7 (MDPI) - xda-developers
    [Layout] Android Phone 7 (HDPI) - xda-developers

    And, finally...

    This "theme" has been a lot of hard work.
    If you like what I have done and feel compelled to show your gratitude monetarily I accept donations through PayPal: [​IMG]

    Thank you to everyone who helped, contributed, and followed this theme.

    Advertisement
  2. brocja01

    brocja01 Well-Known Member

    Thanks for posting this. Really made it easier for me. I'm by no means a graphic guy, I make things functional, not pretty is my motto. :) So thanks again by giving me exact numbers. :)
    rajukunchala likes this.
  3. bmckenzie90

    bmckenzie90 Well-Known Member

    Awesome to have the exact icon dimensions! Been looking for those! Thanks!
  4. crboone

    crboone Well-Known Member

    Yours are actually nicer than the originals on the xda site IMO. Good work.
    paulmz likes this.
  5. paulmz

    paulmz Well-Known Member

    At the request of several, several enthusiasts:

    (Note: I posted one extra icon for the Market that I didn't use in my final layout.)

    [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG]

    [​IMG]

    [​IMG] [​IMG] [​IMG] [​IMG]

    CONTINUED...
  6. paulmz

    paulmz Well-Known Member

    ...CONTINUED

    [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG]

    [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG]

    PLEASE NOTE: All of these icons were created by me for use on my HTC DROID Incredible using LauncherPro with a homescreen setup of 4 columns by 5 rows. I am, of course, not responsible for these icons actually lining up or sizing perfectly, expecially on a device or using software other that that listed above.

    Also, if you want to create your own icons (change the size, font, etc.), here is a link to the ImageShack album with all of the original images that I used to make the icons: ImageShack Album - 37 images

    If you need any help sizing, figuring, laying out... myself (or others watching) would be glad to help.

    Now, don't everyone just pounce on these icons like crazy! I still want to see some awesome original ideas!

    Thank you everyone for your support and interest... and have fun!
  7. crboone

    crboone Well-Known Member

    Thanks for making these available, I'm trying them out to see how they look on my X. I thought about asking if you would share them as well. The layout I'm using is a little different from yours since I don't use all of the same apps.


    2 quick questions:

    - Would you recommend copying the photo-icons to internal memory rather than the SD card (does it impact boot time)? I've noticed that they take a little time to load on reboot. That could be because of a slow card, or some other app(s), though.

    - Do you resize the widgets to close the gap between them? The gap is slightly larger on mine (though it still looks fine).


    EDIT: NVM on the first question. I went back and reread your OP.

    ~
  8. paulmz

    paulmz Well-Known Member

    I find that no matter where the image files are, it does take a moment (or several moments) for the images to load after a reboot. I assume it's just the phone taking a while to mount the SD card after a reboot. Occasionally, I have to unmount and then remount the SD card after a reboot (can't quite figure that one out yet). Luckily, we shouldn't need to reboot often.

    One of the reasons why the icons line up so well on my phone is due to the images being the exact size required for the widget. I did not resize any of the widgets after placing them. It looks like the DroidX has a resolution of 480 x 854. So, these icons should work width-wise with even horizontal spacing, but the vertical spacing is most likely larger than the former.

    I'll try to figure a pixel dimension formula tonight after work. If you could post a full-size screenshot of one homescreen with perhaps one of the widgets selected/highlighted, I should be able to figure out the pixel dimensions you need to close the gaps.
    kittyluv87 likes this.
  9. crboone

    crboone Well-Known Member

    Unfortunately, I'm unable at the moment to select & highlight the widgets. I downloaded the free version of LP to add these, and they lock as if I'm trying to resize them when I highlight them (resizing is only available in the Plus version). But I'll still post the screens so you can see how they look so far. It would look a little better if the gaps were narrower, but it still looks fine like this. Definitely useable.


    [​IMG] [​IMG] [​IMG]


    EDIT: I've updated the screens with a black background. Now the status bar doesn't match as much...


    ~
  10. chaos32

    chaos32 Well-Known Member

    woah. a little overwhelming...but a pretty cool. I like :D
  11. Imposter

    Imposter Well-Known Member

    This would be a great thread to keep going for everyone who's kind enough to share what they have made in the same design. They could post their Win7 icons all in one place for everyone to use.
  12. paulmz

    paulmz Well-Known Member

    If anyone is having problems having their icons line up (which will most likely happen if your device has a resolution other than 480x800), post a few full-sized screenshots with at least four different sized widgets selected:

    [​IMG]

    Uploaded with ImageShack.us

    From this I can try to figure out the difference in icon size.
    sanazahara and cellardoor04 like this.
  13. paulmz

    paulmz Well-Known Member

    ardchoille, mzmami, zehny and 2 others like this.
  14. adi19956

    adi19956 Well-Known Member

    Thanks a lot! that's amazing! I don't have PhotoShop so I'm using PhotoScape (it's free) just wondering, what font did you use for this?
    Seddy likes this.
  15. crboone

    crboone Well-Known Member

    You got it perfect this time! I'll edit this post with screen shots as soon as I can get them up.


    EDIT: Here they are ...


    [​IMG] [​IMG] [​IMG]


    All I had to do was to drop the updated icons into the same folder and reboot.

    ~
  16. brocja01

    brocja01 Well-Known Member

    Has anyone else had performance issues? I had only one screen with icons on it and there was a significant redraw each time i came back to my home screen
  17. crboone

    crboone Well-Known Member

    Only on reboot, but never when I just return to the home screen. I just allow a few more moments for it to reboot and it seems okay.

    ~
  18. eyebeam

    eyebeam Well-Known Member

    @ paulmz -

    Just wanted to pop in here and say thanks for taking the time to do all this. People doing things like this are why I keep hanging around here (much to the dismay of the Mods ;)).
  19. PSUlion01

    PSUlion01 Well-Known Member


    Can you share the PSD templates for these Droid X images?

    Thx!
  20. paulmz

    paulmz Well-Known Member

    I used one of my most useful fonts:

    Agency Free Font - FontStock
    ardchoille likes this.
  21. paulmz

    paulmz Well-Known Member

    No lag here. What exactly are you running on (phone, launcher, etc.). Are you using the icon files provided or making your own? Where are you saving the icon files to on the device?
  22. paulmz

    paulmz Well-Known Member

    Thanks, eyebeam. It was actually all of your work on creating wallpapers for everyone that inspired me to make my own contributions to the forum.

    I guess it's just a case of "Minnesota Nice", right? (Not that I'm a native...)
  23. paulmz

    paulmz Well-Known Member

    I'm glad the new sizes worked out. I'll finish resizing the rest of them and add them to the post with dimensions for people to make their own also.

    Thanks for your help with the screenshots of your phone. It made it a lot easier to figure out the difference in icon size. Now we can add the DroidX to our available Android 7 Theme list!
  24. paulmz

    paulmz Well-Known Member

    Here is a zip attachment with all 10 Photoshop templates for Desktop Visualizer using LauncherPro with a 4-column by 5-row setup on a DroidX or equivalent 480 x 854 resolution screen.

    View attachment DroidX Desktop Visualizer Photoshop Templates.zip
    ardchoille likes this.
  25. paulmz

    paulmz Well-Known Member

    Following are my set of Android 7 icons resized for Desktop Visualizer on a DroidX or equivalent device with a resolution of 480x854.

    Link to entire collection in ImageShack Album:

    ImageShack Album - 38 images

    [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG] [​IMG]
    [​IMG]
    [​IMG] [​IMG] [​IMG] [​IMG]

    CONTINUED...
    eljitto likes this.

Share This Page