[HOW-TO] XBOX-Dashboard-Style homescreen - Tutorial

---

just a little tutorial, because people asked for… thx!

this is how it looks like: http://youtu.be/j7fqhqPAd98









What you need:

ADWLauncher EX
DesktopVisualizer
DesktopVisualizer ImageCrop (Trial)
Multipicture-LiveWallpaper
FolderOrganizer (light) … to get a text-style app-launcher-Pop-up
A 2D-graphics-tool of your Choice

Some time…


1 - Basic Setups (only modified settings, all others are default):

ADW-LauncherEX:

User Interface:
Density-hack: ON; New Icons: ON; Icon Size: 100; Main Dock: Deactivated

Homescreen
Columns: 10; Rows: 6; Widget-Overlay: ON; Statusbar: OFF; Homescreen Rotation: only horizontal

Applist:
Background-colour: all Black

Animation and effects:
Effect: slide; Scroll-speed: 125

On homescreen:
Statusbar removed (after creating 9 empty homescreens…)


Folder-Organizer:

Create Labels for each “Group/Type” of app you like to launch from homescreen, e.g. “maps” or “office”, add those labels to the selected apps.
Layout Labels: “List with text”
I renamed each app with two extra spacings in front of the original name, so the text is a little bit sliding away from the boundary of the applauncher-pop-up.


2 – Layout-elements:

I got four types of elements on my homescreen:

Green tiles are DV-widgets launching an app directly

Grey tiles are DV-widgets launching an Folder-organizer-folder-link ( add modified link -> activity: FO-folder-link -> choose Label)

Picture-Tiles are also DV-Widgets launching an app or a FO-folder, some of them are only backgrounds

Widgets-sizes / Image-sizes:

1x1 = 119 x 112px
1x2 = 119 x 230px
2x1 = 244 x 112px
2x2 = 244 x 230px
2x3 = 244 x 348px
2x4 = 244 x 466px
4x1 = 494 x 112px
4x2 = 494 x 230px
4x3 = 494 x 348px
4x4 = 494 x 466px

Menu-buttons are Launcher-action Links of ADWlauncherEX… with a transparent Icon (only “text”). “Text” is also an image, maybe you can use simple text - I doesn’t work for me because of the different text-sizes .... design is consistency!


3 - Creating Layout:

First think about organizing your different homescreens with app categories, which apps should be launched directly, which widgets you like to use and so on... e.g. I got a homescreen for “System”, “Video”, “Audio”... This step is important, because there is still a lot of things to do, so it saves up your time! I did all the Layout in my graphics-program and then exported all the icons... just a tip

More important: KEEP IT SIMPLE! Don´t create to much colours and elements! The XBMC-Dashboard and Metro at all are this amazing because of their simplicity!!!

(...)

I tested many ways of how-to setup this amazing metro-style-Dashboard (shout on me, I really love this clean desktop-style WP7 and Win8 have….) on my homescreen, three of them are most interesting:

V1: “Pure”

All Tiles are created with background, no transparency. This is great if you like to change the positions of your tiles very often and do not use Widgets. You only need one background image for this. If you use widgets like colorizewidgets etc., positioning is not very accurate, Horizontal and vertical spacings are quite different... not very metro !!!

I tested using a “dummy-DV-Tile” in second Layer “behind” Widgets with transparent backgrounds. Sometimes it works, sometimes the dummy-widget gets in front... Widget-overlapping is not as accurate in the moment as needed for this...


V2: “background”

All Tiles are splitted up in two parts:
Part one is the “Colour”, baked into the background-image – each homescreen has its own image (use multilive-wallpaper for this...)

Part two is the DV-Icon itself, it is an Image with transparent background, only text and / or Icons are visible. The transparent background has to have same size as the tiles from V1. -> to keep its size and position on homescreen.

It is a little hard to get the right vertical position for the backed-in tiles, there seems to be an offset in positioning wallpapers with multilive-Wallpaper...

This Version works great for me, because i do not change my tiles very often. There is no problem with overlapping widget-backgrounds and so on...


V3: “Mixed up”

A combination of both: Tiles with “real” background and Tiles with transparent background, Colour backed into the wallpaper... Gives you a great assembling-effect when changing homescreen and all those different tiles are floating together....

(...)

As you can see, most things are done in a 2D-graphics-program. When finished with your Layout, all you have to do is exporting all your elements and put them together on your tablets homescreen...

(...)


I hope, this little tutorial might help you creating your own great homescreens!


One last thought:

Android is great because of its flexibility with ROMs, apps and modifications,...
But its Design is a bucket full of crap... there is no continuity in Design-elements, every apps looks different...

So thats why there is a little wishlist to make creating own designs much easier in the future, as long as google dosn´t change anything....;) Maybe someone likes to create a homescreen-Launcher like this ??? ;)

...a homescreen-launcher with layer-function to have better control over widget-overlapping
...the possibility to resize widgets without being fixed to a grid
...better rendering of Textelements, icons and widgets
...more widgets with pushed informations like incoming mails etc...
...the possibility of resizing Icons without loss of quality (why are 192px-icons rendered like 72px-ones???)
...smoother animations between those homescreens (my prime is powerful.... but why are there some lags in changing homescreens???)
...and many more...

Greetings, Charlos


----------


additions:

120411 : Added original (selfmade) Wallpaper.... PNG 1280x800px... use it as basis for your V1 or V2-Version of the Dashboard-Style homescreen...


120416 : Just an idea ( I am capable in graphics, ´cause of my profession, not in programming....): to design homescreen-designs based on tiles, easiest way would be to have a universal widget for links... needed settings:

- background: a) - a flat colour, selected by colour-picker, or b) - a picture or a part of it ... all stretched to maximum of widget-size (independently stretched to X / Z - axis) or variable with a slider, to control horizontal and vertical spaces between widgets

- background-settings: e.g. rounded edges (global alpha-map), transparency, global colour,...

- text-area (like simple-text) with settings for position, size, font ...reference would be widget-width and height (1,2,3,4,5...)

- icon area, also with settings for position and size, and capable of using PNGs with alpha-map... and - maybe - the possibility to choose render quality seperatly (picture maps with 72, 128, 254, 512px render-map)

all elements like shown in my example could be made with such an universal - widget - without the need of managing all elements in a 2D-graphics-tool... would be a little bit easier for all of us ;)

...maybe somebody is cabable in programming, `cause of profession, and not in graphics? send me a PM!

Awesome!

---

FIRST!!

I love the xbox dashboard and I think I'll try set this up today, will let you know how it goes! It looks like you've put a lot of effort into this!

If...

---

...I missed some settings.... tell me, I will add it in the tutorial...

Looks great! Thank you for sharing this!

This is great, looks beautiful. I've been lazy about doing my hubs, but after seeing this, I'm getting off my butt and getting to it.

where can i get the wallpaper?

What's the original resolution that you used for your wallpaper? Otherwise making the tiles on the wallpaper would be annoying if they didn't line up with the widgets.

Hey, Thanks for the TUT...I am trying to follow all the instructions step by step but some settings I can not find, for example


Applist:?
Application color: All black

Where is the "homescreen" option? I did found the "colums" and rows" but not by following the guide

I'm not trying to sound demanding, just asking if this can be more precise please

Thanks!

Sent from my Transformer Prime TF201 using XDA Premium HD app

Originally Posted by hbk19

What's the original resolution that you used for your wallpaper? Otherwise making the tiles on the wallpaper would be annoying if they didn't line up with the widgets.

I downloaded one of them and it's 1184x740.

hmmmmpf.... original Wallpaper is a png, 1280x800px.... maybe something went wrong when converting to jpg...