How to Recreate the “One Goal” Custom Home Screen Layout

In this guide, I’ll show you how to replicate my custom Android home screen layout, “One Goal”, using just ADW Launcher EX, Minimalistic Text, and a custom background.

One Goal - The final result

Getting Set Up

First of all, here are a few things that I won’t be addressing:

  • Installing apps
  • Taking screenshots
  • Installing fonts
  • Using Photoshop

What you’ll need, to make this layout from scratch:

Fonts:

Other files:

Once you’ve got all that, you’re ready to continue…

Setting Up ADW Launcher EX

Let’s start!

Note: my interface is set to Portuguese, but I’ll guide you through it.

Get ADW Launcher EX up and running, with two home screens.

First, set up the grid size: 9 columns by 10 rows. (UI Settings > Screen preferences > Desktop Columns and UI Settings > Screen Preferences > Desktop Rows.)

Next, hide the status bar and desktop dots, and allow overlapping widgets. (These options are all in UI Settings > Screen preferences: check “Hide StatusBar”, uncheck “Show desktop indicator”, and check “Overlap widgets”.

Also, hide the icon text. (UI Settings > Screen preferences > Advanced settings: check “Hide icon labels”).

Now remove the dock background, by selecting “None” as the value of “Main dock”:

The ADW Themes Preferences menu

Next alter your General Behavior > Animation and Effects settings according to your preferences. I’ve turned off “infinite scroll”, and have turned on “wallpaper scroll” – you’ll need this, if you want to use MP Live Wallpaper and ADW’s Sense previews.

Finally, set “dock size” to 1, in UI Settings > Main Dock.

Setting Up Your Home Screens

Set up MP Live Wallpaper using this wallpaper for both screens. (You can download it from here; it’s 540x960px, but you can easily adapt it to fit your phone’s resolution). This will be the base for our layout.

Basic Wallpaper - click for full size

Add to the screen an ADW Launcher Action shortcut (long-press the screen, then select Launcher Actions). Choose “Open/close App Drawer”:

Launcher Actions

Long press the icon you just added and select Edit:

Edit the new icon

Tap the icon, then choose the “blank.png” file from the zip that you downloaded earlier. It will look like this:

No picture for the icon, because it's fully transparent.

Drag this icon – beware, as it will be transparent – to the dock, and tap it to make sure it opens the app drawer.

We are now ready to add Minimalistic Text widgets to the screens.

Adding Widgets

We’ll use a few different sizes of Minimalistic Text widgets:

  • Clock: 2×2
  • Location: 3×1
  • News, Music, Gallery, Nav, Other: 1×1
  • All the rest: 2×1

I’m only going to show you the setup for the first MText widget, the clock – you can use the MTPrefs for everything else.

Always, always give your widget a name, for future editing and sharing:

Remember to name your widgets

Set MText to hide your widget background:

Uncheck 'Show background'

Under Text Style, tap “Normal”, then select “font family”, and choose the right typeface to use: “Tall, Dark and Handsome”, with a size of 168dip, in white, with no blur or other effects.

You'll need to install the 'Tall, Dark, and Handsome' font

Now we’ll create the layout for our clock. Tap “Predefined layout” and select “Custom…”, then tap “Custom layout” to open this menu:

Custom layout

Copy the options as above. In English, the top line is “Static text” (just blank); the second line is “Hour (24h)”, “Static text” (just “:”), then “Minute (2 digits)”.

Remember to save your widget’s setting, by tapping Save at the bottom of the main menu.

Continue to create the rest of the widgets for Screen 1. Alternatively, unzip the MTPrefs zip file and copy all mtprefs files to this folder: /sdcard/MinimalisticTextPreferences They will look like this on your sdcard: /sdcard/MinimalisticTextPreferences/OG_clock

Now position the widgets, until your screen looks like this:

Screen 1, with widgets

Next, set up Screen 2:

Screen 2, with widgets. 'Porto' is my location.

Opening an App With a Widget

That red “N” in the above screenshot is a 1×1 Minimalistic Text widget with static text and color set to transparent. It shows the “N” because it will be a widget to open a designated app.

Here’s how: in the settings for that widget, under Tap behavior, select “Start another activity”.

Then, tap “Select an activity or a shortcut”, and then select an app from your list of apps – in my case, I’ll make it open Pulse News.

Remember: always save your widget configurations, for later revisions.

Now let’s get over to the computer.

Putting It All Together

In Photoshop (or any image editing program), draw the graphics to fit around the widgets. You will find this much easier if you use a screenshot of your screens (with the widgets) as a guide.

Here’s what mine look like:

Screen 1:

Click to see full-size

Screen 2:

Click to see full-size

Upload the finished wallpapers to your phone, and change the MP Live Wallpaper settings to use these wallpapers instead of the basic templates we had before.

That’s it – you will now have your own amazing “One Goal” home screens!

The final result

Thanks for reading, and I hope you enjoy One Goal!


  • Nik

    My phone isn’t letting me download the zip files. Do I need to do that on the computer and move it to my phone?

    • http://michaeljameswilliams.com/ Michael James Williams

      Probably, yes. Not sure why they’re not downloading, sorry. It might be easiest to unzip them on your computer and move the contents across as necessary.

  • haragog

    Fun seeing a fellow Portuguese writing for a dear blog! :D Yay

  • http://thepeachdesign.com Peach

    Kudos to Paulo Cardoso for this great tutorial. Looking forward to more of your creative homescreens. :)

  • http://bradysewall.com Brady

    I know the author says they won’t go into how to install fonts, but I need help on that aspect. I know how to replace system fonts, but when I place the ttf files in system/fonts, set permissions and reboot, the font does not show up in Minimal Text Widgets.

    Any help? Thanks!

    • http://bradysewall.com Brady

      Nevermind. Found out how. When you’re in Minimal Text Widgets, go to Global Settings and define a font folder.

      • http://michaeljameswilliams.com/ Michael James Williams

        Thanks for explaining :)

  • http://Guiasapple.com SrTapir

    Congrats, one of the best articles I’ve seen on Android.app.storm, great quality!

  • PC

    Hope you will enjoy it :)

    Thanks Android.appstorm.

    PC

  • Remy Pham

    Thank you a million times! I can’t wait to get started. Amazing work.

  • Pingback: Best of AppStorm in February - Just another ReviewMonsters.net Sites site - Test

  • Ravi Tej

    Copying the mtpref files isn’t doing anything on my Android (Samung Galaxy Ace). Also, I have downloaded the Tall Dark and Handsome font but I am seeing that the maximum font size is only 150dip. Any fix for the above problems? Kindly help

  • Erik

    So, it looks good, but the graphics are not really live? i.e. the calendar will always show 31 day month starting on sunday? The cpu and battery graphics are always the same? The weather icons are always show the same 9 sun images regardless of weather?

    Just trying to understand.

  • Pingback: Best of AppStorm in February | Android.AppStorm

  • Pingback: Best of AppStorm in February | Mac.AppStorm

  • Pingback: Best of AppStorm in February | Windows.AppStorm

  • Pierre

    Well first, thanks a lot.
    Now I do have a problem with the font size … I can’t get it bigger … I can set up only to 150dip but actually no effect at all …
    s3 here don’t know if it’s the issue or not.

    thanks

  • Sovalus

    Thanks for this guide. The design is awesome and I am currently working on setting up a similar home screen!

    @Pierre
    I found it easier to override the text size in the custom layout option.

    However, my text widgets don’t seem to be aligning at the top unfortunately

    • Sovalus

      Scratch that last comment, I hadn’t set the text to top align in the vertical block option! :)

  • Pingback: The Best 2012 Android Apps, Reviews and Roundups | Android.AppStorm

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow