[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!

Sorry it took so long. Works been kicking my butt. But ya here's full on written instructions on how to Xbox Theme your TFP. Consider this a "How To Xbox Theme your TFP For Dummies" haha as i've tried my very hardest to create an easy guide for even the most novice users. If I missed a step please let me know. Enjoy and let me know if anyone still needs help.

Download template here: http://fav.me/d4ydndp

What I Used:
ADW Launcher EX <- your launcher
Desktop Visualizer <- gives you invisible links for your tiles
Multipicture-LiveWallpaper <- allows you to have up to 9 screens
Folder Organizer (Light) <- gives you a list style folder
Simple Text <- make icon style text in a simple manner
AirDroid <- Godsend to homescreen editing
Beautiful Widgets <- My weather app
Xbox Live Avatar Widget <- Pure Awesomeness
A graphic program (In this case I used Photoshop CS4)

Before You Start:
Think about 9 different types of screenshots (i.e. home, social, video, music, etc.) as the 10th screen will be your apps drawer
Have an idea of which apps/folders you would like within each screens/wallpaper

1 - Basic Setup:

A. ADWSettings:
a. UI Settings 


1. Icons
. Density Hack (checked)
. Fancy Background (unchecked)
. New Icons (checked)
2. Main Dock
. Enable Dock (unchecked)
3. Screen Preferences
. Desktop Columns – 10
. Desktop Rows – 6
. Show Desktop Indicator (unchecked)
. Home Orientation - Landscape
. Hide StatusBar (checked)
. Overlap Widgets (checked)
. Advanced Settings (all unchecked)
4. Drawer Settings
. All Personal Choice
. Background Color - #ff000000
b. General Behavior
1. Animation and Effects
. Infinite scroll (unchecked)
. Screen transition – Normal scroll
. Desktop scrolling speed – 120-130
. Desktop Bounce – 25 (personal choice)
. Wallpaper Scrolling (checked)
. Everything else is personal choice

B. Folder Organizer – think about which folder(s) you want to create (I have a music app folder and games folder)
a. Under Labels click any of the five options you have on the farthest right column (I’ll use games for example)
1. Click Layout
. Choose List With Text
b. Click Applications under the Labels column on the left hand side and scroll down and click an app that pertains to the “Label” you originally clicked (i.e. pick a game for a Games Label)
1. Click Rename on application you choose and add two extra spacings in front of the original name (“Angry Birds” is renamed to “ Angry Birds”)
2. Once you’ve done that go to the farthest column on the right and check the box right next to the word Game and follow up with the “<” symbol that’s highlighted (this puts the app that you selected into the Label that you box checked)
3. Repeat step b. for all game apps
c. Repeat Steps a. and b. for another folder (in my case I made a music app folder)
d. Once the folders have been made to your liking, click on one of the newly made custom folders (I’ll use Games for example)
1. Click Edit on the lower right hand corner
. Label name – name your folder with a small punctuation like “.” Or “,” minus the quotes (It’ll make sense later) (I used “.” for games and “,” for music apps)
. Fixed sort (unchecked)
2. Repeat step d. for all the folders you’ve made

C. Simple Text
a. Click “simple” of the four options given
1. X-Coordinate – 0
2. Y-Coordinate – 75
3. Text Size – 40
4. Rotate – 0
5. Auto scale, Gradient, and Shadow (unchecked)
6. Click the Color Box in the upper right hand
. Place white circle in the middle left hand corner to give you a gray color
. Slide vertical bar in the Alpha bar all the way to the left
7. Rename “simple” with any of the screenshot titles you want (i.e. home, social, video, etc.)
8. Click the transformers menu button on the bottom next to the back and home button (I’m not sure what its called) and select Save Style
9. Repeat steps 7 and 8 until you’ve created a simple text for all 10 of your screens/wallpapers (for my apps I made a “ooo” simple text in a white color)


2 – Layout-elements:

Refer to the template I provided for a better understanding


I have three types of tiles:

Green tiles
Picture tiles
Widgets tiles

Tile sizes: (use whichever sizes your hearts desire but I’ve highlighted the sizes that are found in my template)

1x1 = 119 x 112px
1x2 = 119 x 230px
1x4 = 119 x 466px
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


3 - Creating Layout:



First think about organizing your different screens, which apps should be launched directly, which widgets you like to use, which screens have folder, etc.

I have a screen for Search, Home, Social, Video, Music, Games, Image, Global, System, ooo (apps). Your setup doesn’t have to look like this as I encourage each person to have a sense of uniqeness to their layout. Figure out the names to all your screens and make each label in Simple Text. This step is important, because there are a lot of things to do and it saves you so much time! Trust me when I say that the simple text is the most tedious part of the whole setup and I found this out the hard way.

I did each layout in Photoshop and exported each screen to my transformer. Feel free to customize the template however you would like to (if you aren’t Photoshop savvy, P.M. me and I can help by making new tiles or teaching you how to do them). For those that have Photoshop experience, move the tiles around to your liking but keep a 7px space difference between each tile (to the left, right, above, and below). Once you’ve finished your layout on Photoshop, transfer each screen/wallpaper via AirDroid into a specific folder and name it “Xbox Theme” or whatever you prefer. Now the fun begins:

A. Multi-Live Wallpaper:
a. Common Settings
1. Background Color – Black
2. Crop/Resize Ratio – Fit to Fullscreen
3. Decrease Saturation – 100%
4. Decrease Opacity – 100%
b. Add individual settings
1. Add each screen under Picture source in an order you’ve designated (but remember the order)
2. Note that you are only allowed 9 screens/wallpapers and the 10th “screen” will be your app drawer
c. Lock screen settings (personal choice)
d. Transition type – Slide
e. Maximum memory usage – Auto
f. Color depth – True Color (24-bit)

B. Simple Text: (I can’t stress how tedious this is)
a. On each screen long press till you get Add to Home Screen and click Launcher Actions
b. Add Screen 1, Screen 2, Screen 3, etc.
c. Add Open/Close App Drawer
d. My setup:
1. Screen 1 – Search
2. Screen 2 – Home
3. Screen 3 – Social
4. Screen 4 – Video
5. Screen 5 – Music
6. Screen 6 – Games
7. Screen 7 – Image
8. Screen 8 – Global
9. Screen 9 – System
10. ooo
e. Long press Screen 1 and Edit
1. Delete Screen 1 and leave name blank
2. Click the original icon box and select ADWTheme IconPacks
3. There you will find the pre-made simple text icons that you created as instructed to before
4. Select the text according to what “Screen 1” was (in my case is was “Search”)
5. Press the transformer menu button right next to the back and home button and select Save Icon and continue by pressing OK
f. Repeat step e. for all 10 screens/wallpapers including “ooo” for Open/Close App Drawer
g. Repeat steps a. through e. for all 9 screens/wallpapers (see told you it was tedious)
h. If you’re on Screen 1 (in my case its “Search”) long press on the corresponding launcher action (“Screen 1” launcher action icon)
1. Delete Screen 1 and leave name blank
2. Click the original icon box and select ADWTheme IconPacks
3. There you will find the pre-made simple text icons that you created as instructed to before
4. Select the text according to what “Screen 1” was (in my case is was “Search”)
5. Color Box – White (personal choice)
6. Text Size – 50
7. Press the transformer menu button right next to the back and home button and select Save Icon and continue by pressing OK
8. This helps specify which screen/wallpaper you’re on at the moment
i. Repeat step h. for all corresponding screens/wallpapers (i.e. Screen 2 icon for “Home”)

C. Desktop Visualizer: (On my “Social” screen/wallpaper notice the Facebook tile as I’ll be using that for an example)
a. Long press and click Widgets and scroll down till you find Desktop Visualizer(2x2)
b. Click the newly obtained widget
1. Select Icon
. Image File – Find the “blank.png” I included
2. Select Action
. Launch Application – Find the corresponding application (in this case its Facebook)
3. Emphasis (unchecked)
4. Touch Effect – None
c. Repeat steps a. and b. for all tiles on every screen/wallpaper
d. All other tiles that are empty and green you’ll notice I have icons on my screenshots but not on the template. That’s because these icons scroll with the wallpaper and you’d select these icons in step b.1. instead of “blank.png” (Try and find unique icons online such as on http://www.deviantart.com/)

D. Folder Organizer Widget:
a. Long press and click Widgets and scroll down till you find FO Folder link – Folder Organizer
1. Select which folder you’d like to place upon your screen/wallpaper (remember that I replaced the name “Games” with “.” So that’ll come up as an option)
2. Refer to my Games screen/wallpaper and notice the xbox controller icon
3. Place the newly acquired “.” right above the controller and notice how it remains incognito blending in with the white controller
b. Repeat step a. for all other folders created

E. Xbox Live Avatar Widget: (Optional)
a. Follow widget instructions

F. ENJOY YOUR FREAKIN NEW XBOX THEMED TFP!!!

mkm1126 said:

Love this! Any chance you would be willing to share your theme?

Click to expand...

Click to collapse

I have posted the files here in the Galaxy Note section as other people were also intrigued.

One thing I have found is that changing the DPI messes up the layout with SS Launcher. The theme was made using a DPI of 320 so you will have to move things/resize accordingly if yours differs (luckily it isn't too difficult with SS Launcher). I did email the dev and he said he is working on this which is good...but won't be ready for another couple of weeks.

If...

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

more images.

Just some more info for people wanting to use it on the Galaxy Note;

used a 6x6 grid (6 column and 6 rows) with adw and made the pics on photoshop using the following sizes;

1x1= 200x134
1x2= 200x284
1x3= 200x434
2x1= 412x134
2x2= 412x284
2x3= 412x434
3x1= 624x134
3x2= 624x284
3x3= 624x434
4x1= 836x134
4x2= 836x284
4x3= 836x434