[UPDATED 24.03.2011] X10 Theme Reference

Search This thread

_calum_

Senior Member
Aug 16, 2010
493
58
Tübingen, Germany
24.03.2011: Added a link to the themes section and added my last post here for a while (maybe ;)):
So I'm back after dropping off the face of the planet for a while :) I've been getting into WP7 development and so my X10 has been in the top drawer for a couple of months... I may get into Android development soon but at the moment I'm a bit short on time (as always ;)).
I still would like to get the timescape animations sorted (I hate being beaten :D) but I just can't seem to get the cheecksum figured out. If I ever get them sorted I'll update this post again, but until then I probably won't do anything more with my X10.
I hope this post has been helpful. See ya :)

This thread was opened to consolidate the information/knowledge about themes for the x10. It is basically a reference thread with key bits of information and links so that a new user can find all the necessary information in one place. At the moment this is spread out all over the place, there are a lot of different threads with different bits of information, and the lack of updates in Draken Korin’s sticky makes it pretty hard to find new information. It should also help us avoid the old ‘where the hell was that image…?’ and ‘where was that … thread again?’.

Please PM me or post any useful information that is missing, especially the OPs of the threads in the Themes section below. I will continually update this thread with any new information or links.

All useful information that is posted here will be added to this first page, so that you don't have to wade through pages of posts to try and find something. Everything after the first page should therefore either be repeated on this page somewhere or is just conversation. Please yell at me should this not be the case :)

Please help me out by posting information, ideas etc.


Creating Themes for the x10:

1. Getting Started
2. Using ADB
3. Creating a theme
4. Modifying XML files and adding resources
5. Modifying Services.jar
6. Timescape/Mediascape
7. Resource locations
8. Theme collection
9. Recovery tips


Change log

14.11.2010 - Added section 4
18.11.2010 - Updated section 3 with a complete guid for modifying .9.png's
25.11.2010 - Updated section 7 with text color locations in the xml files
21.12.2010 - Added a link to MrRusch's tool to section 4
24.12.2010 - Added link to 2.1 Sources to section 5
 
Last edited:

_calum_

Senior Member
Aug 16, 2010
493
58
Tübingen, Germany
Getting Started

Before getting started on a theme you'll need to set a few things up. Here's a list of everything you'll need:

  • Root. Your phone will need to be rooted
  • Java SDK (JDK). You'll need to install the JDK (and JRE) before you can start modifying the contents of your phone. Check out this video of Chewitts if you're having problems on x64 systems.
  • ADB (from the Android SDK). You need ADB to push/pull files to and from your phone (see the next post)
  • X10 Drivers. The drivers are usually installed if you install SEUS. Sometimes however you may need to do a manual installation (from my experience mainly on Win7 x64 machines).

The easiest way to make sure everything is set up properly is to install someone elses theme. Check out this post (1.6) or this post (2.1) for instructions.

After you've done all that take a look at this.
 
Last edited:

_calum_

Senior Member
Aug 16, 2010
493
58
Tübingen, Germany
Have you installed someone elses theme yet? If not then go directly to jail, do not pass GO and do not collect £200 :p

Using ADB

There's an ADB Guide here (thanks to XPeriaX10iUser for having this in his sig :)): ADB, Fastboot, and Nandroid for Noobs

Before you start need to unsecure the shell. Use the following adb commands to do this if you haven't already (to reverse it do chmod 0755... thanks XperiaX10iUser :)):
Code:
adb shell
su
mount -o remount,rw -t yaffs2 /dev/block/mtdblock2 /system
chmod 4755 /system/bin/sh
This is all described in the links posted in the Getting Started section above ;)

Thanks to MrRusch for making our lives easier with this tool. For those of you new to this, you should still read the guide linked above so that you know what is actually going on.

Here's a step by step for pulling the framework from your phone and pushing it back. The original post is here. The boot animation mod at the bottom is for 1.6. In 2.1 it is found in system/media/bootanimation.zip.
@gavriel18: I hope it's OK to use this here, if not then let me know.
Step 1:
Connect phone to pc, enable usb debugging and open adb. Type:
adb pull /system/framework/framework-res.apk framework-res.apk
That will pull your framework-res.apk to whatever folder is displaying in your command line.
Step 2:
Find the framework-res.apk on your hard drive, right click and open with 7zip.
Step 3:
Use png's here or create your own and dump into the appropriate folder within framework-res.apk.
Step 4:
When you are done editing the files open up adb and type the following command:
adb shell mount -o remount,rw -t yaffs2 /dev/block/mtdblock2 /system
adb push framework-res.apk /sdcard/framework-res.apk
adb shell dd if=/sdcard/framework-res.apk of=/system/framework/framework-res.apk

That will put the new framework-res.apk on your phone. It should automatically reboot (if not reboot it) and your changes should be applied!
When running the script above you can replace framework-res.apk with whatever you want. For example, Timescape.apk
Remember, it is CASE sensitive I made this problem many times)

If you would like to pull an entire folder put a slash at the end of the last word. For example, adb pull /system/etc /etc"/" (no " in actual script :p)

Courtesy of corruptfate is the steps to modify the startupshow (post #207)

step 1: open adb shell
step 2: type "adb shell"
step 3: type "su"
step 4: type "mount -o remount,rw -t yaffs2 /dev/block/mtdblock4 /system"
step 5: type "mkdir system/etc/semc/startupshow"
step 6: exit and redo step 1 - 4
step 7: type "mkdir system/etc/semc/startupshow/default"
step 8: exit and open command prompt again, this time type "ddms"
step 9: look for the default folder in system > etc > semc > startupshow > default
step 10: push the images into that folder
 
Last edited:
  • Like
Reactions: pvyParts

_calum_

Senior Member
Aug 16, 2010
493
58
Tübingen, Germany
Creating a theme

So, now that we’ve got the framework-res.apk onto our hard drive, we can take a look at creating a theme. The only skill that is really required to change the appearance of the framework (this is the system file that contains the notification bar, settings etc.) is being able to edit .png image files to suit your tastes. If you can do this then it is just a matter of knowing how to extract the images, and how to update the .apk with them after editing.

.9.png's

Before we start we need to take a look at a special kind of image in android apk’s: the .9.png’s. These are recognisable, as the name suggests, by the double extension *.9.png.
.9.png's are images with a bit of extra information embedded. They contain information on how they can be stretched, and where the content can go (e.g. for a button background, which area of the background can contain the text).
This information is contained in a single pixel border (the guides) around the image and can be added using draw9patch. The catch here is that the guides must be compiled into the image before it can be used.
The Border: For the most part, you will not have to edit the border of a .9.png because, as long as you follow the guide below, the guides will already be in the image and you will not need to change them. If you do need to create your own (I’d assume you know enough not to be reading this though ;)), you can find more information here.

Editing the Framework

In this example we will look at editing framework-res.apk. However, the process can be used on any apk.
The method described below may seem overly complicated for those who have experience in this area, but it is (in my opinion) the easiest ‘sure-fire’ way to make sure you don’t have any problems (especially with the .9.png’s).
In rare cases, when the .apk your modifying doesn’t have any .9.png’s (e.g. the Recent Calls widget) then you can skip straight to the ‘Updating images using Drag/Drop’ section below.

Requirements:

You will need the following:
7zip apktool - this is included in the attached file themes.zip
Some people use WinRAR instead of 7zip, but apktool uses some 7zip commands internally so make sure it is installed (I think, I know this is the case for APK Manager, I still need to test this for apktool, but hey, just use 7zip, it's free and works exceptionally well).

Setting up:

In the attached zip file (themes.zip) you will find a copy of my theme creation environment. It’s not too complicated, it only contains a couple of folders so I know where everything is, three key batch files (all one-liners) and apktool.

The first thing we need to look at is install_framework.bat. This contains the following line:
Code:
java -jar apktool.jar install-framework stock\framework-res.apk
All this does is tell apktool to install the framework on your system. The resources from stock\framework-res.apk will be extracted to a default location. If you don’t do this then you will not be able to recompile other apk’s that rely on the framework (you will get a ResourceNotFound error).
The other batch files decompile and build the framework, these are the ones that need to be modified if you start working on a different apk:
Code:
[B]decompile.bat[/B)
java -jar apktool.jar d stock\ framework-res.apk working\ framework-res 

[B]build.bat[/B]
java -jar apktool.jar b working\framework-res out\framework-res.apk
I have included the stock X10 framework. If you use on of the other frameworks out there you may find that you get a lot of errors when trying to recompile. That’s because someone got lazy with the .9.png’s ;)

As we are modifying the framework directly we do not need to run install_framework.bat, for a different apk (e.g. Phonebook.apk) you may need to run this first to avoid errors when decompiling.

Decompiling and Building:

1. Run decompile.bat. After this you will see that the working folder is filled with the contents of the apk. The images we need to modify are in the subfolders res/drawable-hdpi and res/drawable-land-hdpi. If you look at some of the .9.png’s in there you can see the guides (see the attached image). This makes it really easy to edit them, you can just edit them like any other image (as long as you do not touch/alter the guides).
2. Edit any images that you want. For the .9.pngs I usually make a copy without the 1 pixel border so that I can edit the entire image, then I paste the copy back into the middle of the original .9.png. You don’t have to worry about the guides, they are already set correctly.
I have created a tool that takes the stock x10 status bar icons, removes the background and sets them to a colour of your choice here. This was made to make my life easier by minimizing the time I spend in photoshop.

3. Run build.bat. This compiles the framework, embedding the guide information into the .9.png’s. The output framework is in the out folder. Do not push this to your phone as it is incomplete and the resources.arsc is stored incorrectly. If you do push it to your phone then you get to reflash :eek:
Now you can just drag the edited images out of the generated framework onto your hard drive and use steps 4. and 5. of the Drag/Drop method described below to update your framework.

Updating images using Drag/Drop:

1. Open the .apk in 7zip and browse to the appropriate image folder (almost always the res\drawable-hdpi folder)
2. Drag/Drop the images you want to edit to your hard drive. Leave the .apk open in 7zip
3. Edit the images in your favourite program (photoshop or similar)
4. Drag/Drop the images back into the .apk that is still open
5. Use the process described in the previous post to push the framework back to the phone

The reason that the .apk is left open in this process is that some (all?) of them are signed and updating them in this way doesn’t mess with the signature. I’ll admit to not being 100% sure about this, I’m sort of thinking now that people just had problems re-packing due to files being compressed that shouldn’t have been (see the section on editing XML files and adding resources to see what I mean). Please correct me on this one.


This also [almost] goes without saying, but: Make a backup before you start (you can look at the installer for Chewitts Dark10 theme to see how to do this).

OK, now you can start messing with the appearance of your phone, have fun :)

Credits

Thanks to Mr_Element for the help testing this process and making it easier to follow
Thanks to damnitpud for his post here, without which I would still have been a bit lost in draw9patch.
 

Attachments

  • semc_picture_overlay.9.png
    semc_picture_overlay.9.png
    1.8 KB · Views: 64,103
  • themes.zip
    7.1 MB · Views: 3,029
Last edited:

_calum_

Senior Member
Aug 16, 2010
493
58
Tübingen, Germany
Modifying XML files and adding resources

First up, thanks to MrRusch for pointing out that the resources.arsc was being zipped differently. It would have taken a few more flashes to figure out how to pack it into the apk without that little nugget :)

Secondly, thanks again to MrRusch for this post. Using apktool 1.3.1 means the resources are not compressed, but you still can't just flash the resulting framework. So either use MrRusch's tool or follow the instructions below.

The XML files in the framework-res.apk (and the other apps) are stored in a compiled form, making them impossible to edit without decompiling them. The process of decompiling them and recompiling is reasonably simple but care is required if any images/resources are added to the apk.
Modifying the xml files opens up certain things that can’t be changed by just modifying some image files. The best example is changing the battery icon in the notification bar to show a different image for each percentage instead of just 10%, 20%, 40% etc.

When you modify xml files and add resources to your apk, make sure you copy ALL the modifications made to the stock apk each time after compiling. I have noticed strange effects if I don't do this such as the wrong images being used - I am assuming that in the newly compiled resources.arsc the image references/IDs change when compiled, but I'm not really sure yet. An example of this is when I tried to add the signal strength mod mentioned above to a framework that included the battery icon mod below. This only worked if I also copied the battery mod files to the framework (even though they were already in the apk) after recompiling the signal strength mod. If I just copied the files required for the signal strength mod then the battery indicator would start showing the wrong images (see here, specifically posts 52, 56 and 57).

Battery Icon:
Here is a step by step for modifying the battery icon in the framework. To do this you will need to download apktool and install 7zip (other compression programs may work, but I’ve only used 7zip).
  • Decompile the framework using the following command:
    Code:
    java -jar apktool.jar d framework-res.apk framework-res
    This will decompile the framework-res.apk that’s in the current command window folder into a subfolder framework-res
  • Find the xml files you need to modify, e.g. the battery icon xml res\drawable\stat_sys_battery.xml and edit them. This is assuming, of course that you know what needs to go in the XML file ;). For the battery XML it is pretty obvious, just copy/paste the existing nodes and change them so you have the necessary percentage entries, see the attachment for an example with 100 steps.

  • Add any necessary resources to the appropriate folder. For the battery icon you need to create an image for each percentage (or download one of these) and add them to the res\drawable_hdpi folder. The name is the same as the name in the xml (stat_sys_battery_*.png)

  • Rebuild the apk using the following command:
    Code:
    java -jar apktool.jar b framework-res out\framework-res.apk
    This will create a new framework-res.apk in a subfolder out.

    IMPORTANT: Do not push this apk to your phone unless you want to reflash
  • Extract the xml files and images from the newly generated apk (you can use the original images, but the xml files must be the newly compiled ones from the new apk). Add these files to the original framework-res.apk that you want to push to your phone (see the previous post).

  • Extract the resources.arsc from the root of the apk

  • Rename the original framework-res.apk from your theme to framework-res.zip

  • Right-click the extracted resources.arsc and choose the 7zip menu item ‘Add to archive’

  • In the dialog that appears set the achive field at the top to the framework-res.zip from step 7. And set the archive format to zip. Now set the Compression level to store and click OK(if you do not do this your phone will not boot). The settings are in the attached screenshot.

  • Rename framework-res.zip to framework-res.apk and double check that the compressed size or resources.arsc is the same as the original size (see screenshot)

  • Done. Push the new framework to your phone.


Status Bar Text:

The style for most (all?) UI elements can be found in res/values/styles.xml. This xml file is only available in a decompiled framework. In the compiled version everything in res/values is compiled into resoureces.arsc.
The status bar text style is named TextAppearance.StatusBar. The file is pretty large so it's best just to do a search for the name. The definition looks like this:
Code:
<style name="TextAppearance.StatusBar" parent="@style/TextAppearance">
  <item name="textSize">16.0sp</item> 
  <item name="textStyle">normal</item> 
  <item name="textColor">@color/semc_text_color_primary</item> 
</style>
You can easily adjust the size or make the text bold using the textSize and textStyle elements (see here for a description of these attributes and their values). The color uses the @color/... notation. This is a reference to a color resource, these can be found in colors.xml. We could just change this to a direct color entry (see here for an example), but then we wouldn't have a resource that can be reused for other parts of the UI.
If you open colors.xml you can find this:
Code:
<color name="semc_text_color_primary">#ffffffff</color>
This sets the primary text color to white (ARGB: FFFFFFFF = White). Changing the value of this will change the color of all primary text throughout the phone (settings menu etc.). If we just want to change the notification bar then it's best to add a new color. To do this just duplicate the above color definition and change the name and color:
Code:
<color name="semc_text_color_primary">#ffffffff</color>
<color name="semc_text_color_custom">#9900ff00</color>
And then adjust the style to use this new color resource:
Code:
<style name="TextAppearance.StatusBar" parent="@style/TextAppearance">
  <item name="textSize">16.0sp</item> 
  <item name="textStyle">normal</item> 
  <item name="textColor">@color/semc_text_color_custom</item> 
</style>
Now recompile and copy resources.arsc to your framework as described above and push the framework to your phone for semi-transparent green text in your status bar :)
 

Attachments

  • 7zip_settings.jpg
    7zip_settings.jpg
    44 KB · Views: 3,611
  • Resources.png
    Resources.png
    11.1 KB · Views: 2,684
  • snap20101114_134216.jpg
    snap20101114_134216.jpg
    20.8 KB · Views: 3,772
Last edited:

_calum_

Senior Member
Aug 16, 2010
493
58
Tübingen, Germany
Modifying Services.jar

To modify services.jar we need to decompile the classes.dex file contained within. We can do this with baksmali:

1. Open services.jar (found in system/framework) with 7zip
2. Extract classes.dex from the archive
3. Open a command window and use the following to decompile:
Code:
java -jar baksmali-1.2.5.jar -o out\services classes.dex
4. You will now have a subfolder out\services with the decompiled .dex classes (smali files)

These sort of modifications will not be necessary very often. Two things that have been looked at so far are changing the text color on the status bar clock (just the clock, not the notification text) and changing the signal strength to show dBm instead of just the bars. The text color of the clock is relatively simple and is described below. The signal strength mod was done by MrRusch and requires a bit more code, he describes the process here.

I have attached a converter MrRusch has put together to convert java to smali. This is really helpful when trying to figure out how to modify the smali or event just trying to figure out what a piece of smali code does.

Since the 15th of december the sources for 2.1 are available here. Now we can see how the original java relates to the decompiled smali code.

You can find a reference for all the smali ops here. This one is more complete but I prefer the first purely because it's a bit more compact and it has most of what I need anyway. Thanks to untemensch and JesusFreke for the links.

Status Bar Clock Color:

I have since figured out how to do this without changing any code, just by changing some xml in res/layout, but I will keep this here as I think it is a nice, easy to follow example to start out with.

This section describes how to modify the color of the clock in the status bar without changing the color of the notification text (changing all of the status bar text is described in the xml section above).
First we need to have a look at the smali file com\android\server\status\StatusBarIcon.smali to see how the color of the clock text is set. I use Visual Studio to view/edit the smali files, but you can use any text editor - I have seen PSPad recommended a few times.

If we look at the init method we can see the following piece of smali code:
Code:
    .line 44
    .local v15, textColor:I
    const/4 v13, -0x1

    .line 50
    .local v13, styleIndex:I
    const v18, 0x1030079

    :try_start_1f
    sget-object v19, Lcom/android/internal/R$styleable;->TextAppearance:[I

    move-object/from16 v0, p1

    move/from16 v1, v18

    move-object/from16 v2, v19

    invoke-virtual {v0, v1, v2}, Landroid/content/Context;->obtainStyledAttributes(I[I)Landroid/content/res/TypedArray;

    move-result-object v5

    .line 53
    .local v5, a:Landroid/content/res/TypedArray;
    const/16 v18, 0x0

    move-object v0, v5

    move/from16 v1, v18

    move/from16 v2, v16

    invoke-virtual {v0, v1, v2}, Landroid/content/res/TypedArray;->getDimension(IF)F

    move-result v16

    .line 54
    const/16 v18, 0x3

    move-object v0, v5

    move/from16 v1, v18

    move v2, v15

    invoke-virtual {v0, v1, v2}, Landroid/content/res/TypedArray;->getColor(II)I

    move-result v15

Here's a run-down:
I'm pretty sure the lines that start with a '.' are comments from the decompiler.
The .line 4 entries are just a reference to the line number in java source-code. And I think the .local v15, textColor:I entry just notes the v15 variable name and type (I = integer).

The first bit of interest is the line invoke-virtual {v0, v1, v2}, Landroid/content/Context;->obtainStyledAttributes(I[I). The obtainStyledAttributes method definition can be found here. There are a few overloads, but the call is to the method that accepts an integer and an integer array as parameters - hence the (I[I), I and [I. The three variables in braces at the start denote the object that the method is being called on (the Context object) and the two parameters respectively. The first parameter (v1) is a resource ID and a few lines up the v18 variable is copied to this (move/from16 v1, v18 - this means move the value from v18 to the v1 variable). v18 was declared a few lines above again with the value 0x1030079. This ID can be found in the framework xml-file res/values/public.xml and the value is the name of a style (TextAppearance.StatusBar) that can be found in res/valus/styles.xml (see the xml section above).

The result of obtainStyledAttributes is copied to v5 (move-result-object v5) which (in .line 54) is copied to v0 which is then used to call Landroid/content/res/TypedArray;->getColor with the two integer parameters v18 (0x3) and v15 (0x100 - this is the color black). The first parameter is the index of the color in the style array (index 3 in v5) and the second is the default value (black).

The result of getColor() is then copied to v15 and reused later when setting up the text view for the clock:
Code:
    .line 61
    .local v14, t:Landroid/widget/TextView;
    move-object v0, v14

    move-object/from16 v1, p0

    iput-object v0, v1, Lcom/android/server/status/StatusBarIcon;->mTextView:Landroid/widget/TextView;

    .line 62
    new-instance v11, Landroid/widget/LinearLayout$LayoutParams;

    const/16 v18, -0x2

    const/16 v19, -0x1

    move-object v0, v11

    move/from16 v1, v18

    move/from16 v2, v19

    invoke-direct {v0, v1, v2}, Landroid/widget/LinearLayout$LayoutParams;-><init>(II)V

    .line 65
    .local v11, layoutParams:Landroid/widget/LinearLayout$LayoutParams;
    const/16 v18, 0x0

    move-object v0, v14

    move/from16 v1, v18

    move/from16 v2, v16

    invoke-virtual {v0, v1, v2}, Landroid/widget/TextView;->setTextSize(IF)V

    .line 66
    invoke-virtual {v14, v15}, Landroid/widget/TextView;->setTextColor(I)V

All this means that to change the color of the clock text only, we need to declare a new style and use the ID of this style in the call to obtainStyledAttributes. When adding the style to styles.xml I keep it in the same place as the other status bar styles:
Code:
...
<style name="TextAppearance.StatusBar" parent="@style/TextAppearance">
  <item name="textSize">16.0sp</item> 
  <item name="textStyle">normal</item> 
  <item name="textColor">@color/semc_text_color_primary</item> 
</style>
<style name="TextAppearance.StatusBar.Clock" parent="@style/TextAppearance">
  <item name="textSize">16.0sp</item> 
  <item name="textStyle">normal</item> 
  <item name="textColor">@color/semc_text_color_clock</item> 
</style>
...

The name of the style can be anything, what is important is the ID reference in public.xml, and that a color semc_text_color_clock is declared in colors.xml (see the xml section above).

The style reference in public.xml must have an ID that starts with 0x0103****. This is the ID range for styles, strings and other resources have a different ID range. I always add the new style at the bottom of the style group so that I can easily see which is the next free ID:
Code:
....
<public type="style" name="SEMCTheme.Dialog.Alert.Vanilla" id="0x01030139" />
<public type="style" name="TextAppearance.StatusBar.Clock" id="0x0103013a" />
....
Now that we have added a new style we just need to adjust the smali code to use it. Change the code above from:
Code:
    .line 50
    .local v13, styleIndex:I
    const v18, 0x1030079
to:
Code:
    .line 50
    .local v13, styleIndex:I
    const v18, [B]0x103013a[/B]
Now our new style is used for the call to obtainStyledAttributes. We then need to recompile the smali to a classes.dex file and update the services.jar:

Run the following command to recompile the smali:
Code:
java -jar smali-1.2.5.jar -o out\classes.dex out\services

The output file may be a slightly different size than the original classes.dex but as long as you don't get any errors it will be OK.
Now open services.jar with 7zip and update it with the new classes.dex (drag/drop).

Done :) Push the services.jar to your phone with adb and reboot (make sure you have updated framework-res.apk with the new xml resources first, otherwise our new ID will point to a non-existant resource)
 

Attachments

  • java2smali.rar
    1.3 MB · Views: 349
Last edited:

_calum_

Senior Member
Aug 16, 2010
493
58
Tübingen, Germany
Timescape/Mediascape

Timescape and Mediascape use a different format for some of the images (for mediascape it's just the background on the first page). Timescape also has some animation files to control the wave in the background and the color of the paginator. In 1.6 we can modify all of these, for 2.1 I still haven't got the animations sussed.

All of the information I have collected, including tools for converting the images, can be found here (the 2.1 converter tools are linked at the top of the first post).

If you're just looking to modify the first page of mediascape then it is here: /system/usr/semc/seee/files/ms_bg_background_home_icn.acet

Here are the two dark themes that I have done for Timescape:
1.6
2.1 (without animations)

and the following themes also include Timescape mods:
Dark10 by Chewitt
Enigma by Mobzter
 
Last edited:
  • Like
Reactions: sina.1993h

_calum_

Senior Member
Aug 16, 2010
493
58
Tübingen, Germany
Resource locations

Images:

gavriel18 has posted some of the standard mods here.

XML:

I have attached some images where you can see the effects of changing the most common colours in res/values/colors.xml. It looks pretty horrible, but you can see what you need to change ;)
I still haven't figured out how to change some of the colours (e.g. the network provider text in the status bar) but I will update this when I find out more...

Please PM me or post any other mods that you've made that were well hidden. We can add them here to avoid searching for them again later.

This especially applies to all the OPs from the next post :)
 

Attachments

  • colors.7z
    2.1 MB · Views: 631
Last edited:

_calum_

Senior Member
Aug 16, 2010
493
58
Tübingen, Germany
Theme collection

Update (24.03.2011): There is a much more up-to-date list here with all the new themes.

Here's a list of some of the existing themes around:

2.1:

Dark10 by Chewitt
X10 Res Mods by XperiaX10iUser
ElementaL by Mr_Element
Pitch Black by Shukla
Xdre4m by PoTi_96
PGFX™ Eternity by SEMPITERNAL
Transparent Status Bar Theme by thefunkaygibbon
HTC Sense and Stock Android Status Bar by dk2000zx
Enigma by Mobzter

1.6:
Dark10 by Chewitt
Frankendroid by Bazza1976
Enigma by Mobzter
Red Theme by djsystem

There's also a lot more here thanks to gavriel18

If I have missed any please PM me or post here and I'll update the list. I just scanned the first 3 pages in the forum.
 
Last edited:

_calum_

Senior Member
Aug 16, 2010
493
58
Tübingen, Germany
Recovery tips

This post will be used for tips etc. on recovering your phone if it won't boot (if this never happens to you then you're not trying hard enough ;) )

From here:
Future tip: For anyone who needs to reflash due to a bad upload of an app i would recommend just flashing the system.sin file (ive done this on a number of occasions!!)...
Your phone will boot up (will take a little longer than usual) and the only difference will be is that you will have all your system apps back but you will need to re-root. Everything else will be the same ;)
Even better if you have the One Click Root app found here:
http://xdaforums.com/showthread.php?t=834428

