Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,741,210 Members 48,371 Now Online
XDA Developers Android and Mobile Development Forum

[GUIDE] T-mobile theme engine for the faint at heart (non-linux users)

Tip us?
 
nhnt11
Old
(Last edited by nhnt11; 5th June 2011 at 02:58 PM.)
#1  
nhnt11's Avatar
Senior Member - OP
Thanks Meter 1125
Posts: 1,375
Join Date: Sep 2010
Location: Bangalore

 
DONATE TO ME
Default [GUIDE] T-mobile theme engine for the faint at heart (non-linux users)

Hi guys,

This is a guide I put together to make themes for the T-Mobile theme engine based mostly on what i've figured out by digging into haxzamatic's awesome template.

This does not require you to be on linux or whatever.

This is mainly a temporary guide till an Eclipse template for the engine is released, or for those who dont want to use eclipse, etc.

Requirements:
-You should know how to decompile/recompile/sign apk files.
-You should know some basic xml editing and theming.
-basic terminal commands
-You must install the framework for apktool, navigate to the folder containing framework-res.apk and execute -
apktool if framework-res.apk


GUIDE:

1. Get the compiled Templatebread from here: http://bit.ly/hdEWsf

2. Decompile it with apktool or whatever you use.

3. Open the AndroidManifest.xml

4. Change the names according to your theme. Here's my manifest for my NTSense theme:
Code:
Select Code
<?xml version="1.0" encoding="UTF-8"?>
<manifest android:hasCode="false" android:versionCode="2" android:versionName="1.1" android:installLocation="internalOnly" package="com.nhnt11.theme.ntsense"
  xmlns:android="http://schemas.android.com/apk/res/android" xmlns:pluto="http://www.w3.org/2001/pluto.html">
    <uses-sdk android:minSdkVersion="9" android:targetSdkVersion="9" />
    <application android:label="@string/theme_name" android:icon="@drawable/icon">
        <activity android:label="@string/theme_name" android:name="com.tmobile.theme.Foo" />
    </application>
    <theme pluto:themeId="NTSense" pluto:styleId="@style/NTSense" pluto:name="@string/theme_name" pluto:preview="\@drawable/preview" pluto:author="@string/author" pluto:copyright="@string/copyright" pluto:wallpaperImage="@drawable/wallpaper" pluto:styleName="@string/style_appearance_name" pluto:ringtoneName="Standard" pluto:ringtoneFileName="media/audio/ringtones/Standard.mp3" pluto:notificationRingtoneName="Subtle" pluto:notificationRingtoneFileName="media/audio/notifications/Subtle.mp3" />
</manifest>
Note that the template xml file has "pluto:name="\@string/theme_name" - you need to remove this backslash, its a typo. it should be just "@string/theme_name" Should not be needed using latest version of apktool.

More detail about stuff in the manifest in 2nd post.

5. Open /res/values/strings.xml. Edit to match your theme. Here's mine again:
Code:
Select Code
<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <string name="app_name">NTSense Theme</string>
    <string name="theme_name">NTSense</string>
    <string name="style_appearance_name">NTSense</string>
    <string name="author">nhnt11</string>
    <string name="copyright">nhnt11</string>
</resources>
6. Same for /res/values/styles.xml
Code:
Select Code
<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <style name="NTSense" parent="@android:style/Theme" />
</resources>
NOTE: the name of your style must be the same as the pluto:styleID in the manifest!!!

7. Now, if you are making a theme from scratch, go ahead and just edit the images already in the hdpi folder. compile and sign. done. But, read on anyway because i explain how the theme engine works below.

If you want to port a theme, here's what to do:

