X10 Mini/Mini pro Theme Reference for Newbies

---

This thread was opened to consolidate the information/knowledge about themes for the x10 mini/mini pro. 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. 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.

At the moment this is a work in progress. I will fill it out in the days to come. And will keep it updated so long as I have my x10 mini pro (at least another 18 months according to t-mobile ).

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. Recovery tips
7. Theme collection
8. Replace Framework with Root Explorer

Credits:
_calum_

Download all your original system applications here.

**Guys If u like this tutorial thank me by donating me .**

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)

The easiest way to make sure everything is set up properly is to install someone elses theme.
After you've done all that take a look at this.

Using ADB

There's an ADB Guide here :

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... ):

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 boot animation mod at the bottom is for 2.1 it is found in system/media/bootanimation.zip.

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, Conversations.apk,Alarm.apk etc.
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 )

Courtesy of corruptfate is the steps to modify the Boot animation

step 1: Copy bootanimation.zip to sdcard
step 2: Open CMD (Command Prompt)
step 2: type "adb shell"
step 3: type "su"
step 5: type "mount -o remount,rw -t yaffs2 /dev/block/mtdblock4 /system"
step 5: busybox cp /sdcard/bootanimation.zip /system/media/bootanimation.zip
step 6: chmod 755 /system/media/bootanimation.zip

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:

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:

decompile.bat
java -jar apktool.jar d stock\ framework-res.apk working\ framework-res 

build.bat
java -jar apktool.jar b working\framework-res out\framework-res.apk

I have included the stock X10 mini pro 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-ldpi and res/drawable-land-ldpi. 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 mini / mini pro 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
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.

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

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 .

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). I have attached some example files with 100 steps (one for each percentage) in case you just want to add them to your existing framework. Just make sure they are added as described below!
1. Decompile the framework using the following command:

java -jar apktool.jar d framework-res.apk framework-res

2.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.

3. 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)

4. Rebuild the apk using the following command:

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
5. 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).

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

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

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

9. 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.

10. 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)

11. 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:

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

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

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

<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

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:

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.

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.

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:

 .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:

  .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:

...
<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:

....
<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:

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

to:

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

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:

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)

cant wait to get my own theme cooked

thanks man

So difficult to read for foreigner like me from China...

But, I'll try to lick it....

Anyway,thank Q...

please...i need a help...i dont know how to install game in mobile???when finish transfer a game on sd card...and what to do next???when start card in phone i dont know where is a file.....sorry for my bad english....