From here:
Possible reasons your phone won't boot after modifications:
images anren't stored properly, right format, right size etc.
unpacked apk improperly, use 7zip, it doesn't mess anything up
you signed the package before pushing it- unless you know what you're doing follow the directions to a tee and you should be fine
pushed the package to the wrong directory, /system/framework-res.apk XX, /system/framework/framework-res.apk
I'm sure many other reasons, these were the only ones I encountered

How to get past boot screen:
Use backup framework-res.apk and push that one to your phone. Remember to place that one where the modified one is.

To see if adb sees your phone type adb devices, if a serial number pops up try pushing your original, if not...
Flash your phone again from scratch :( . Sorry, I don't know any better way yet.

from bitter personal experience :):
If anyone does mess their phone up so much that not even the SE logo shows up (just a black, maybe flickering, screen) and a reflash/seus repair doesn't help. Then what sorted me out was a reflash to Generic Nordic 1.6 using jerpelea's flash tool - the same one I used to get the 2.1 update early - then boot the phone, shut down again and run seus for the 2.1 update.


Not directly related, but here's a tip from XperiaX10iUser:
To reverse chmod use 0755 instead of 4755.
 
Last edited:
  • Like
Reactions: Nimche and nawrejin

nekkidtruth

Senior Member
Jun 2, 2010
250
44
This definitely needs to be sticky'd! It beats looking over pages and pages worth of threads to find the correct ones. It's a lot harder to search through threads without getting completely creative with your search strings so as to cull out all of the useless threads.

Thanks for this! I just posted about a theme I'd like to work on and requested this information!
 

hush66

Senior Member
Apr 6, 2010
917
438
I've always wanting to create my own theme but with the various instructions embedded in so many threads, the lazy in me just gave up on searching for the info.

Now, thanks to _calum_, there are no more excuses! :D
 