First, go ahead and delete all the drawable folders. Now, copy your THEMED drawable folders into the directory. You now have to add the following to your theme:
/res/drawable-_dpi/preview.png (prefarably hdpi I guess) (I suggest that you DO NOT remove the backslash in the manifest as different locations of preview.png do not work on different screen sized devices. RETAIN the backslash!! Your theme will not have a preview, but this is a small trade off to get themes working if you're not on linux.)
/res/drawable/wallpaper.png (this can be in drawable-_dpi for different screen res. too)
/res/drawable-_dpi/icon.png.
More detail on those in the second post.

8. Now go to /res/xml - there are a ton of xml's here. Open redirections.xml.
Here, there are entries for specifying which XML redirects which app. Add entries like so:

<package-redirections android:name="<app package name here>"
android:minSdkVersion="7"
android:resource="@xml/your_xml_file(without '.xml' at the end)" />

You have now specified that you want resources in <app> to be redirected based on what's in your_xml_file. Where and what is this your_xml_file and how do you add/modify it? That's what the rest of the xml's in the res/xml folder are.

The rest of these xmls are the heart of the theme engine. How they work is, when android asks for an image or other resource, they come in and switch that resource for your themed one. So its sort of like a proxy server.

Each xml contains the redirections for an app.
For example, redirections to framework-res.apk are in android.xml, and SystemUI is in com_android_systemui.xml
Delete files corresponding to apps you have not themed (for consistency, you might also want to delete the corresponding entry in redirections.xml. If you don't know how, just leave it). You can also add apps by using the convention, <package name>.xml where dots in the package name are separated by underscores, ie. your_package_name.xml for your.package.name

Package names of apps can be found in their respective AndroidManifest.xml's after decompiling. See 2nd post for more detail.

To redirect files, for eg. title_bar_portrait.9.png, just add the item to the systemui xml like so:

Code:
Select Code
<item name="drawable/title_bar_portrait">@drawable/title_bar_portrait</item>
Note: To make it easy to add hundreds of drawables, I've written a little xml generator - here

Here, the "name" part tells the theme engine WHAT you're replacing.
the part inside the item tag ("@drawable/title_..... in this case") tells it WHAT to replace it with.

In all android packages, the @ sign means that you are referring to a resource in the package. Also, you can refer to a general system-wide resource by using @android:<whatever>

for example, you can replace the above title_bar_portrait with statusbar_background thats already in the android framework like so:

Code:
Select Code
<item name="drawable/title_bar_portrait">@android:drawable/statusbar_background</item>
After the @ symbol, you have to specify the type of resource. in this case, "drawable".

Note that because the @ symbol refers to something INSIDE your package, you SHOULD NOT use it in the item name="<blablabla>" part.

See Variables in the second post for more detail.

Back to the xmls.

Pretty much all images are ALREADY entered in the xml. Just do a find and replace and get rid of all the "frameworks_res_" and "com_android_systemui_"
for eg, it already has <item name="drawable/title_bar_portrait">@drawable/com_android_systemui_title_bar_portrait</item>, so you need to get rid of the "com_android_systemui_" part.

Actually the professional/clean way to do it would be to rename all of your files to include "package_to_which_it_belongs_" at the front of the filename for better organisation. if you have the time and patience, do it this way!!!!

9. Delete the /res/values/public.xml. Its useless and annoying while compiling. It will be regenerated while compiling.

10. Try to compile the apk. you will probably get errors, because although all the resources are listed in the android.xml (or whatever) you deleted the HDPI folder so many might be missing! it will print what is missing when you compile though, so just go ahead and delete those lines.

11. you can also re-map styles, colors, drawables, etc.. for eg. battery percentage, add this to android.xml after putting the required battery xml in res/drawable:

<item name="drawable/stat_sys_battery">@drawable/stat_sys_battery</item>

also for a color, just add it to /res/values/colors.xml and then in android.xml, add

<item name="color/[name of color]">@color/[name of your color]</item>

See variables in the second post for more info.

12. Sign your compiled apk, and install it! If all goes well you will be able to apply and see the changes after you reboot.

Hope this helped!
Current Devices:
Sony Xperia Z2 (D6502) - Stock + Xposed
Sony Xperia SL - OpenSEMC (CyanogenMod 11)
Asus Nexus 7 - CyanogenMod 11 nightly builds

Past Devices:
Dell XCD35 (Indian ZTE Blade)
HTC Wildfire
The Following 107 Users Say Thank You to nhnt11 For This Useful Post: [ Click to Expand ]
 
nhnt11
Old
(Last edited by nhnt11; 6th March 2011 at 01:33 PM.)
#2  
nhnt11's Avatar
Senior Member - OP
Thanks Meter 1125
Posts: 1,375
Join Date: Sep 2010
Location: Bangalore

 
DONATE TO ME
More detail

Stuff in the Manifest
The manifest contains several general properties of your app file.
The following are a few which are referenced here.
  • To change the ringtone: Just put your desired ringtones/notification sound in /assets/media/audio/<Ringtones/Notifications> To prevent your theme from changing the ringtones, delete the corresponding lines from AndroidManifest.xml. I'm sure you can figure out which lines to delete. Also, you can remove the /assets folder, unless you have some other asset in it. (in which case just delete the ringtone buried inside as mentioned above)
  • Your theme's wallpaper is set to /res/drawable/wallpaper.png. Again, remove the required line from AndroidManifest.xml to make sure you dont mess up your users'wallpapers.
  • Your theme's theme chooser preview is set to /res/drawable/preview.png. (NEW - I suggest that you DO NOT remove the backslash from the manifest! (see first post))
  • The icon of your theme's apk file is set to /res/drawable-_dpi/icon.png. You should have an icon for at least one screen-size (preferably hdpi), but its nice to have it for all three.

Variables

This is to help those who don't have dev experience. In android packages, wherever you see an "@" symbol, the part following it will refer to a variable. A variable is basically a name given to refer to a resource for convenient use.
Here are a few types of variables you should know about (note that the explanations may not apply to the theme chooser, but are general):
1. drawable
2. color
3. style
4. string
5. dimen

1. Drawables - Drawbles are, well, drawable. These are resources which android can draw. That includes your theme images, wallpaper, preview, and also stuff like the battery percentage xml's, progress bar xml's etc.

1. Colors - Colors are colors!! Duh! LOL . Anyway, in /res/values/colors.xml you will find an editable list of colors. Say you use green a lot in your theme. Instead of typing "#ff00ff00" everywhere, you can simply define a color called "green" here, by adding the following line:

Code:
Select Code
<color name="green">#ff00ff00</color>
Now, you can substitute "@color/green" wherever you want to use green.

3. Styles - these are a little advanced. They allow you to define a set of attributes and apply the entire set to different components.

Here's an example style:

Code:
Select Code
<style name="mytext" parent="@android:style/TextAppearance.Small">
     <item name="android:textColor">#ffff0000</item>
</style>
Let's break this down -
First of all, we're naming this style "mytext".
We're saying that its parent is "@android:style/TextAppearance.Small".
This means, that it automatically inherits ALL the properties of the android system style, "TextAppearance.Small" which can be found in the styles.xml in framework-res/res/values.

Now, we're adding an item with the android attribute, "textColor". There are many attributes to choose from, you can look in the attrs.xml in framework-res/res/values. (Note that an attribute may not be applicable to every situation)

Next we're giving the text color a value - in this case, red.

Now, this style can be applied anywhere to get red text in the normal system font size for small text.

Here's an example of how to use styles: post 88.

4. Strings - Strings let you make references to text. Maybe you have your theme name everywhere, and its really long. Maybe your theme name is "supercalifragilisticexpialidocious". Well, you dont want to type that every time. So you can add the following to /res/values/strings.xml:
Code:
Select Code
<string name="myname">supercalifragilisticexpialidocious</string>
Now, wherever you want to use the word "supercalifragilisticexpialidocious", just substitute it with "@string/myname". And it will use whatever you defined for "myname" there.

5. Dimensions - These store values for sizes and so on. For example, its an easy way to remember a custom text size that you need a lot. Add the following to "/res/values/dimens.xml" (this does not exist by default)
Code:
Select Code
<dimen name="mysize">33.4sp</dimen>
This will allow you to use the font size 33.4 by substituting "@dimen/mysize" wherever you want. For sizes in pixels, use "____.__dip" instead of "sp".

Comments
Comments are useful little dev tools. Comments basically let a developer (but they're useful to themers too) make comments in the code. Basically, the syntax of a comment (more on that in just a bit) tells the compiler to ignore that line(s). A side effect is that you can "comment" parts of your code - which means that you are marking it as a comment - which are not used (or not yet ready to be used), before compiling and releasing, while retaining the old code for future reference.

How to make a comment in xml files:

Simply surround the code you want to comment with "<!-- ......... -->.
The "<!--" part tells the compiler where a comment starts, and "-->" tells it where the comment ends.

More stuff will come here as I think of it.
Current Devices:
Sony Xperia Z2 (D6502) - Stock + Xposed
Sony Xperia SL - OpenSEMC (CyanogenMod 11)
Asus Nexus 7 - CyanogenMod 11 nightly builds

Past Devices:
Dell XCD35 (Indian ZTE Blade)
HTC Wildfire
The Following 42 Users Say Thank You to nhnt11 For This Useful Post: [ Click to Expand ]
 
keunhuvac
Old
#3  
keunhuvac's Avatar
Senior Member
Thanks Meter 159
Posts: 672
Join Date: Nov 2010

 
DONATE TO ME
I received many error:
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_timepicker_input_selected.9.pn g
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_timepicker_up_disabled.9.png malformed.
No marked region found along edge.
Found along top edge.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_timepicker_up_disabled.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_timepicker_up_disabled_focused .9.png malformed.
Frame pixels must be either solid or transparent (not intermediate alphas).
Found at pixel #8 along top edge.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_timepicker_up_disabled_focused .9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_timepicker_up_normal.9.png malformed.
No marked region found along edge.
Found along top edge.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_timepicker_up_normal.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_timepicker_up_pressed.9.png malformed.
No marked region found along edge.
Found along top edge.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_timepicker_up_pressed.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_timepicker_up_selected.9.png malformed.
No marked region found along edge.
Found along top edge.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_timepicker_up_selected.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_title_bar.9.png malformed.
Must have one-pixel frame that is either transparent or white.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_title_bar.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-land-hdpi\frameworks_res_title_bar.9.png malformed.
Must have one-pixel frame that is either transparent or white.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-land-hdpi\frameworks_res_title_bar.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_title_bar_medium.9.png malformed.
Must have one-pixel frame that is either transparent or white.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_title_bar_medium.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-land-hdpi\frameworks_res_title_bar_medium.9.png malformed.
Must have one-pixel frame that is either transparent or white.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-land-hdpi\frameworks_res_title_bar_medium.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_title_bar_portrait.9.png malformed.
Must have one-pixel frame that is either transparent or white.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_title_bar_portrait.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_title_bar_portrait_cust.9.png malformed.
Must have one-pixel frame that is either transparent or white.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_title_bar_portrait_cust.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_title_bar_shadow.9.png malformed.
Must have one-pixel frame that is either transparent or white.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_title_bar_shadow.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_title_bar_tall.9.png malformed.
Must have one-pixel frame that is either transparent or white.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_title_bar_tall.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-land-hdpi\frameworks_res_title_bar_tall.9.png malformed.
Must have one-pixel frame that is either transparent or white.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-land-hdpi\frameworks_res_title_bar_tall.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_toast_frame.9.png malformed.
No marked region found along edge.
Found along top edge.
ERROR: Failure processing PNG image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_toast_frame.9.png
ERROR: 9-patch image C:\Users\ADMIN\.\templatebread\res\drawable-hdpi\frameworks_res_zoom_plate.9.png malformed.
No marked region found along edge.
Found along top edge.
 
nhnt11
Old
#4  
nhnt11's Avatar
Senior Member - OP
Thanks Meter 1125
Posts: 1,375
Join Date: Sep 2010
Location: Bangalore

 
DONATE TO ME
Look up nine-patch pngs. Theres plenty of information about them. You didn't properly edit the nine-patch images (ending with .9.png)

Sent from my HTC Wildfire using XDA App
Current Devices:
Sony Xperia Z2 (D6502) - Stock + Xposed
Sony Xperia SL - OpenSEMC (CyanogenMod 11)
Asus Nexus 7 - CyanogenMod 11 nightly builds

Past Devices:
Dell XCD35 (Indian ZTE Blade)
HTC Wildfire
The Following User Says Thank You to nhnt11 For This Useful Post: [ Click to Expand ]
 
keunhuvac
Old
#5  
keunhuvac's Avatar
Senior Member
Thanks Meter 159
Posts: 672
Join Date: Nov 2010

 
DONATE TO ME
If i replaced some pngs with other my prefer pngs, then resigned, everything was OK. But if i wanted to add new pngs, i got that errors!
 
nhnt11
Old
#6  
nhnt11's Avatar
Senior Member - OP
Thanks Meter 1125
Posts: 1,375
Join Date: Sep 2010
Location: Bangalore

 
DONATE TO ME
Strange... you shouldn't be getting nine-patch errors if you simply added some extra pngs. are you SURE you're doing it right?

Did you add the pngs from an already compiled framework or did you decompile them? or did you make them from scratch?
Current Devices:
Sony Xperia Z2 (D6502) - Stock + Xposed
Sony Xperia SL - OpenSEMC (CyanogenMod 11)
Asus Nexus 7 - CyanogenMod 11 nightly builds

Past Devices:
Dell XCD35 (Indian ZTE Blade)
HTC Wildfire
 
Haraldr Blaatand
Old
#7  
Haraldr Blaatand's Avatar
Senior Member
Thanks Meter 10
Posts: 117
Join Date: Sep 2010
What OS are you using to build your theme apks? Are you using Windows?
 
nhnt11
Old
#8  
nhnt11's Avatar
Senior Member - OP
Thanks Meter 1125
Posts: 1,375
Join Date: Sep 2010
Location: Bangalore

 
DONATE TO ME
No i'm on a hackintosh setup, why?
Current Devices:
Sony Xperia Z2 (D6502) - Stock + Xposed
Sony Xperia SL - OpenSEMC (CyanogenMod 11)
Asus Nexus 7 - CyanogenMod 11 nightly builds

Past Devices:
Dell XCD35 (Indian ZTE Blade)
HTC Wildfire
 
Haraldr Blaatand
Old
#9  
Haraldr Blaatand's Avatar
Senior Member
Thanks Meter 10
Posts: 117
Join Date: Sep 2010
I'm limited to Windows, and the t-mo engine requires a special aapt, which has not been compiled for Windows to my knowledge.
 
nhnt11
Old
(Last edited by nhnt11; 23rd February 2011 at 02:53 PM.)
#10  
nhnt11's Avatar
Senior Member - OP
Thanks Meter 1125
Posts: 1,375
Join Date: Sep 2010
Location: Bangalore

 
DONATE TO ME
Yeah, I heard about that. But I'm using the normal non-t-mobile aapt that came bundled with apktool, and it works fine for me.

Edit: AFAIK, you only need the T-mo aapt the first time you compile, after that decompiling and recompiling with apktool works. Correct me if I'm wrong please.
Current Devices:
Sony Xperia Z2 (D6502) - Stock + Xposed
Sony Xperia SL - OpenSEMC (CyanogenMod 11)
Asus Nexus 7 - CyanogenMod 11 nightly builds

Past Devices:
Dell XCD35 (Indian ZTE Blade)
HTC Wildfire

The Following User Says Thank You to nhnt11 For This Useful Post: [ Click to Expand ]
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes