New Homescreen inspired by AndroidAndMe.com

December 13, 2011
jhotmann

MyColorscreen screen of the day 12/14/2011!

The customizability of Android can be a blessing and a curse.  On one hand I don’t have to look at something boring like pages full of just icons.  But on the other hand, I don’t think I’ll ever be able to stick with something for more than a month or two before wanting to create something new.  I therefore spend a night or two staying up til the wee hours of the morning planning new ideas, photoshopping icons, and finding ways to make my vision a reality.

From AndroidAndMe.com’s mobile site.

My latest creation originated one morning when I was reading the latest android news instead of trimming my scraggly beard or eating a healthy breakfast.  I went to androidandme.com on my phone’s browser and was greeted with a very well designed mobile web page.  I liked it so much that I decided I had to try and see if I could create something similar for my phone.  The following will not only explain the process I went through to create the homescreen, but some tips that you may find useful next time you want to create something unique.

Apps Used:
ADWLauncher EX – Launcher Replacement
Multipicture Live Wallpaper – Allows each screen of the homescreen to be a different image
Minimalistic Text – For clock, date, and other text
Desktop Visualizer – For shortcuts of different sizes to apps/folders with custom images
Tasker – For unread sms count and latest sms text, sender, and time
Application Folder – Folder popups, previously reviewed here
Phantom Music Control – Hidden music controls
Minimal Reader – Minimalist RSS Widget
Widgetsoid – Power control widget

Pro Tips:

My first step is to bust out the pen and paper to plan my attack.  This is optional, but I find that if I get my ideas on paper first, the actual creation process is much quicker.  I also tend to come up with “brilliant” ideas only later to forget them…if they’re on paper I can always be reminded of my original idea and respark the creation process later.  If you draw it out and decide you don’t like it you can always scratch it out and start again, but if you’re making the homescreen and sorting through ideas at the same time, it can sometimes lead to some headaches.

To further assist in preparation, I clear my homescreen and use empty Desktop Visualizer widgets to plan out placement of icons and widgets in accordance to my plans.  It also helps me get an idea of what size grid I need to use (numbers of columns and rows in the homescreen settings, many 3rd party launchers allow you to change these).  For reference I used 6 columns and 10 rows to make each cell smaller and close to square.

Then using Photoshop (or a free image editor like gimp, paint.net, or pixlr.com) I start making the backgrounds for each page.  For those who are new to image editors, layers are going to be your friend.  Layers allow you to modify single aspects at a time without affecting the rest of the image.  I make the base later one of the images above with the Desktop Visualizer template.  I then create a layer on top of that to create the background colors for that screen.  I make the second layer temporarily transparent (opacity in photoshop) to allow me to see how things are lining up with the template.

Next: icons.  Here you have a couple options.  You can create/find a whole bunch of icons and use Desktop Visualizer to put them on the background, or you can put the icons on the background and use Desktop Visualizer with a clear image over the background icon.  The first option is much better if this theme is something you’ll keep for a while but might switch out apps and icons.  For me, I change my homescreen setup often so I cheat and put the icons on the background itself.  This saves a little time but the main advantage is that it uses less ram.  A clear png is less than 1 KB compared to an icon which can be anywhere from 5 to a couple hundred KB.  This saves me several MB of ram usage and if you have a phone with only 512 MB of ram you’re going to want to save any ram you can.

If you chose to make individual icons then find out roughly what the dimensions are of the Desktop Visualizer sections on your template and create your icons to that size.  If you’re just going to stick them on the background continue using layers and opacity like you were when creating the background.

The AndroidAndMe.com Homescreen

Now that I’ve gotten that little lesson out of the way, I’ll go ahead and show each page with a brief description of the included apps/widgets.

The next page is the Social page which combines all the ways of communicating with others into one handy page.  Followed by Faves with all of my favorite apps.

For the Games and Tools pages I couldn’t figure out anything to fill the white spaces at the top so I decided to make them resemble the comments section from Android and Me.

Let me know what you think!

  • http://www.blogger.com/profile/09640896055718837800 Brad Tarpley

    This is beautiful! Great job!

  • Kendall

    Wow this is going to help a lot I hope! I’ve never used a photo editor, so we’ll see how that goes.

  • http://www.blogger.com/profile/00739008885378201499 MARCO, HYEOCK KWON

    am so green with your works! it’s just great. every android user should know your skills.
    GREAT JOB!
    from Korea[South :/]

  • http://www.blogger.com/profile/05641547826826470603 09er

    Great job! I love it!
    Got a question is that how to set up the shortcut for the favs, social ..etc to guide to their-own screen?
    Thanks for you great innovation and idea!
    from Taiwan :)

  • http://www.blogger.com/profile/17036076151396961402 Jordan Hotmann

    With adw ex launcher: long press on the screen and select custom shortcut, then select pick your activity, launcher actions, then choose the screen number you want to jump to.

  • http://www.blogger.com/profile/12242614280262476392 alex miller

    any way to get a PSD?

  • http://www.blogger.com/profile/12242614280262476392 alex miller

    Never mind about the psd, but if it would be too much trouble could you explain how you used tasker to display the SMS? Like a step by step? I can’t seem to figure it out…

  • http://rk.md/ Rishi

    Nifty layout! Thanks for sharing! :-)

  • http://www.blogger.com/profile/10330499857566171269 Shaun Rynne

    How did you make the android button and other 4 buttons go to their own pages?

    • http://www.blogger.com/profile/17036076151396961402 Jordan Hotmann

      Many 3rd party launchers (adw, nova, etc) have built in ‘actions’ that allow you to jump to a specific screen. I was using adw when I made this homescreen, and I just setup a widget using desktop visualizer with a clear image and for the action I selected the adw ‘action’ that jumps to the screen I want.

    • http://www.blogger.com/profile/10330499857566171269 Shaun Rynne

      I am currently using Go Launcher, and looks like you can only go to Home and not to individual pages which is disappointing.

  • Anonymous

    What are you using for to bring up the quick launch menu and the ‘more’ list of apps?

    • http://www.blogger.com/profile/17036076151396961402 Jordan Hotmann

      It’s a ‘Desktop Visualizer’ widget that opens an ‘Application Folder’ folder.

  • http://www.blogger.com/profile/00043335160154743453 Akash Maharjan

    How do you make the app drawer open up while u click ‘apps’ button.. app drawer itself isn’t an app, is it? While using desktop visualizer widget, i cannot find app drawer in application list. What should I do?

    • http://www.blogger.com/profile/17036076151396961402 Jordan Hotmann

      Most aftermarket launchers have custom actions built in that allow you to open the app drawer or show notifications, etc.

      With adw ex launcher: long press on the screen and select custom shortcut, then select pick your activity, launcher actions, then choose the screen number you want to jump to.

      Other launchers are probably similar steps.

  • kemala ang

    please make a tutorial video..please..please..please…pleaseee (: