• After 15+ years, we've made a big change: Android Forums is now Early Bird Club. Learn more here.

Android Phone 7 Theme

paulmz

Android Expert
Apr 8, 2010
958
619
Duluth, MN

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.




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".




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:

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





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!
 
Upvote 0
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.

~
 
Upvote 0
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.

~

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.
 
  • Like
Reactions: kittyluv87
Upvote 0
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 and 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.

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.





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


~
 
Upvote 0
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:



Uploaded with ImageShack.us

From this I can try to figure out the difference in icon size.
 
Upvote 0
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.

New DroidX icons available! Scroll down to the posts!

Dimensions for images using Desktop Visualizer and LauncherPro with a 4-column/5-row setup for a screen resolution of 480x854 (DroidX, etc.).

1x2: 110x282
1x3: 110x428
1x4: 110x574
2x1: 230x136
3x1: 350x136
4x1: 470x136
4x4: 470x574
Large (3x3): 350x428
Middle (2x2): 230x282
Small (1x1): 110x136


All dimensions are in pixels, width by height.
 
Upvote 0
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

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?
 
Upvote 0
@ 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 ;)).

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...)
 
Upvote 0
You got it perfect this time! I'll edit this post with screen shots as soon as I can get them up.

~

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!
 
Upvote 0
  • Like
Reactions: ardchoille
Upvote 0

BEST TECH IN 2023

We've been tracking upcoming products and ranking the best tech since 2007. Thanks for trusting our opinion: we get rewarded through affiliate links that earn us a commission and we invite you to learn more about us.

Smartphones