A beautiful and well-planned home screen on your Android tablet or smartphone is not just cool to look at, but is also functionally efficient. This is why it's a good idea to spend some time creating one for yourself.

Last week, I decided to get myself a gorgeous home screen to replace the default one I had stuck with for so long. Here's a detailed look at the whole process. If you follow it step by step, you can get the same eye-catching home screen for your device and learn to experiment with more design recipes.

Step 1: Hunt For A Home Screen Recipe

As a starting point, you need a template on which to base your home screen. This may be the most difficult part of the process: with pages and pages of stunning designs online, it's tough having to pick only one.

There are several websites like MyColorScreen and deviantART where you can find a nice home screen template. MyColorScreen seemed to be the most popular of them all, so I opted to search there.

After hours of looking for the perfect design recipe, I finally chose one (and secretly a few more) to get started. It's called Retrotiles [No longer available] and I found it in the Screens of the Day section of the website.

homescreen-template

I had to skip quite a few designs I liked because they required paid versions of certain apps and widgets. I was pretty sure that I'd be tempted to try different designs every few days, so for the time being, I picked a recipe that was based on free apps only.

Step 2: Gather The Ingredients Required

Design recipes are executed using one or more apps and widgets. On the MyColorScreen website, the required home screen ingredients are usually listed along with the screenshots of the design. Sometimes, they can be found in the comments section instead. The wallpapers and other design elements are provided by the designer. If they aren't, you can request the designer to share them.

homescreen-recipe

Since you're recreating this design with me, you'll need the wallpaper and widgets uploaded by the designer to the Retrotile and Chameleon Weather archives. It's best to download these archives to your PC, extract their contents to folders, and then push those folders to your device using a data cable or a file sharing service. If you have a Dropbox account, our Dropbox guide will tell you what you need to know about accessing files from any device including your Android-based one.

You can also download the archives directly to your device and extract them using a file manager with archive support, but this can be tricky and unnecessarily time consuming if you don't know where to begin.

You'll also need to install Nova Launcher, Ultimate Custom Widget(UCCW), and Simple RSS Widget from Google's Play Store.

Step 3: Start Cooking

Let's begin by preparing the wallpaper first. If you observe the Retrotiles template screenshot above, you'll see that there are two home screens, the first of which showing the left half of the original wallpaper and the second screen showing the right half.

You can find the original wallpaper, Retrotile wallpaper.jpg, in the Retrotile folder you downloaded. The wallpaper is 1440x1280 in dimension, so each of the split wallpapers must be 720x1280. These dimensions may vary according to the display resolution of your device. To ensure that the wallpapers fit your device screen perfectly, you'll need to bring them to the right size first.

Do a Web search for the specs of your device model and note the resolution listed there. Then use an image editor to resize the original wallpaper to the height of your device display. For now, do not change the width manually. Let it scale proportionally with the change in height.

The display resolution of my tablet turned out to be 600x1024, so, using PicMonkey, I resized the wallpaper by setting the height to 1024. This automatically reduced the width to 1152, keeping the height-width ratio constant.

To create the wallpapers for the two screens, I cropped the modified (1152x1024) wallpaper to 600x1024 twice, separately, in such a manner that one of them resembled the first screen of the template, and the other resembled the second screen. In the split screenshot below, the image on the left is the final wallpaper for the first home screen and the image on the right is the final wallpaper for the second home screen.

Just to make the wallpaper modification process easier and more comfortable, it's a good idea to use your PC to make the necessary changes.

split-wallpapers

If your device dimensions exceed those of the wallpaper, it might appear stretched/distorted on your device screen.

Throw In A Few Launcher Tweaks

Launcher apps form a major ingredient in home screen design recipes. We will be using Nova.

From within Nova, long-press the home screen to bring up the Add to Home Screen menu. Tap on the wrench icon from this menu to open the Nova Settings screen, where a brightly colored message will prompt you to set Nova as the default launcher. Tap on that message and select Nova Launcher to okay the change. In the Nova Settings > Dock screen, ensure that Enable Dock is unchecked.

nova-settings

Next, navigate from Nova Settings to Desktop > Desktop Grid, and make the following changes:

  • Set grid size at 8x6
  • Set up two home screens to slide through
  • Ensure that the width margin, height margin, and scroll effect are set to None
  • Check the Resize all widgets and Widget overlap checkboxes
  • Uncheck the Overlap when placing checkbox

Apply The Wallpapers To Add Some Color

Since Nova Launcher's feature of being able to display a unique wallpaper on each screen was not working for me, I installed Multipicture Live Wallpaper to get that effect, and I have described the process here accordingly.

Navigate to Add to Home Screen > Wallpapers. Slide the screen to the left and open MultiPicture Live Wallpaper from the new screen. Now jump to Settings > Common settings > Crop/Resize ratio and ensure that the Fit to Fullscreen option is selected. Return to the Settings screen and use the following three steps to apply the wallpaper to the first screen.

  1. Add individual settings > Select screen > 1 > Ok
  2. Screen 1 settings > Picture source > Single Picture. Through the Complete action using popup, select your file manager and open the location where you have saved the cropped wallpapers. Pick the one we have kept aside for the first screen.
  3. Press the Back button till you can see the chosen wallpaper image with the options Settings and Set wallpaper at the bottom. Tap on Set wallpaper.

To apply the second wallpaper, repeat these three steps by replacing 1 and Screen 1 settings with 2 and Screen 2 settings respectively, and don't forget to select the second wallpaper instead of the first.

Add Widgets To The Mix

