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

This looks sick Im about to get my girl a transformer prime and I know she'll like this. Thanks

do you have to have the full version of imagecrop to keep your images in high res? after i do a crop, the images become all grainy, plus the fact that it says "TRIAL" on the image sucks haha

fl4r3 said:

So finally finished and using it on my Galaxy Note today has been great!

I stupidly spent ages setting it up on a 10 x 6 grid...but then realised it fits much better on a 6 x6 grid (since the Note's 1280x800 screen is smaller physically). Had to re-do graphics but worth it in the end. Still may change some of the pics slightly but I think I'm pretty close to the final layout.

Only thing missing is dynamic pictures, i.e. pictures which cycle through a specified folder. That way it'll really feel like the Xbox 360 UI. Only other thing letting it down is the colour of the battery and clock etc...but can't do anything about it at the moment.

Anyway, here are the pics. As you can see they are all floating tiles (even the shadow)...gives it a nice feel when changing pages. 'Application folder' was used for folder linking.

Click to expand...

Click to collapse

Do u mind sharing those images and tiles for the galaxy note?

Thanks heaps for the tutorials, Im on an Acer A500 using Nova Launcher and DVR, the Games tile opens a folder through FolderOrganizer.' I changed it a bit as I dont really want to look too much like xbox, so created a blue background and went for picture tiles for the programs I use.

Chillz88 said:

Do u mind sharing those images and tiles for the galaxy note?

Click to expand...

Click to collapse

Yeah why not...as long as the OP doesn't mind. It was all inspired by him.

I've included the shadow pic too. Just make a 4x1 DVR widget underneath your tiles and choose that image.

fl4r3 said:

So finally finished and using it on my Galaxy Note today has been great!

I stupidly spent ages setting it up on a 10 x 6 grid...but then realised it fits much better on a 6 x6 grid (since the Note's 1280x800 screen is smaller physically). Had to re-do graphics but worth it in the end. Still may change some of the pics slightly but I think I'm pretty close to the final layout.

Only thing missing is dynamic pictures, i.e. pictures which cycle through a specified folder. That way it'll really feel like the Xbox 360 UI. Only other thing letting it down is the colour of the battery and clock etc...but can't do anything about it at the moment.

Anyway, here are the pics. As you can see they are all floating tiles (even the shadow)...gives it a nice feel when changing pages. 'Application folder' was used for folder linking.

Click to expand...

Click to collapse

Quick question how did you make your page indicators look like that?

They are launcher-action screen links in ADW but with custom icons. So the icon itself will say 'Movie' or 'Text' etc, and I made the current page icon green.

OP, what setting did you use to get MultiPicture Live Wallpaper to work with ADW Ex? I have everything working except the live wallpaper. I can't get it to change the page as I swipe or click one of the shortcuts. It just sticks on the background set for page 2 the whole time.. Thanks!

EDIT: Nevermind! Stupidity on my part. Had wallpaper scrolling disabled in the launcher settings xD

thx OP it turned out better then i expected!

Re-did mines using the free version of SS launcher....its more fluid at transitions and with all the items and don't need DVR or folder organizer (the launcher can do everything). ADW started giving me some errors (although everything worked fine). Plus a new feature of SS launcher is Widgets which pop up under items (shown my music widget in one of the pics).

Works well with my Note since you can have seperate landscape and portrait layouts.

Took a while to redo but added a twist to the normal UI.

P.s. ootricksoo love your setup ..looks like the real Xbox! What weather widget did you use?

Did you guys create all your tiles in an image program? If so is it just one whole background picture you plop into multi picture live wallpaper or all the tiles separate then exported to your tablet as images?

fl4r3 said:

P.s. ootricksoo love your setup ..looks like the real Xbox! What weather widget did you use?

Click to expand...

Click to collapse

I use beautiful widgets and the black background was a tile i made.

fl4r3 said:

Did you guys create all your tiles in an image program? If so is it just one whole background picture you plop into multi picture live wallpaper or all the tiles separate then exported to your tablet as images?

Click to expand...

Click to collapse

Ya all tiles were made and placed onto the background using photoshop in my case. Then used multi picture live wallpaper.

ootricksoo said:

I use beautiful widgets and the black background was a tile i made.



Ya all tiles were made and placed onto the background using photoshop in my case. Then used multi picture live wallpaper.

Click to expand...

Click to collapse

You mind sharing your template. I am going to change the tiles but your placement is perfect sooo...haha

Sent from my GT-P7510 using XDA Premium HD app

Would really love this... But I think it's all too complex for me...

Sent from my R800i using XDA

Could someone make a video tutorial I'd really appreciate it. I tried to follow the instruction but couldn't follow them.

Sent from my Transformer Prime TF201 using XDA Premium App

michaelatrix said:

Could someone make a video tutorial I'd really appreciate it. I tried to follow the instruction but couldn't follow them.

Sent from my Transformer Prime TF201 using XDA Premium App

Click to expand...

Click to collapse

I followed the instructions too and it took A LOT of guessing and checking. I'll try to write up instructions on what i did personally if its ok with the OP. I'll also include my template but it'll take me awhile.

Thanks so much Ive been stumped about this project since the OP so please my friend feel free to provide any help that would make this project simpler to understand and accomplish a finishing this setup. My problem is I am clueless as to what tools to use in GIMP to get the effect and look I desire. Theres great tile icon packs on deviantArt but I don't know if I should change the sizes so that when I line my tiles up there wont be any extra space between certain tiles making it look un proportional. "Rambling", sorry anyways, Thanks.

Sry... Don't mean to be a troll, but at what point is this amazing? With the potential the tf204 has this is just insulting.

Sent from my Transformer Prime TF201 using xda premium
Or my pc.... Because I'm bricked again.

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