[HOW-TO] XBOX-Dashboard-Style homescreen - Tutorial - Asus Eee Pad Transformer Prime

just a little tutorial, because people asked for… thx!
this is how it looks like: http://youtu.be/j7fqhqPAd98
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
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

---

hbk19 said:
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.
Click to expand...
Click to collapse
I downloaded one of them and it's 1184x740.

---

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

---

Sorry, i am using german version of ADW, have to translate it all....
but to take some time for searching gives you a lot of new knowledge about ADW, isn´t it this way??? ;-)
for "Applist-settings": go ADW-Einstellungen / Benutzeroberfläche / Appliste-Einstellungen / Hintergrundfarbe
translated (maybe): ADW-Settings / Userinterface / Appdrawer-Settings / background-colours /... hope so...

---

yeah im having some issues with this rom...i cant get the top status bar on ADW to go away and the settings are off screen which is weird...
great tutorial tho very well done ...maybe its just me not getting it to work well

---

Man I really love this layout but don't know where to start. I need a step by step instruction. Haha

---

I'm working on something similar with Nova Launcher. Basically, I've found that you really need to know how to work whichever image editing software you use.
The hardest part is getting the wallpaper to match the grid. Your tiles have to be accurately sized and precisely placed, or it pretty much ruins the look.
I should have my own interpretation of this done by tomorrow. Thank goodness for Photoshop.
Thanks, OP, for the awesome idea.
Sent from my SGH-I897 using xda premium

---

getting all icons into the grid was the hardest part of creating this layout.... thats right...
I took me a long time and many "Test-drives" to get it working.... Thats why i am using Version 2 (Background) right now - it is much simpler to create!
...even if it is not with "real tiles fllying into the screen" (would be much greater...!)
.... maybe with another launcher - would be interessting if it works better on Nova-launcher...

---

to remove the statusbar, just add a adwlauncher-action link on your homescreen: Statusbar on/off.... when removed (the statusbar) you can remove the link also....

---

Here's a video of what I ended up with on Nova Launcher Prime: link.
Not exactly XBOX-Dashboard style, and not exactly hubs either, but slightly similar and very clean. I'm enjoying it.
Thanks for the inspiration, Charlos.

---

hbk19 said:
Here's a video of what I ended up with on Nova Launcher Prime: link.
Not exactly XBOX-Dashboard style, and not exactly hubs either, but slightly similar and very clean. I'm enjoying it.
Thanks for the inspiration, Charlos.
Click to expand...
Click to collapse
wow...that looks really nice man! I just need time to make this work, but if you or Carlos can get a step by step tut that would be awesome
Sent from my Transformer Prime TF201 using XDA Premium HD app

---

Looks great !!!
Any Lags with Nova Launcher ??? Did you test with more screens ???

---

I haven't had any lags, but I haven't tested beyond the 3 screens, since 3 is more than enough for me.
Not using a live wallpaper really helps cut the lag though. In the end, I ended up using individual tiles and Desktop Visualizer, because multi-pic lwp would keep stuttering.
Sent from my SGH-I897 using xda premium