Once you have set up the launcher, it's time to configure one or more widgets to display your favorite apps and shortcuts on the home screen. Let's begin by placing the date-time widget.

  • Navigate to Add to Home Screen > Widgets > UCCW. As you can see in the list that appears, the UCCW widgets come in various grid sizes. You can resize these widgets on the go.
  • Pick UCCW (4x2), as the date-time display requires a 4x2 widget. You'll then be directed to a UCCW screen that lists recently used widgets. Since you're displaying the date-time widget for the first time, you'll need to select it from its source folder. To do that, tap on UZIP at the top right and navigate to the Retrotile folder you downloaded at the beginning of this exercise. Select retrotile time.uzip and the date-time widget will instantly appear on the home screen.
  • If you wish to scale the widget size up or down to make it fit better, all you need to do is long-press the widget where it rests on the home screen, tap on the Resize option that appears, and drag the resize handles as required.
retrotile-date-time-widget

This entire procedure applies to all the UCCW widgets, and the required files (in uzip format)  are named after the corresponding widgets, which is why you'll have no trouble setting up the remaining widgets as explained above. Do make a note of the widget sizes given below, so that you can pick the right ones from the Widgets menu.

  • Battery, Music, Phone, SMS/MMS, Gmail, Flipboard, Camera, WhatsApp - 2x2
  • Play Store - 4×2
  • Weather - 2×4
  • Apps, Files - 2×1
  • Browser, Facebook - 4×1

To set up the Simple RSS widget on the second screen, navigate to Widgets > Simple RSS Widget. Once the widget appears on the screen, tap on the wrench icon at the bottom right in the widget to manage feeds, widget appearance and settings. To make the feed background appear transparent, navigate to Appearance Settings > Background, and set Alpha value to zero.

simple-rss-settings

Displaying the unread count for apps like Gmail is possible only in the premium version of Nova Launcher. As we're using the free version for now, you can see a set of dashes where the the unread count is supposed to be.

If you run into any trouble while setting up the widgets, Erez's article on UCCW widget setup can help get you back on the right track.

Step 4: Season And Serve

There's no rule that says you have to follow the recipe to a T. You can tweak the screen to your satisfaction by adding more widgets and apps in one of two ways:

  • Drag your favorite apps from the App Drawer to the home screen or select non-UCCW options from the Add to Home Screen > Widgets menu. I chose to add a Search bar to the second screen.
  • Add new UCCW widgets to replace the ones you don't need. For example, as I did not need the Phone and SMS/MMS widgets, I replaced them with two of my favorite apps, Pocket and Writer. You can similarly create new widgets to your liking by using the following method.

Creating A New Widget

  • Navigate to App Drawer > UCCW and tap on Open in the top bar of the app screen.
  • Select Open uzip from the menu that pops up. If you're prompted with a skin overwrite option at this point, click Yes to proceed.
  • Open the Retrotile folder if it doesn't open automatically, and select any app from that folder. Don't worry about overwriting anything, as you'll just be creating a copy. We're choosing an existing file so that the new widget can inherit the appearance of a default one from the template. I selected phone.uzip from the folder.
    uccw-uzip-overwrite
  • Selecting the uzip file will bring you back to the UCCW main screen with the settings for the chosen widget displayed.
  • Navigate to Edit objects > Static Text, scroll down to the bottom of the screen, and edit the Text field to enter the name of the application to display. Since I wanted to create a widget for Pocket, I replaced Phone with Pocket.
  • Return to the previous screen and go to Hotspots > Hotspot 1 > App. Pick the application for which you want to create a new widget. I chose the Pocket app.
    uccw-screens
  • If the new application has any unnecessary parameters, you can choose to hide them. The Pocket app did not need the Missed Calls parameter that came with phone.uzip, so I tapped on Add/Remove objects in the main UCCW screen and unchecked the corresponding checkbox from the parameter list that was displayed.
  • Now tap on Save from the top bar, select Make uzip (for sharing), and save the widget under a suitable name. I saved it as pocket, of course. This edited file automatically gets exported to Home > uccwOutput in the format file-name.uzip. Move it to the Retrotile folder and install this new widget as you did the rest.

I used the same method to create a widget for the Writer app and to change the location from Balanabovo to Mumbai, in the weather widget. I also used it to unlink the browser widget from the Firefox app and relink it to Mercury Browser, the browser that I use on my tablet.

The widgets that have come bundled with the template, such as the Play Store and WhatsApp widgets, are automatically assigned to the respective apps only if you have those apps installed on your device.

If you're comfortable using Photoshop, you can make more design tweaks by downloading and modifying the Retrotiles Photoshop file.

As the Pocket and Writer widgets looked slightly odd, I moved around the widgets from both screens till I was happy with the arrangement.

widget-positioning

After turning my head this way and that to look at the final result, I declared the finished piece ready to serve. Here's a shot of my home screen as it was before this makeover.

homescreen-before-makeover

And ta-da! Here's my beautiful home screen now. Isn't the transformation amazing?

homescreen-after-makeover

Ready To Rustle Up A Home Screen Of Your Own?

If you're using design recipes from MyColorScreen, you can always install their Themer app, which is in open beta as of Jan 2014, to change home screen themes with a single click. But as I have discovered, setting up everything yourself is more fun and satisfying than having it done for you. Also, if you learn how these home screen setups work, you're not limited to designs from MyColorScreen.

A sleek home screen is a happy place to rest your eyes in between tasks. It also makes it convenient to access your regular apps with minimal fuss. Once you figure out how launchers, widgets, and their settings are supposed to work, you'll probably spend too much time experimenting with a different home screen every week. Don't say I didn't warn you.

What's your idea of a gorgeous home screen? Let us know in the comments.

Image Credits: Featured image is a derivative of Golfland start by twid (used under CC)