[GUIDE] How To Theme Your Xoom
A How-To Guide to Theme You Motorola Xoom, both 3/4G and WiFi Only
Lots of credit goes out to HTC (Hot-Taco-Cheese), Sangreal06, Bignadad, Brut.all, and everyone else who has either guided me along the way or have spent their free hours building and modifying/upgrading the tools needed to do this. I merely have played around and gotten used to them, and am sharing how I theme my Xoom (and yours if you have one of my themes installed )
WARNING: Do not mess with .9.pngs unless you know what you’re doing or you have read the guide in post #2. Also holds true for editing XMLs in post #3. Porting other themes to other versions in post #4 (thanks MitchTank).
Standard waiver: I / XoomForums.com are not responsible for anything that happens to your machine(s) while doing this, you assume all risk and responsibility. Theming your system .apks requires unlocking and rooting your device, which will void your warranty.
• Be rooted. If you are not, you will not be able to edit any system app.
• APKmanager (Apk Manager 4.9 - Makes Modifying Ur Apk A Breeze (Windows/Linux) - xda-developers)
• APKtool (android-apktool - A tool for reengineering Android apk files - Google Project Hosting)
- UPDATE for 3.2!! -> Use download from comment 8 on this link (http://goo.gl/khVvU = apktool-for-v13 and replace apktool.jar with this download!!)
• Gimp (or other image editing program. Hint: I have PS CS5 and PSE 9 and I still prefer Gimp when editing Android files) (GIMP - Downloads)
• 7zip (or other, like WinRar, etc) (7-Zip)
• Update.zip (update.zip)
Short and Sweet Version: Using APKManager to edit images
Long and detailed version to theme your Xoom
- Extract framework-res.apk from /system/app of your Xoom and copy them to your computer in a safe place.
- Extract whatever other app you'd like to manipulate, from either /system/app (for standard OS apps), or /data/app (for downloaded apps)
- Copy them to your computer in a safe place.
- Choose 9 apks (including framework-res.apk) and copy (don't move, copy) all chosen apks to APKmanager/place-apk-here-for-modding
- Open Script.bat.
- Option 22 > framework-res.apk (whichever number it is, hit it and hit enter)
- Option 9 (mounts then decompiles the apk)
- Continue 6 and 7 until all of your apks are decompiled.
- Go to APKmanager/projects, and you'll see everything you just decompiled.
- Edit any image at your hearts desire. XMLs are not recommended with this method.
- Any .9.png you edited must be compiled. Do this using Draw9Patch from the Google SDK or xUltimate. More in depth on .9s in second post.
- Go to your first copy of your original apks, make another folder (call it "theme" or w/e you want) and copy in all apks (so that you keep a standard copy on your computer)
- In your theme folder, Open Archive with your favorite .zip program. Have the Archive window and your Projects folder open at the same time.
- Make sure you're in the right directory, and move only the images youedited into the Archive window.
- Push to your Xoom via ADB or simply copy to your SDcard and paste where they came from using your favorite Root-access file explorer.
First and foremost. Set up your system. On your computer. Create a folder called XoomTheme. In there, create folders called MyTheme, StockFiles and APKmanager. StockFiles will hold the original files you pulled from your unthemed Xoom, these are not to be touched once placed in the folder, because if you screw something up, you have a backup to go back to. MyTheme keeps your themed files separate and organized from the stock files. APKmanager is where you’ll be most of the time to decompile and edit images.
First, on your Xoom, pull the SystemUI.apk from /system/app. Do this using Root Explorer (or other Root File Explorer app of your choice). Copy this, go to your SDcard, create a folder called RootStock, and paste the file in to that folder. Plug your Xoom in, find the file and copy it to: XoomTheme/StockFiles folder and also to XoomTheme/MyTheme folder.
Now, unzip APKmanager to XoomTheme. Take the APKtool.jar you downloaded and place it in APKmanager/others (you’ll have to rename the original apktool.jar first, make it apktoolOLD.jar). This will allow you to correctly decompile Honeycomb APKs.
We’re going to start with SystemUI.apk. This contains the bottom icons and popup screen. First things first, copy the SystemUI.apk (from MyTheme) into APKmanager/place-apk-here-for-modding. Inside APKmanager, open the Script.bat. Continue, then Option 22 (select a package), Option 1 (you should only have one apk inside – SystemUI.apk). Then Option 9 will decompile the apk.
Once it has finished decompiling, it will let you enter more options; you can now close the script, and your decompiled SystemUI.apk will be inside the projects folder (projects/SystemUI.apk). Don’t edit anything yet, continue reading.
Before editing anything, get to know the system, and the way they have these folders laid out. Everything you want to edit is inside the /res folder. Most of the images you’ll use will be inside drawable-mdpi. But, there are more “drawable” folders, so look in all of them, and you’ll encounter some images that you recognize from Xooming. Most app icons that appear in the App Drawer of your Xoom (you’ll encounter icons in apps like Gallery and Music) will be in mipmap folders.
Lets start in SystemUI/res/drawable-mdpi with the image ic_sysbar_home_default.png
You’ll recognize this button being the Home button in the bottom left. Before editing, create a new folder in that window called “mods.” This will keep you organized and know what you’re changing. Copy ic_sysbar_home_default.png into this folder. Inside the mods folder, change the image however you want. I made it red:
When you’re finished with your editing, open a new file explorer and navigate to XoomTheme/MyTheme and right click on SystemUI.apk > 7zip > Open Archive. Inside the 7zip explorer, navigate to res/drawable-mdpi. With this 7zip window and the window with your edited image side by side, drag the ic_sysbar_home_default.png into the 7zip window. This makes your new image overwrite the stock image inside the correct folder of your themed SystemUI.apk
You have now themed your SystemUI.apk. (You can close the APKmanager window now) To put it on your Xoom, use the same “open archive” method on Update.zip (right click > 7zip > Open Archive). In the 7zip window, go to system/app and drag and drop SystemUI.apk in the 7zip window. Take the update.zip and put it on your Xoom’s External SDcard (Xoom/sdcard/external). Unplug your Xoom and reboot in to Recovery. Go to: install from sdcard > choose zip from sdcard > update.zip > yes.
When the update is complete, go back, hit reboot, and when the Xoom is finished booting up, you’ll see the Home button has changed to what you modified it to look like.
This exact process can be applied to any apk, you just HAVE to remember to keep everything backed up and keep everything in the same folder it came from, other wise you will have Force Closes.
You don’t need to do anything with files that end in .odex. Also, there are some files in there that you won’t need or know what they are for: don’t bother with them. Here is a list of apps you can edit that will change the look of your system (there are more, but these are the core apps):
/system/app (remember, .apk)
• LatinImeGoogle (keyboard)
What not to do:
• Use the compile option (11) or sign option (12) in APKmanager. The signature will not match and once you’re booted you will continue to receive FCs until you reflash.
• Place decompiled .9.pngs into your themed apk. They are .9s for a reason, and they must be compiled after editing, but before going to your Xoom. See post #2 about .9.pngs.
If you want to continue diving further in to the Xoom Operating System, continue reading. .9.pngs will be in post #2 and editing XMLs with be in post #3.
If you have any questions I’ll try to answer asap and to the best of my ability. However, I do work full time and weekends aren’t usually spent at the comp, so keep that in mind if I don’t respond right away. We also have a great community, so if someone else knows the answer to any questions please feel free to chime in.
Last edited by Bazar6; 11-21-2011 at 07:58 AM.
05-17-2011 11:42 AM
How to edit .9.pngs
Explanation of a .9.png
These images are different than regular .png’s because they are stretchable. They conform to the content within, expanding and contracting as needed. This is done with guides within the file, that are only seen after you decompile the image. Guides are made up of 1px solid black borders, and whatever isn’t marked with a black pixel, is 100% transparent. This is extremely important; because if your image doesn’t have a transparent or black border, it won’t compile (the cool thing about xUltimate is it will tell you what pixel is the first wrong). Once these images are compiled, the border disappears, and you are able to put it in your themed apk.
.9.pngs can be the downfall of your system. Edit properly and they can turn out looking great.
Examples of what good and bad .9.png editing looks like.
Set up xUltimate
Hopefully you only downloaded the Draw9Patch Compiler of xUltimate (A standalone component), I say this because I don’t have and have not used the full main one, so I will not be able to help you set it up.
Take the zip you downloaded, and 7zip > extract to xUltimate in your XoomTheme folder. Inside xUltimate, you can delete the three folders “music, example1 and example2” since I’m pretty much walking you thru it. If you want these folders back, just unzip again. You should be left with a .exe. You’re going to create more folders now, and this is how the structure is going to be:
Inside xUltimate, create a folder called Originals.
Inside Originals, create res.
Inside res, create drawable-hdpi. (no periods on the end of the folder names)
You have to have already decompiled the apk, which also decompiles the .9.png’s. If you're coming from post #1, you're already there. If you skipped post #1, see it about decompiling your apks. Ok, that was easy. The tricky part is editing the image. I only changed them to red with the colorization tool, so it didn’t change the 1px border. If you decide to add a glow, or a full size image, make sure to go over it and erase a 1px border all the way around it, but keeping the 100% black px where it originally was.
Close the image once you’re satisfied with the edits. In the File Browser, copy the file. Navigate to xUltimate. You have to place the image inside Originals/res/drawable-hdpi. Go back out and open xUltimate-d9pc.exe. The script will run on its own, and rather quickly. It’ll close on it’s own upon completion. Go to done, click thru until you find your image, and you’ll see that there is no more guides on it. I usually copy it back to my “mods” folder, so that I don’t have to compile each time I need to put it in a new update.
When you have the final version, do like we’ve done before when placing themed images in a 7zip archive (above). Refresher: Go to XoomTheme/MyTheme, right click > 7zip > Open Archive. Navigate to the folder the image came from (/res/drawable-mdpi), and drag and drop the COMPILED version in to it. Continue with pushing to update.zip then flashing the update. If you followed these steps, you should have a functioning theme with complete .9.pngs not skewing weirdly.
If xUltimate gives an error:
It will tell you where you messed up. Find the pixel it is saying is not transparent or black. If you don’t see it, make sure you eraser is 1px wide and 100% solid (no opacity) and eras every pixel in the border except where black. Then take your 1px black pencil and go over every black pixel along the edge. Then try it again. Once it goes thru, then you’re good.
The thing about xUltimate is:
You have to keep the folders the hierarchy they are. If you just do res/drawable-hdpi, it'll give you an error with something about res/res. Just keep it as I told you to structure it and you won't have any problems. Also, when you are finished with the images it has compiled, you must delete the “done” folder, because it won’t overwrite it. If you don’t move/delete/rename your first “done” folder, you can’t continue to compile the images.
These .9.png’s were a pain to get used to, but it wasn’t exactly spelled out like this for me, so I hope this helps everyone in editing .9’s. If you have any questions about them or are getting stuck, please feel free to ask.
Last edited by Bazar6; 05-17-2011 at 05:26 PM.
So now you want to get in to the thicker side of themes?
Editing XMLs isn’t as easy as opening in gimp, drawing a few lines then saving it and you’re done. This especially holds true with the Honeycomb process, so I’d recommend you read thru this entire section before hand to see if you want to take this on.
If you’re good with code, even html, you’ll see how this is somewhat similar. It is still tricky tho sometimes, and trial and error is the best way to figure out how something works and will look, and if it’s even the right thing you’re modifiying. These XMLs are the structure of how it looks. They tell which elements where to appear, how much padding they need to have between the next element, what color it should be, the line height, the width, how it should look in landscape vs. portrait mode, etc etc etc.
APKmanager (see post #1 on how to set it up)
APKtool.jar (again, should’ve set this up in post #1)
Notepad++: Notepad++ | 5.9 (My preferred Android code editor, even with Dreamweaver installed right beside it)
Any website that can convert hex codes for you (like here: http://www.2createawebsite.com/build/hex-colors.html )
Hex Codes: (for those who don’t know)
They’re codes that make a certain element a color. For instance, black is #000000, white is #FFFFFF and red is #FF0000. In the xmls, you’ll see 8-digit hex codes. The extra two digits is the opacity. FF is 100%, and 00 is none. I believe (I hope this is right, I have only used 00 and FF before) it looks like this:
FF – 100% solid
99 – 99% (still very there)
98 – 98%
05 – 5% solid (very see thru)
01 – 1% (barely there)
00 – 0% solid / completely opaque (where’d it go?)
99 – 01 represents % .. hope it makes sense.
So the code for the clock looks like this: #FF525e79
After a few steps below, when in Notepad++, you can see the structure of the XML pretty clearly. If you’re not experienced in coding, you’ll see that there’s opening tags and closing tags. For instance:
If you’re experienced with coding you’ll feel right at home. If not, it’s ok, you can still find the things you’re looking for. Post #4 will have some shortcuts to keep your look and find time to a minimum.
Set up the computer:
This can be done two ways. I prefer method 2.
Using APKmanager (which you should already have installed from Post #1).
This is tricky, because APKmanager hasn’t been updated to fully support Honeycomb. Most of the time, if you are wanting to change XMLs, you won’t need to change anything in the values folder of your decompiled apk; that is for most advanced changes (that I’m not going over because I’ve only briefly gotten in to it myself).
So, I know you themed the images in your SystemUI.apk earlier. I hope you still have the stock apk in the place-apk-here-for-modding. This means you need to go in to the /projects folder and rename the first and already themed SystemUI folder. Let’s just go with SystemUI.apkThemed. Go back to the APKmanager root and open the script, and decompile SystemUI.apk again (22 > 1 > 9). In the projects folder a new SystemUI.apk folder will appear, with the stock images inside. (So you should have the newly decompiled, yet stock, SystemUI.apk folder, and the folder you themed earlier called SystemUI.apkThemed)
Inside this new SystemUI folder you’ll see the same thing as the other folder before you themed it (because it was decompiled from the same stock .apk). The file we want to deal with can be found at SystemUI.apk/res/layout-xlarge/status-bar-notification-area.xml. Right click on the file and click open with Notepad++ (if it isn’t your default .xml editor, other wise just double click to open in Notepad++). There will be a good bit of code in here, don’t get too overwhelmed (see above).
It’s easy when you know what you’re looking for, right now we’re looking for the clock and where it’s told to have a blue color. Right off the bat I see two places where “android:textColor=”#ff…..” with two different hex codes. I already know that #606060 is not blue, so I took the other one #525e79 and checked it with the site above and saw it was that baby blue color I want to get rid of. To make sure, I saw where it was called and you can see it for yourself:
Now that we found it:
<TextView android:textSize="40.0sp" android:textColor="#ff525e79" android:id="@id/time_solid" …/>
We can change it. As I said, I’m going blood red with #FFB20000, but make it what you want. So, just make the change (remember, the hex must be 8 characters long, with the two in the beginning telling it which opacity to be). Now, you can save it.
Go in to the APKmanager script, select your project, and now hit Option 11 (compile). Let it do it’s thing, hit “Y” because it is a System app, and hit “Y” again because we want as few errors as possible. It’ll run thru, then when it breaks, it’ll tell you to go to the keep folder and delete any edited xmls plus the resources.arsc file. So do this:
Don’t exit the script, just click on your explorer window in the background. Go to /keep and delete resources.arsc (move to recycle bin). Then go to /res/layout-xlarge and delete status_bar_notification_area.xml. Go back to the root of the APKmanager folder, then go back to your script and hit any key (there is no ‘any’ key, but hit “any” key you want). It’ll run thru and take you back to letting you make your decision; close it out (if you press 24 and something pops up, just hit another key, it’ll clear, then hit 24 again. It’s easier to just X out tho).
Your new file
Will be waiting for you in the place-apk-here-for-modding, called “unsignedSystemUI.apk”. Right click on it, 7zip > Open Archive. Navigate to that file you just edited (/res/layout-xlarge/status_bar_notification_area.xml and drag it out to your desktop. Find your themed SystemUI.apk inside /XoomTheme/MyTheme and Open Archive. Navigate to the folder again (/res/layout-xlarge/) and drag and drop the new status_bar_notifcation_area.xml inside the 7zip window, overwriting the first one. Get the file on to your Xoom with the update.zip method from Post #1 and you should now have a brand new colored clock.
This method is not 100%, and may screw up more than once. If you continue to have problems, please try method 2 before giving up on themeing.
A slightly more advanced process, but more accurate. I’ll also go a bit quicker in this one, with reference to some method one and post #1steps. This is what you will definitely want to use when modifying xmls inside the /values folders, because APKmanager can’t see them (that step when you have to delete the modded xmls when recompiling… you won’t be able to see them, which is why you have to go here). You’ll be using APKtool with Command Prompt to decompile and compile. To me this is the easiest method (after you get comfortable with it) when you’re trying to find which numbers change what (like what I just went thru with finding the Apps color in the upper right).
Prereqs for Method 2:
APKtool installer android-apktool - A tool for reengineering Android apk files - Google Project Hosting
APKtool.jar 1.4.1 (Post #1)
Noteppad++ Notepad++ | 5.9 (or other xml editor)
Your stock Framework-res.apk (if you haven't pulled it yet) from your xoom /system/framework
Unzip the installer (it’s like 2 or 3 times) until you’re left with apktool.bat and aapt.exe. Take that folder, rename it to APKtool, and put it in your XoomTheme folder. Also, copy the downloaded APKtool.jar (1.4.1) into the APKtool folder. Now, find your themed framework-res.apk and SystemUI.apk (from XoomTheme/MyTheme), copy and paste them into APKtool. Open CMD and cd to the APKtool directory (cd C:\.....\XoomTheme\APKtool). First things first, mount the framework; to do this, type “apktool if framework-res.apk”. Now, decompile your SystemUI.apk by typing “apktool d SystemUI.apk”. You can close the window, but when you go to compile you will have to cd again, so let’s keep it open since we know where we’re going. The apk was compiled to it’s own folder inside APKtool without the extension on it. Make your edits to the SystemUI/res/layout-xlarge/status_bar_notification_area.xml like we did above. Save the xml file. Go back to CMD and compile it by typing “apktool b SystemUI”. Your compiled SystemUI is inside APKtool/SystemUI/dist. Here’s the big part. We didn’t compile any of the .9s inside the decompiled folder. So, you’re still going to have to go into the newly compiled SystemUI.apk inside the dist folder and grab the file you just edited, and for now juts drag it out to the dist folder. Go up one folder and Open Archive on the original SystemUI.apk. Navigate to the right folder, and drop in the modified file that we took out of the recompiled apk (I hope I didn’t lose you there).
Now you have a new .apk with an edited XML. You can drop it in your update.zip, recovery flash and reboot, and Viola (provided that all steps were followed).
Instein has created a public Google Doc containing a reference of the areas in the XMLs you will want to change. The list is updated to 3.2 (which I have to do with these guides when I get a chance), and contains the location, stock element, what it'll change, and in which apk it is. If you find something you'd like to add to this list, please feel free to! The more eyes and contributors, the better the community will be at theming
Last edited by Bazar6; 07-29-2011 at 02:11 PM.
How to Port Themes To Other roms: (This is from MitchTank on page 4. Be sure to thank him if you use this part.)
First off, Slow down, relax, look at what you are doing, this is a generalization, if the xml, or image file does not exist
in the apk your trying to theme, do not add it, or subtract it, you add or subtract anything it will not work, YOU ARE ONLY
REPLACING!!(doin some math here is your ticket to boot camp)
1) Download 7-zip, or winrar as they can open .apk files without unarchiving them.
2) Download both the rom you want to theme, as well as the them you want to port.
3) Using 7-zip, open the rom and pull out the following files:
4) Make a separate folder and unarchive the theme your want to port there.
5) Open a theme .apk file(s), Open in 7zip or winrar, dont extract, just open and manipulate.(keep in mind, all your image
files you will need to replace will be in the following folders)
6) Open these folders in your themes .apk(s) files:
a. Drawable-mdpi (may be drawable-xlarge-mdpi/hdpi/nodpi)
7) Now, open the corresponding folders in the roms apk file,(agian, winrar, 7zip)
a. Select all images from the theme's .apk and drag-and drop to the corresponding location in your roms apk file.do this
for each image and you will be about 90% there…
b. If the image you want doe snot exist in the theme, use photoshop or gimp to produce it as you see fit, when your done
make sure you put it in the right folder, make sure its the same size and resolution and name as the original, or it will
8) There are several xml files that need replacing…
e. framework-res.apk/layout-xlarge/ keyguard_screen_status_land.xml
Below is the link to download a update.zip template, (how you and everyone will apply the theme)
By this step the structure of the folders inside of the update.zip should seem familier, just bare in mind anything you put
in there will 1. replace the existing 2. add if not there already. Open the update in winrar 7zip as well, if you theme an
app thats not a system app, it will go to update.zip/data/app, if it is a system app it will go to update.zip/system/app,
and the themed framework-res goes to update.zip/system/framework/
Good luck, happy theming, if you need help PM me and i will do what i can for you.
Last edited by Bazar6; 07-08-2011 at 12:27 PM.
wow thank you for putting this up lots of time and effor right thurrr
Serious props to you Bazar6. Im just getting into Android Modding and programming and stuff like this is gold to me right now. Thanks!!!
any chance of you doin a white theme bazar
Thanks guys. Just gimme a shout if you have any questions or get hung up any where in my instructions.
Possibly. I've tried doin white WHITE but I honestly don't know how I like the look of it... definitely going to go towards a steel grey sometime. Would this be what you had in mind (you're not the first to ask about a white theme lol)
Originally Posted by jloya
Wow great guide, very well done!!!!
thanks bazar, and yeahh thats pretty close to what I was thinken...however that is whitteee whiteeee lol...i had imagined something along those lines maybe a tad bit greyer but with the added "blur" affect outlining the pngs like in the red and green themes (if that makes sense lol)
Originally Posted by Bazar6