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.
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.
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 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):
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.
Last edited by paulmz; January 9th, 2012 at 11:29 PM.
Reason: Revised and added step-by-step instructions. Adding links to important posts and icon images. Adding links. Always updating!
The Following 150 Users Say Thank You to paulmz For This Useful Post:
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.
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!
Last edited by paulmz; December 19th, 2010 at 09:58 PM.
The Following 18 Users Say Thank You to paulmz For This Useful Post:
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.
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.
Last edited by paulmz; October 18th, 2010 at 01:15 PM.
The Following User Says Thank You to paulmz For This Useful Post:
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...
~
Last edited by crboone; October 16th, 2010 at 06:00 PM.
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.
__________________
Getting the hang of things finally....
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:
[QUOTE=crboone;1753954]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.).
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
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
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.
~
Last edited by crboone; October 17th, 2010 at 10:49 PM.
Device(s): Me - Evo 3D, Nexus 7 - Wife - Evo 3D, Galaxy Tab 10.1"
Carrier: Sprint
Thanks: 2,096
Thanked 3,098 Times in 2,146 Posts
@ 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 ).
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?
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...)
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!
DroidX Photoshop PSD Templates for Desktop Visualizer
Quote:
Originally Posted by PSUlion01
Can you share the PSD templates for these Droid X images?
Thx!
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.
Finally: I have had a few people tell me they would gladly pay for these icons. I really have no means nor desire to charge for them. The majority of the original images are solely from the internet, so I can't charge money for another person's products. It did take quite a while (several days) to find the correct pixel dimensions for the widgets, search and compile the images, adjust them to the correct size, label them and upload them for use. So... consider me a "starving artist".
If you like what I have done and feel compelled to show your gratitude monetarily:
The Following User Says Thank You to paulmz For This Useful Post:
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?
They were icons I made myself and I saved them on my sd card. I've since downloaded some other ones and the lag has gone.
I'm trying to resize some of my own pictures using Photoshop. However, when I click on Image>Image Size, I enter the the pixel dimensions as 470x125. This comes out all stretched out horizontally. Is this the method on how you do it paulmz?
I'm trying to resize some of my own pictures using Photoshop. However, when I click on Image>Image Size, I enter the the pixel dimensions as 470x125. This comes out all stretched out horizontally. Is this the method on how you do it paulmz?
Quote:
Originally Posted by omgitsspooky
I'm trying to resize some of my own pictures using Photoshop. However, when I click on Image>Image Size, I enter the the pixel dimensions as 470x125. This comes out all stretched out horizontally. Is this the method on how you do it paulmz?
No, if you use Image>Image Size it will only resize the image. If you resize it to a proportion other than the original, it will distort the image.
I simply used the Crop tool:
1. Select the "Crop" tool.
2. In the Options Bar, enter the dimensions for the image in exact pixels and adjust the PPI to 72.
3. Drag a crop box across the image, resizing or moving as necessary.
So long as the dimensions are accurate, the crop box will retain it's correct proportion no matter what size it is, and it will automatically resize it to the correct resolution by entering the PPI.
Another option is to use LauncherPro Plus and resize the widget after placing it. (Press and hold the widget after placing, let go, when the box appears drag the bottom-right triangle down to resize. It will force a 4x2 widget size.
For the image sizing on this, you have to take the height of the Desktop Visualizer widget you're going to use, multiply it by how many "rows" you're going to drag and enlarge it, and add 10 extra pixels per row to compensate for the spacing between rows. For example: 125 x 2 + 10 = 260
Here's the resized image as a .png:
Hope this helps.
Last edited by paulmz; October 28th, 2010 at 11:51 PM.
Reason: Adjusted image sizes.
The Following 2 Users Say Thank You to paulmz For This Useful Post:
now that i can crop it properly, can someone please tell me how to add that banner on the bottom with the text in it? thanks much!
Still in Photoshop:
1. Draw a black rectangle where you want the text to go (This will create a new layer just for the shape). Go to the "Layers" palette and adjust the "Opacity" to less than 100% (I used 60%).
2. Click the "T" text tool, click in the gray box, and enter the text that you need. Adjust the color to white (or something else visible on the gray). I also added a standard drop-shadow to help the text stand out a little more (click the "fx" option in the bottom of the Layers palette and select "Drop Shadow"-mess around with the options if you want, but the preset is okay).
NOTE: After you get one completed, leave that PSD file open and just drag the gray box and the text onto any new icons. This way it will guarantee the same settings and sizes (you may have to stretch or shrink the box horizontally depending on the width of your icon-click the "Show Transform Controls" check box at the top to show the transform handles and just drag the box to the size you need, then click the checkmark or press enter to confirm change).
Also, don't forget to "Save As" a .png file after you're done with each one.
Any other questions, feel free to ask!
The Following User Says Thank You to paulmz For This Useful Post:
Can you do Folder Shortcuts with the Desktop Visualizer Widgets?
Of course! When you press "Select Action", select "Other" on the pop-up menu. That's the Shortcuts option.
Plus, if you select the "Activities" LauncherPro option, you can select shortcuts to specific parts of certain applications (ie., go direct to the Alarm Clock and bypass going through the Clock App first).
Oh I'm very familiar with that feature of Launcher Pro. What I am trying to do is I have all my games dropped into a Folder. When I select Other from"Select Action" my Games Folder is not an option.
Oh I'm very familiar with that feature of Launcher Pro. What I am trying to do is I have all my games dropped into a Folder. When I select Other from"Select Action" my Games Folder is not an option.
You're right, I don't see an option to select a shortcut to a folder.
But there is an easier and (I think) nicer way:
I use App Categories or Smart Shortcuts, which lets you categorize to your heart's content. These apps also arrange app icons alphabetically or by use or rating, and have a nicer and faster pop-up box than the folders option.
These have shortcuts under the "Other" option.
Hope this helps.
The Following User Says Thank You to paulmz For This Useful Post:
You're right, I don't see an option to select a shortcut to a folder.
But there is an easier and (I think) nicer way:
I use App Categories or Smart Shortcuts, which lets you categorize to your heart's content. These apps also arrange app icons alphabetically or by use or rating, and have a nicer and faster pop-up box than the folders option.
These have shortcuts under the "Other" option.
Hope this helps.
@paulmz, is there another app that will allow me to utilize your icon pics than Desktop Visualizer? I've had to uninstall the setup because I couldn't connect the phone to my PC via USB mass storage mode due to the link between DV and the pics on the SD card. I believe this was the problem because: 1) When booting the phone, it took a long time for the pic icons to load. And 2) I've completely uninstalled DV (and LP) and my phone connects fine every time now. (I've used LP before and it wasn't a problem). I think the phone was unable to release the SD card and hand it over to the PC properly, so it would lock up and reboot the phone every time.
I could have a faulty SD card ... so I'm just wondering if there's an alternative that might work better. DV couldn't link the pics from a local folder because it uses either the Gallery or the stock File Mgr, and both of those access the SD card only.
@paulmz, is there another app that will allow me to utilize your icon pics than Desktop Visualizer? I've had to uninstall the setup because I couldn't connect the phone to my PC via USB mass storage mode due to the link between DV and the pics on the SD card. I believe this was the problem because: 1) When booting the phone, it took a long time for the pic icons to load. And 2) I've completely uninstalled DV (and LP) and my phone connects fine every time now. (I've used LP before and it wasn't a problem). I think the phone was unable to release the SD card and hand it over to the PC properly, so it would lock up and reboot the phone every time.
I could have a faulty SD card ... so I'm just wondering if there's an alternative that might work better. DV couldn't link the pics from a local folder because it uses either the Gallery or the stock File Mgr, and both of those access the SD card only.
crboone:
Unfortunately, I don't know of any other app as versatile as Desktop Visualizer. I tried BetterCut, which lets you assign different icons to apps, but it doesn't let you assign images or resize the widgets (at least I didn't see these options for the brief time I tried it).
I was having problems with the PC Connection, too. It was happening pretty much after I did this setup, but I also went through my apps and tried to minimize their use, thinking it would speed things up after adding so many image widgets on the screens. But I would have to reboot everytime I needed to connect to the computer, and after rebooting I was killing tons of apps that first load on a fresh boot. I found that I accidently kept killing "Obex" and "Sync Service"- one of which I think controls the PC Connection. Ever since I stopped doing that, it's been working fine.
I also have all of my Widget Images on my phone memory, and not the SD Card. Gallery finds them fine when you go to "All Images". I know that none of the other Android phones have the mass amount of onboard memory like the Incredible, though.
Sorry this isn't working well for you. I wish I had a DroidX so we could troubleshoot it. If anyone else has any ideas, please, feel free to post your input!
If I come up with anything else, I'll let you know.
Unfortunately, I don't know of any other app as versatile as Desktop Visualizer. I tried BetterCut, which lets you assign different icons to apps, but it doesn't let you assign images or resize the widgets (at least I didn't see these options for the brief time I tried it).
I was having problems with the PC Connection, too. It was happening pretty much after I did this setup, but I also went through my apps and tried to minimize their use, thinking it would speed things up after adding so many image widgets on the screens. But I would have to reboot everytime I needed to connect to the computer, and after rebooting I was killing tons of apps that first load on a fresh boot. I found that I accidently kept killing "Obex" and "Sync Service"- one of which I think controls the PC Connection. Ever since I stopped doing that, it's been working fine.
I also have all of my Widget Images on my phone memory, and not the SD Card. Gallery finds them fine when you go to "All Images". I know that none of the other Android phones have the mass amount of onboard memory like the Incredible, though.
Sorry this isn't working well for you. I wish I had a DroidX so we could troubleshoot it. If anyone else has any ideas, please, feel free to post your input!
If I come up with anything else, I'll let you know.
From all I can see, this just isn't possible. I'm rooted and moved the pics to the /data/local dir (and tried other locations) -- but Gallery doesn't find them because it's not expecting the user to be rooted, so it only "looks" on the SD card. I really don't see a good solution, unfortunately, other than finding another app that handles the pics more efficiently. I tried shrinking the .pngs down to jpegs but it made no difference. I believe I've done all I can do with this and it just won't work on my phone without detriment to the USB connection.
~
Last edited by crboone; October 21st, 2010 at 07:52 PM.
From all I can see, this just isn't possible. I'm rooted and moved the pics to the /data/local dir (and tried other locations) -- but Gallery doesn't find them because it's not expecting the user to be rooted, so it only "looks" on the SD card. I really don't see a good solution, unfortunately, other than finding another app that handles the pics more efficiently. I tried shrinking the .pngs down to jpegs but it made no difference. I believe I've done all I can do with this and it just won't work on my phone without detriment to the USB connection.
~
Do you have a "DCIM" folder in /emmc on the phone memory? This is the default area where is camera stores images. That's where I have my images saved.
I'm not familiar with the software process difference between rooted and unrooted, so I can't offer any suggestions beyond what is working on my device.
I would hate for this not to function properly with all of the work we put into it. Hopefully we'll figure something out.
These are excellent, I've changed my whole phones appearance because of this thread.
Nice work! really beautiful pictures used in such a unique way, the tutorial was very easy to follow even with my limited knowledge. I wish I could find a use for the hilarious "fruit ninja" picture
Cheers Al
PS If I could be really cheeky any chance you could do a 1x1 stock/shares picture? I don't have the skills to do it myself
You're right, I don't see an option to select a shortcut to a folder.
But there is an easier and (I think) nicer way:
I use App Categories or Smart Shortcuts, which lets you categorize to your heart's content. These apps also arrange app icons alphabetically or by use or rating, and have a nicer and faster pop-up box than the folders option.
These have shortcuts under the "Other" option.
Hope this helps.
Or Folder organizer (paid or lite version) For select action choose "other" then scroll down to FolderOrganizer Folder link" And that will let you choose shortcuts for your games,apps etc.
These are excellent, I've changed my whole phones appearance because of this thread.
Nice work! really beautiful pictures used in such a unique way, the tutorial was very easy to follow even with my limited knowledge. I wish I could find a use for the hilarious "fruit ninja" picture
Cheers Al
PS If I could be really cheeky any chance you could do a 1x1 stock/shares picture? I don't have the skills to do it myself
Download the fruit ninja game...
__________________
Some people see things that are and ask, Why? Some people dream of things that never were and ask, Why not? Some people have to go to work and don't have time for all that.
These are excellent, I've changed my whole phones appearance because of this thread.
Nice work! really beautiful pictures used in such a unique way, the tutorial was very easy to follow even with my limited knowledge. I wish I could find a use for the hilarious "fruit ninja" picture
Cheers Al
PS If I could be really cheeky any chance you could do a 1x1 stock/shares picture? I don't have the skills to do it myself
alinver:
Now, I'm not really familiar with the stock market or what would be a good image for it. Hopefully, one of these would work:
The Following 2 Users Say Thank You to paulmz For This Useful Post:
I've read there's a way to edit the size of the pixel spacing between icons in LPP if you decompile it. I pulled it apart but I don't know what I'm looking for. The spacing between the icons is killing me, I cannot find any info other than "it's possible" anyone know what I'd need to edit to accomplish this?
Android Phone 7 Theme
So thanks again by giving me exact numbers. 
).