Top Liked Posts

  • There are no posts matching your filters.
  • 16
    Modifying XML files and adding resources

    First up, thanks to MrRusch for pointing out that the resources.arsc was being zipped differently. It would have taken a few more flashes to figure out how to pack it into the apk without that little nugget :)

    Secondly, thanks again to MrRusch for this post. Using apktool 1.3.1 means the resources are not compressed, but you still can't just flash the resulting framework. So either use MrRusch's tool or follow the instructions below.

    The XML files in the framework-res.apk (and the other apps) are stored in a compiled form, making them impossible to edit without decompiling them. The process of decompiling them and recompiling is reasonably simple but care is required if any images/resources are added to the apk.
    Modifying the xml files opens up certain things that can’t be changed by just modifying some image files. The best example is changing the battery icon in the notification bar to show a different image for each percentage instead of just 10%, 20%, 40% etc.

    When you modify xml files and add resources to your apk, make sure you copy ALL the modifications made to the stock apk each time after compiling. I have noticed strange effects if I don't do this such as the wrong images being used - I am assuming that in the newly compiled resources.arsc the image references/IDs change when compiled, but I'm not really sure yet. An example of this is when I tried to add the signal strength mod mentioned above to a framework that included the battery icon mod below. This only worked if I also copied the battery mod files to the framework (even though they were already in the apk) after recompiling the signal strength mod. If I just copied the files required for the signal strength mod then the battery indicator would start showing the wrong images (see here, specifically posts 52, 56 and 57).

    Battery Icon:
    Here is a step by step for modifying the battery icon in the framework. To do this you will need to download apktool and install 7zip (other compression programs may work, but I’ve only used 7zip).
    • Decompile the framework using the following command:
      Code:
      java -jar apktool.jar d framework-res.apk framework-res
      This will decompile the framework-res.apk that’s in the current command window folder into a subfolder framework-res
    • Find the xml files you need to modify, e.g. the battery icon xml res\drawable\stat_sys_battery.xml and edit them. This is assuming, of course that you know what needs to go in the XML file ;). For the battery XML it is pretty obvious, just copy/paste the existing nodes and change them so you have the necessary percentage entries, see the attachment for an example with 100 steps.

    • Add any necessary resources to the appropriate folder. For the battery icon you need to create an image for each percentage (or download one of these) and add them to the res\drawable_hdpi folder. The name is the same as the name in the xml (stat_sys_battery_*.png)

    • Rebuild the apk using the following command:
      Code:
      java -jar apktool.jar b framework-res out\framework-res.apk
      This will create a new framework-res.apk in a subfolder out.

      IMPORTANT: Do not push this apk to your phone unless you want to reflash
    • Extract the xml files and images from the newly generated apk (you can use the original images, but the xml files must be the newly compiled ones from the new apk). Add these files to the original framework-res.apk that you want to push to your phone (see the previous post).

    • Extract the resources.arsc from the root of the apk

    • Rename the original framework-res.apk from your theme to framework-res.zip

    • Right-click the extracted resources.arsc and choose the 7zip menu item ‘Add to archive’

    • In the dialog that appears set the achive field at the top to the framework-res.zip from step 7. And set the archive format to zip. Now set the Compression level to store and click OK(if you do not do this your phone will not boot). The settings are in the attached screenshot.

    • Rename framework-res.zip to framework-res.apk and double check that the compressed size or resources.arsc is the same as the original size (see screenshot)

    • Done. Push the new framework to your phone.


    Status Bar Text:

    The style for most (all?) UI elements can be found in res/values/styles.xml. This xml file is only available in a decompiled framework. In the compiled version everything in res/values is compiled into resoureces.arsc.
    The status bar text style is named TextAppearance.StatusBar. The file is pretty large so it's best just to do a search for the name. The definition looks like this:
    Code:
    <style name="TextAppearance.StatusBar" parent="@style/TextAppearance">
      <item name="textSize">16.0sp</item> 
      <item name="textStyle">normal</item> 
      <item name="textColor">@color/semc_text_color_primary</item> 
    </style>
    You can easily adjust the size or make the text bold using the textSize and textStyle elements (see here for a description of these attributes and their values). The color uses the @color/... notation. This is a reference to a color resource, these can be found in colors.xml. We could just change this to a direct color entry (see here for an example), but then we wouldn't have a resource that can be reused for other parts of the UI.
    If you open colors.xml you can find this:
    Code:
    <color name="semc_text_color_primary">#ffffffff</color>
    This sets the primary text color to white (ARGB: FFFFFFFF = White). Changing the value of this will change the color of all primary text throughout the phone (settings menu etc.). If we just want to change the notification bar then it's best to add a new color. To do this just duplicate the above color definition and change the name and color:
    Code:
    <color name="semc_text_color_primary">#ffffffff</color>
    <color name="semc_text_color_custom">#9900ff00</color>
    And then adjust the style to use this new color resource:
    Code:
    <style name="TextAppearance.StatusBar" parent="@style/TextAppearance">
      <item name="textSize">16.0sp</item> 
      <item name="textStyle">normal</item> 
      <item name="textColor">@color/semc_text_color_custom</item> 
    </style>
    Now recompile and copy resources.arsc to your framework as described above and push the framework to your phone for semi-transparent green text in your status bar :)
    13
    24.03.2011: Added a link to the themes section and added my last post here for a while (maybe ;)):
    So I'm back after dropping off the face of the planet for a while :) I've been getting into WP7 development and so my X10 has been in the top drawer for a couple of months... I may get into Android development soon but at the moment I'm a bit short on time (as always ;)).
    I still would like to get the timescape animations sorted (I hate being beaten :D) but I just can't seem to get the cheecksum figured out. If I ever get them sorted I'll update this post again, but until then I probably won't do anything more with my X10.
    I hope this post has been helpful. See ya :)

    This thread was opened to consolidate the information/knowledge about themes for the x10. It is basically a reference thread with key bits of information and links so that a new user can find all the necessary information in one place. At the moment this is spread out all over the place, there are a lot of different threads with different bits of information, and the lack of updates in Draken Korin’s sticky makes it pretty hard to find new information. It should also help us avoid the old ‘where the hell was that image…?’ and ‘where was that … thread again?’.

    Please PM me or post any useful information that is missing, especially the OPs of the threads in the Themes section below. I will continually update this thread with any new information or links.

    All useful information that is posted here will be added to this first page, so that you don't have to wade through pages of posts to try and find something. Everything after the first page should therefore either be repeated on this page somewhere or is just conversation. Please yell at me should this not be the case :)

    Please help me out by posting information, ideas etc.


    Creating Themes for the x10:

    1. Getting Started
    2. Using ADB
    3. Creating a theme
    4. Modifying XML files and adding resources
    5. Modifying Services.jar
    6. Timescape/Mediascape
    7. Resource locations
    8. Theme collection
    9. Recovery tips


    Change log

    14.11.2010 - Added section 4
    18.11.2010 - Updated section 3 with a complete guid for modifying .9.png's
    25.11.2010 - Updated section 7 with text color locations in the xml files
    21.12.2010 - Added a link to MrRusch's tool to section 4
    24.12.2010 - Added link to 2.1 Sources to section 5
    3
    Getting Started

    Before getting started on a theme you'll need to set a few things up. Here's a list of everything you'll need:

    • Root. Your phone will need to be rooted
    • Java SDK (JDK). You'll need to install the JDK (and JRE) before you can start modifying the contents of your phone. Check out this video of Chewitts if you're having problems on x64 systems.
    • ADB (from the Android SDK). You need ADB to push/pull files to and from your phone (see the next post)
    • X10 Drivers. The drivers are usually installed if you install SEUS. Sometimes however you may need to do a manual installation (from my experience mainly on Win7 x64 machines).

    The easiest way to make sure everything is set up properly is to install someone elses theme. Check out this post (1.6) or this post (2.1) for instructions.

    After you've done all that take a look at this.
    2
    Creating a theme

    So, now that we’ve got the framework-res.apk onto our hard drive, we can take a look at creating a theme. The only skill that is really required to change the appearance of the framework (this is the system file that contains the notification bar, settings etc.) is being able to edit .png image files to suit your tastes. If you can do this then it is just a matter of knowing how to extract the images, and how to update the .apk with them after editing.

    .9.png's

    Before we start we need to take a look at a special kind of image in android apk’s: the .9.png’s. These are recognisable, as the name suggests, by the double extension *.9.png.
    .9.png's are images with a bit of extra information embedded. They contain information on how they can be stretched, and where the content can go (e.g. for a button background, which area of the background can contain the text).
    This information is contained in a single pixel border (the guides) around the image and can be added using draw9patch. The catch here is that the guides must be compiled into the image before it can be used.
    The Border: For the most part, you will not have to edit the border of a .9.png because, as long as you follow the guide below, the guides will already be in the image and you will not need to change them. If you do need to create your own (I’d assume you know enough not to be reading this though ;)), you can find more information here.

    Editing the Framework

    In this example we will look at editing framework-res.apk. However, the process can be used on any apk.
    The method described below may seem overly complicated for those who have experience in this area, but it is (in my opinion) the easiest ‘sure-fire’ way to make sure you don’t have any problems (especially with the .9.png’s).
    In rare cases, when the .apk your modifying doesn’t have any .9.png’s (e.g. the Recent Calls widget) then you can skip straight to the ‘Updating images using Drag/Drop’ section below.

    Requirements:

    You will need the following:
    7zip apktool - this is included in the attached file themes.zip
    Some people use WinRAR instead of 7zip, but apktool uses some 7zip commands internally so make sure it is installed (I think, I know this is the case for APK Manager, I still need to test this for apktool, but hey, just use 7zip, it's free and works exceptionally well).

    Setting up:

    In the attached zip file (themes.zip) you will find a copy of my theme creation environment. It’s not too complicated, it only contains a couple of folders so I know where everything is, three key batch files (all one-liners) and apktool.

    The first thing we need to look at is install_framework.bat. This contains the following line:
    Code:
    java -jar apktool.jar install-framework stock\framework-res.apk
    All this does is tell apktool to install the framework on your system. The resources from stock\framework-res.apk will be extracted to a default location. If you don’t do this then you will not be able to recompile other apk’s that rely on the framework (you will get a ResourceNotFound error).
    The other batch files decompile and build the framework, these are the ones that need to be modified if you start working on a different apk:
    Code:
    [B]decompile.bat[/B)
    java -jar apktool.jar d stock\ framework-res.apk working\ framework-res 
    
    [B]build.bat[/B]
    java -jar apktool.jar b working\framework-res out\framework-res.apk
    I have included the stock X10 framework. If you use on of the other frameworks out there you may find that you get a lot of errors when trying to recompile. That’s because someone got lazy with the .9.png’s ;)

    As we are modifying the framework directly we do not need to run install_framework.bat, for a different apk (e.g. Phonebook.apk) you may need to run this first to avoid errors when decompiling.

    Decompiling and Building:

    1. Run decompile.bat. After this you will see that the working folder is filled with the contents of the apk. The images we need to modify are in the subfolders res/drawable-hdpi and res/drawable-land-hdpi. If you look at some of the .9.png’s in there you can see the guides (see the attached image). This makes it really easy to edit them, you can just edit them like any other image (as long as you do not touch/alter the guides).
    2. Edit any images that you want. For the .9.pngs I usually make a copy without the 1 pixel border so that I can edit the entire image, then I paste the copy back into the middle of the original .9.png. You don’t have to worry about the guides, they are already set correctly.
    I have created a tool that takes the stock x10 status bar icons, removes the background and sets them to a colour of your choice here. This was made to make my life easier by minimizing the time I spend in photoshop.

    3. Run build.bat. This compiles the framework, embedding the guide information into the .9.png’s. The output framework is in the out folder. Do not push this to your phone as it is incomplete and the resources.arsc is stored incorrectly. If you do push it to your phone then you get to reflash :eek:
    Now you can just drag the edited images out of the generated framework onto your hard drive and use steps 4. and 5. of the Drag/Drop method described below to update your framework.

    Updating images using Drag/Drop:

    1. Open the .apk in 7zip and browse to the appropriate image folder (almost always the res\drawable-hdpi folder)
    2. Drag/Drop the images you want to edit to your hard drive. Leave the .apk open in 7zip
    3. Edit the images in your favourite program (photoshop or similar)
    4. Drag/Drop the images back into the .apk that is still open
    5. Use the process described in the previous post to push the framework back to the phone

    The reason that the .apk is left open in this process is that some (all?) of them are signed and updating them in this way doesn’t mess with the signature. I’ll admit to not being 100% sure about this, I’m sort of thinking now that people just had problems re-packing due to files being compressed that shouldn’t have been (see the section on editing XML files and adding resources to see what I mean). Please correct me on this one.


    This also [almost] goes without saying, but: Make a backup before you start (you can look at the installer for Chewitts Dark10 theme to see how to do this).

    OK, now you can start messing with the appearance of your phone, have fun :)

    Credits

    Thanks to Mr_Element for the help testing this process and making it easier to follow
    Thanks to damnitpud for his post here, without which I would still have been a bit lost in draw9patch.
    2
    Modifying Services.jar

    To modify services.jar we need to decompile the classes.dex file contained within. We can do this with baksmali:

    1. Open services.jar (found in system/framework) with 7zip
    2. Extract classes.dex from the archive
    3. Open a command window and use the following to decompile:
    Code:
    java -jar baksmali-1.2.5.jar -o out\services classes.dex
    4. You will now have a subfolder out\services with the decompiled .dex classes (smali files)

    These sort of modifications will not be necessary very often. Two things that have been looked at so far are changing the text color on the status bar clock (just the clock, not the notification text) and changing the signal strength to show dBm instead of just the bars. The text color of the clock is relatively simple and is described below. The signal strength mod was done by MrRusch and requires a bit more code, he describes the process here.

    I have attached a converter MrRusch has put together to convert java to smali. This is really helpful when trying to figure out how to modify the smali or event just trying to figure out what a piece of smali code does.

    Since the 15th of december the sources for 2.1 are available here. Now we can see how the original java relates to the decompiled smali code.

    You can find a reference for all the smali ops here. This one is more complete but I prefer the first purely because it's a bit more compact and it has most of what I need anyway. Thanks to untemensch and JesusFreke for the links.

    Status Bar Clock Color:

    I have since figured out how to do this without changing any code, just by changing some xml in res/layout, but I will keep this here as I think it is a nice, easy to follow example to start out with.

    This section describes how to modify the color of the clock in the status bar without changing the color of the notification text (changing all of the status bar text is described in the xml section above).
    First we need to have a look at the smali file com\android\server\status\StatusBarIcon.smali to see how the color of the clock text is set. I use Visual Studio to view/edit the smali files, but you can use any text editor - I have seen PSPad recommended a few times.

    If we look at the init method we can see the following piece of smali code:
    Code:
        .line 44
        .local v15, textColor:I
        const/4 v13, -0x1
    
        .line 50
        .local v13, styleIndex:I
        const v18, 0x1030079
    
        :try_start_1f
        sget-object v19, Lcom/android/internal/R$styleable;->TextAppearance:[I
    
        move-object/from16 v0, p1
    
        move/from16 v1, v18
    
        move-object/from16 v2, v19
    
        invoke-virtual {v0, v1, v2}, Landroid/content/Context;->obtainStyledAttributes(I[I)Landroid/content/res/TypedArray;
    
        move-result-object v5
    
        .line 53
        .local v5, a:Landroid/content/res/TypedArray;
        const/16 v18, 0x0
    
        move-object v0, v5
    
        move/from16 v1, v18
    
        move/from16 v2, v16
    
        invoke-virtual {v0, v1, v2}, Landroid/content/res/TypedArray;->getDimension(IF)F
    
        move-result v16
    
        .line 54
        const/16 v18, 0x3
    
        move-object v0, v5
    
        move/from16 v1, v18
    
        move v2, v15
    
        invoke-virtual {v0, v1, v2}, Landroid/content/res/TypedArray;->getColor(II)I
    
        move-result v15

    Here's a run-down:
    I'm pretty sure the lines that start with a '.' are comments from the decompiler.
    The .line 4 entries are just a reference to the line number in java source-code. And I think the .local v15, textColor:I entry just notes the v15 variable name and type (I = integer).

    The first bit of interest is the line invoke-virtual {v0, v1, v2}, Landroid/content/Context;->obtainStyledAttributes(I[I). The obtainStyledAttributes method definition can be found here. There are a few overloads, but the call is to the method that accepts an integer and an integer array as parameters - hence the (I[I), I and [I. The three variables in braces at the start denote the object that the method is being called on (the Context object) and the two parameters respectively. The first parameter (v1) is a resource ID and a few lines up the v18 variable is copied to this (move/from16 v1, v18 - this means move the value from v18 to the v1 variable). v18 was declared a few lines above again with the value 0x1030079. This ID can be found in the framework xml-file res/values/public.xml and the value is the name of a style (TextAppearance.StatusBar) that can be found in res/valus/styles.xml (see the xml section above).

    The result of obtainStyledAttributes is copied to v5 (move-result-object v5) which (in .line 54) is copied to v0 which is then used to call Landroid/content/res/TypedArray;->getColor with the two integer parameters v18 (0x3) and v15 (0x100 - this is the color black). The first parameter is the index of the color in the style array (index 3 in v5) and the second is the default value (black).

    The result of getColor() is then copied to v15 and reused later when setting up the text view for the clock:
    Code:
        .line 61
        .local v14, t:Landroid/widget/TextView;
        move-object v0, v14
    
        move-object/from16 v1, p0
    
        iput-object v0, v1, Lcom/android/server/status/StatusBarIcon;->mTextView:Landroid/widget/TextView;
    
        .line 62
        new-instance v11, Landroid/widget/LinearLayout$LayoutParams;
    
        const/16 v18, -0x2
    
        const/16 v19, -0x1
    
        move-object v0, v11
    
        move/from16 v1, v18
    
        move/from16 v2, v19
    
        invoke-direct {v0, v1, v2}, Landroid/widget/LinearLayout$LayoutParams;-><init>(II)V
    
        .line 65
        .local v11, layoutParams:Landroid/widget/LinearLayout$LayoutParams;
        const/16 v18, 0x0
    
        move-object v0, v14
    
        move/from16 v1, v18
    
        move/from16 v2, v16
    
        invoke-virtual {v0, v1, v2}, Landroid/widget/TextView;->setTextSize(IF)V
    
        .line 66
        invoke-virtual {v14, v15}, Landroid/widget/TextView;->setTextColor(I)V

    All this means that to change the color of the clock text only, we need to declare a new style and use the ID of this style in the call to obtainStyledAttributes. When adding the style to styles.xml I keep it in the same place as the other status bar styles:
    Code:
    ...
    <style name="TextAppearance.StatusBar" parent="@style/TextAppearance">
      <item name="textSize">16.0sp</item> 
      <item name="textStyle">normal</item> 
      <item name="textColor">@color/semc_text_color_primary</item> 
    </style>
    <style name="TextAppearance.StatusBar.Clock" parent="@style/TextAppearance">
      <item name="textSize">16.0sp</item> 
      <item name="textStyle">normal</item> 
      <item name="textColor">@color/semc_text_color_clock</item> 
    </style>
    ...

    The name of the style can be anything, what is important is the ID reference in public.xml, and that a color semc_text_color_clock is declared in colors.xml (see the xml section above).

    The style reference in public.xml must have an ID that starts with 0x0103****. This is the ID range for styles, strings and other resources have a different ID range. I always add the new style at the bottom of the style group so that I can easily see which is the next free ID:
    Code:
    ....
    <public type="style" name="SEMCTheme.Dialog.Alert.Vanilla" id="0x01030139" />
    <public type="style" name="TextAppearance.StatusBar.Clock" id="0x0103013a" />
    ....
    Now that we have added a new style we just need to adjust the smali code to use it. Change the code above from:
    Code:
        .line 50
        .local v13, styleIndex:I
        const v18, 0x1030079
    to:
    Code:
        .line 50
        .local v13, styleIndex:I
        const v18, [B]0x103013a[/B]
    Now our new style is used for the call to obtainStyledAttributes. We then need to recompile the smali to a classes.dex file and update the services.jar:

    Run the following command to recompile the smali:
    Code:
    java -jar smali-1.2.5.jar -o out\classes.dex out\services

    The output file may be a slightly different size than the original classes.dex but as long as you don't get any errors it will be OK.
    Now open services.jar with 7zip and update it with the new classes.dex (drag/drop).

    Done :) Push the services.jar to your phone with adb and reboot (make sure you have updated framework-res.apk with the new xml resources first, otherwise our new ID will point to a non-existant resource)