[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:
DesktopVisualizer ImageCrop (Trial)
FolderOrganizer (light) … to get a text-style app-launcher-Pop-up
A 2D-graphics-tool of your Choice
1 - Basic Setups
(only modified settings, all others are default):
Density-hack: ON; New Icons: ON; Icon Size: 100; Main Dock: Deactivated
Columns: 10; Rows: 6; Widget-Overlay: ON; Statusbar: OFF; Homescreen Rotation: only horizontal
Background-colour: all Black
Animation and effects:
Effect: slide; Scroll-speed: 125
(after creating 9 empty homescreens…)
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:
are DV-widgets launching an app directly
are DV-widgets launching an Folder-organizer-folder-link ( add modified link -> activity: FO-folder-link -> choose Label)
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
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:
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...
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...
Added original (selfmade) Wallpaper.... PNG 1280x800px... use it as basis for your V1 or V2-Version of the Dashboard-Style homescreen...
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:
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
e.g. rounded edges (global alpha-map), transparency, global colour,...
(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!