[GUIDE]Making themes for Theme Chooser (CM7) [work in progress, last update 14/4-13] - Sony Ericsson XPERIA X10 Mini

Making themes for Theme Chooser (CM7)
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
This is a guide for making themes for Theme Chooser. Feel free to add idears of stuff I left out.
When getting a hold of what everything inside the theme-apk does, you should also be able to port CM10 themes to CM7.
Let's start by getting an overview of the content of a theme-apk.
In the root of the theme-apk we find:
Inside the res-folder there are some folders.
In the values-folder are we have a group of XMLs. This is just a quick run down. Detailed explanation comming later:
colors.xml - Defines colors as names (text) to be used in styles. Instead of writing "#ffc6c6c6" all the time, you can use a more understandable name like "@color/xperia_eclair_dark"
drawables.xml - Used to transform images in a themed app to a solid color. Eg. if we want to change the background image for an app to a red transparent filter, we can add a drawable item here with the value "88FF0000" (55 = transparency value. FF = full red. Green and Blue are both set to 00)
integers.xml - Used to set some system values, like the duration of animations, the color of LED on different occasions and more.
Read mere here: http://www.androidjavadoc.com/2.3/com/android/internal/R.integer.html
strings.xml - Here the strings for the theme (name, author etc.) are defined.
styles.xml - Here we have all the themed styles. If you know CSS in HTML you might say "Ahaaa" right away, if not it you might just say "huh?". Don't worry, I will explain later
This guide is devided into seperete parts in the folowing posts.
NOTICE: This is a first simple draft. More tips and tricks will be added to the posts over time.
2: Visual appearance in Theme Chooser etc
3: Transitions, animations and integers
4: PNGs and .9.PNGs
5: Styles and colors [updated 14/4-13]
6: XML-references [updated 14/4-13]
7: Advanced image and color animation [updated 14/4-13]
8: Compiling and signing the theme-APK
9: Best replys

---

Visual appearance in Theme Chooser etc
AndroidManifest.xml
This XML defines the visual part of the theme in Theme Chooser and the APK-information in Packet Installer and Application manager.
Here is an exampel:
Code:
<?xml version="1.0" encoding="utf-8"?>
<manifest android:hasCode="false" [COLOR="Red"]android:versionCode="1" android:versionName="1 Retro"[/COLOR] android:installLocation="internalOnly" [COLOR="red"]package="com.emperordk.theme.retro"[/COLOR]
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:pluto="http://www.w3.org/2001/pluto.html">
<uses-feature android:name="com.tmobile.software.themes" />
<application android:label="@string/theme_name" [COLOR="Blue"]android:icon="@drawable/icon"[/COLOR] android:hasCode="false" />
<theme pluto:themeId="XperiaEclair" [COLOR="Purple"]pluto:styleId="@style/Eclair"[/COLOR] [COLOR="Green"]pluto:name="@string/theme_name"[/COLOR] pluto:preview="@drawable/preview" pluto:wallpaperImage="@drawable/wallpaper" pluto:author="@string/author" pluto:copyright="@string/copyright" pluto:styleName="@string/style_appearance_name">
<meta-data android:name="com.tmobile.theme.redirections" android:resource="@xml/redirections" />
</theme>
</manifest>
The first thing the XML does, is define the theme version, and package ID (the red parts above).
To avoid collision with other apps and themes it's very important not to use a package ID that is used by other apps.
Eg. if I would make a retro-theme I would use this package ID:
package="com.emperordk.theme.xperiaeclair"
Click to expand...
Click to collapse
or something like that
It's not very likely, that this ID is used by any other app
Next we notice, that the name of the theme comes from a string (gren part), so this is edited elswhere, se right below in this post.
In the same TAG the APK-icon is also defined (blue part).
"@drawable/icon" is a reference to the file "res/drawable-ldpi/icon.png" (asuming we make a LDPI-theme).
If the file does not exists in drawable-ldpi, Android looks for it in drawable-mdpi or drawable-hdpi.
Making a LDPI theme, everything should be made in true LDPI for faster and smoother response (Android resizes from MDPI and HDPI to LDPI, and that takes up some CPU-power).
Next we set the parrent style (purple part). This style must exist in the styles.xml (later in this guide).
In the same line a lot of strings are fetched, like theme name and so on, we also define the reference to the preview image the same way as the icon was defined, we must have a file for portrait and landscape. (Notice: wallpaper will not be set by Theme Chooser in CM7).
You should not edit any of the TAGs and/or arguments that are not marked by a color above.
Editing @xml/redirections will have no effect. Theme Chooser will use redirections.xml anyway (I realy want to be able to set the redirection master-XML to another XML-file, but I have not yet found the part of Theme Chooser where I can make it read the string from AndroidManifest.xml).
We can from this XML identify the existence of the folowing files:
res/drawable-ldpi/icon.png
res/drawable-hdpi/preview.png
res/drawable-land-mdpi/preview.png
YES! For some reason place the portrait-preview in "drawable-hdpi" and the landscape-preview in "drawable-land-mdpi", or Theme Chooser will return an error.
The size of LDPI icons is 36 x 36 px
The LDPI prewiew image should be 135 x 209 px (if lager, Android will just resize)
res/values/strings.xml
Here strings for APKs are defined.
As a theme APK realy doesn't do anything but being a container for theme-parts, there are only a very few strings.
This would be the content for a Retro-theme made by me:
Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Xperia Eclair Retro</string>
<string name="theme_name">Xperia Eclair Retro</string>
<string name="style_appearance_name">Retro</string>
<string name="author">Emperor</string>
<string name="copyright">2013</string>
</resources>

---

Transitions, animations and integers
XMLs that controls how transitions and animations looks are placed in the anim-folder.
integers.xml is used to set some system values, like the duration of animations, the color of LED on different occasions and more.
Read mere here: http://www.androidjavadoc.com/2.3/com/android/internal/R.integer.html
---- MORE COMMING -----

---

PNGs and .9.PNGs
There are meny folders for PNG files. Mostly these will be present in a theme:
drawable-hdpi
drawable-land-ldpi
drawable-land-mdpi
drawable-land-mdpi-finger
drawable-ldpi
drawable-mdpi
drawable-mdpi-finger
Here all the PNGs used by the themed apps are placed.
Making a theme for an LDPI device, it would be best to resize everything to true LDPI. This way, the device does not have to make the resizing it self, and it will speed up the smoothnes of using the device. Also the finished APK will take up less space.
Read more about screen-sizes here: http://developer.android.com/guide/practices/screens_support.html
Scaling ratio for LDPI:MDPI:HDPI:XHDPI is 3:4:6:8
• 36x36 for low-density
• 48x48 for medium-density
• 72x72 for high-density
• 96x96 for extra high-density
Notice: Almost all themes also got folders for MDPI and/or HDPI even if they claim to be LDPI-theme. In most cases it has no influence on the visuel look.
/drawable-finger-ldpi etc
Well, the "finger"-part is called a "qualifier" and this qualifier should actually not be nessesery for our devises to use.
This qualifier makes it explicit, that PNGs in this folder are for touchscreen devices, doh!. This makes it possible to have different PNGs for touchscreen and non-touchscreen devices.
But other qualifiers than "finger" can be usefull, eg. if we draw some letters on a PNG, that has to be different for different languages, or the PNG must look different because layouts are also different eg. left-to-right og right-to-left text, we can make language-dependent qualifiers.
This is advanced theming, LOL. List of qualifiers read more here: http://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources
If you are theming an app that holds PNGs in a "finger" folder, just do the same in your theme.
How to edit .9.PNG read more here: http://forum.xda-developers.com/showthread.php?t=2033415

---

Styles and colors
styles.xml
When you for the first time open and look at the content of styles.xml you might regret starting to learn about theming.
But it's not that hard first you understand what it's all about.
Lets start with a very simple example.
We got this simple app: Calculator.apk with the package ID: com.android.calculator2
NOTICE: Some genius made a fixed black background in the layout-XML for this app. That's why the background can't be themed, but I fixed that. Grab the fixed Calculator.apk here. http://www.mediafire.com/?8x4q08tpcqnl2jf
Calculator.apk looks like this unthemed:
The steps to learn how to theme that app would be to decompile it and then read it's "AndroidManifest.xml"
Code:
<?xml version="1.0" encoding="utf-8"?>
<manifest android:versionCode="10" android:versionName="2.3.7" package="com.android.calculator2"
xmlns:android="http://schemas.android.com/apk/res/android">
<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="10" />
<original-package android:name="com.android.calculator2" />
<application android:label="@string/app_name" android:icon="@drawable/icon">
<activity [COLOR="Red"]android:theme="@android:style/Theme.Black.NoTitleBar"[/COLOR] android:name="Calculator">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Here we learn that it's themed by the style named "Theme.Black.NoTitleBar" from "@android" (red line) wich is the same as "framework-res.apk".
So we decompile "framework-res.apk" and open "res/values/styles.xml" and look for a style named "Theme.Black.NoTitleBar" and find this:
Code:
<style name="Theme.Black.NoTitleBar" parent="@style/Theme.Black">
<item name="windowNoTitle">true</item>
</style>
It doesn't look of much, but it tells us, it enheriets it's styles from "Theme.Black". Aha! We find it and it looks like this:
Code:
<style name="Theme.Black" parent="@style/Theme">
<item name="colorBackground">@color/black</item>
<item name="windowBackground">@color/black</item>
</style>
It should be very obvious, that the style makes a solid black background. Let's change that from our theme.
First lets set up a string for a transparent color. We will almost for sure need that a lot anyway. Chances are, that you a using an exsisting theme as a base for your theme, and most likely it's already defined.
In our theme-APK-folder we open "res/values/colors.xml" and add this inside the resources-tags:
Code:
<resources>
...
<color name="transparent">#00000000</color>
...
</resources>
Still in our theme-APK-folder we open "res/values/styles.xml" and add this inside the resources-tags:
Code:
<resources>
...
<style name="Theme.Black" parent="@android:style/Theme.Black">
<item name="android:colorBackground">@android:color/transparent</item>
<item name="android:windowBackground">@drawable/semc_bg</item>
</style>
...
</resources>
Notice the difference in how to write the style in our theme and how it was written in the original framework-res.apk!
Lets explain what it does:
First of all we give it a name. It's smart to keep the same names to make it easy to remember what this is for.
Next we add an argument that inheriets styles from the original style from the original framework-res.apk. It's not nessesery for this style as we change everything, but for other styles where we only will change a few things this is smart.
The two item-lines then sets background-color to transparent and sets background-image to "res/drawable-ldpi/semc_bg.png" from our theme-APK.
Final step is to add style-reference. In our theme-APK-folder we open "res/xml/android.xml" and add this line inside the resource-redirections-tags
Code:
<resource-redirections>
...
<item name="style/Theme.Black">@style/Theme.Black</item>
...
</resource-redirections>
Now Theme Chooser will replace the style in framework-res.apk with the style from our theme-APK.
We have made our first themed style (In post #6 we will also theme the PNGs of Calculator.apk). The result looks like this:
So your next question will be: What all the style-names in styles.xml are responsible for different texts etc.?
Well, I will gather all info about that. Untill then read here:
http://developer.android.com/guide/topics/ui/themes.html
https://android.googlesource.com/pl...s/heads/master/core/res/res/values/styles.xml
------ for geeks ------
The problem is in Calculator.apk in the file main.xml in folders layout-land and layout-port.
At the top of both XMLs we find these lines:
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical" android:background="#[COLOR="red"][B]ff[/B][/COLOR]000000" android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
...
The problem is the part highlighted in red.
This defines a non-transparent full black background for the entire layout of the app.
The first 2 hex ff is = no transparency. 00 would = full transparency. The rest is just normal hex-RGB-color-code.
Yes, the app starts by getting it's layout as described in my link in post #5 above. This is all fine. But then on top of that, we get a LinearLayout-container with solid black background, covering any other background defines by our styles... not clever at all LOL.
The fix i made in link above is just to change the background to full transparency, like this:
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical" android:background="#[COLOR="Red"][B]00[/B][/COLOR]000000" android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
...

---

XML-references [updated 13/2-13]
In the xml-folder we have all the XMLs that are responsible for theming apps.
We already had a sneak-peek at res/xml/android.xml above. Let's see how the redirection-XMLs work.
The master-XML is "redirections.xml". Here each themed app is referenced to an XML.
All themed app then have it's own XML that controles how the app is themed - both PNGs from drawable-folders and styles from "res/values/styles.xml".
It's not only standard apps that can be themed. Any app, also from Google Play, can be themed.
The most simple theme is just to change the apps icon in the app drawer. Most themes for the stock email app only changes the icon.
More theming would be to exchange drawables (PNGs), and the next more advanced step is theming styles, and if you are totally crazy you also make a lot of qualifier dependent theming (mostly language dependent).
This is an example from a theme, that themes all standard apps:
Code:
<?xml version="1.0" encoding="utf-8"?>
<theme-redirections
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:pluto="http://www.w3.org/2001/pluto.html">
[COLOR="Red"]<package-redirections android:name="android" android:resource="@xml/android" android:minSdkVersion="7" />[/COLOR]
<package-redirections android:name="com.android.systemui" android:resource="@xml/com_android_systemui" android:minSdkVersion="7" />
<package-redirections android:name="com.android.phone" android:resource="@xml/com_android_phone" android:minSdkVersion="7" />
<package-redirections android:name="com.android.settings" android:resource="@xml/com_android_settings" android:minSdkVersion="7" />
<package-redirections android:name="com.android.browser" android:resource="@xml/com_android_browser" android:minSdkVersion="7" />
<package-redirections android:name="com.android.calendar" android:resource="@xml/com_android_calendar" android:minSdkVersion="7" />
<package-redirections android:name="com.android.music" android:resource="@xml/com_android_music" android:minSdkVersion="7" />
<package-redirections android:name="com.android.camera" android:resource="@xml/com_android_camera" android:minSdkVersion="7" />
<package-redirections android:name="com.android.mms" android:resource="@xml/com_android_mms" android:minSdkVersion="7" />
<package-redirections android:name="com.android.contacts" android:resource="@xml/com_android_contacts" android:minSdkVersion="7" />
<package-redirections android:name="com.android.calculator2" android:resource="@xml/com_android_calculator2" android:minSdkVersion="7" />
<package-redirections android:name="com.android.deskclock" android:resource="@xml/com_android_deskclock" android:minSdkVersion="7" />
<package-redirections android:name="com.cooliris.media" android:resource="@xml/com_cooliris_media" android:minSdkVersion="7" />
<package-redirections android:name="com.android.email" android:resource="@xml/com_android_email" android:minSdkVersion="7" />
<package-redirections android:name="com.android.inputmethod.latin" android:resource="@xml/com_android_inputmethod_latin" android:minSdkVersion="7" />
<package-redirections android:name="com.google.android.apps.genie.geniewidget" android:resource="@xml/com_google_android_apps_genie_geniewidget" android:minSdkVersion="7" />
<package-redirections android:name="com.sonyericsson.home" android:resource="@xml/com_sonyericsson_home" android:minSdkVersion="7" />
<package-redirections android:name="com.android.providers.downloads.ui" android:resource="@xml/com_android_providers_downloads_ui" android:minSdkVersion="7" />
<package-redirections android:name="com.android.packageinstaller" android:resource="@xml/com_android_packageinstaller" android:minSdkVersion="7" />
</theme-redirections>
The reference to the framework-res.apk is a little special. See the red line at the top.
The rest uses the apps package-ID. Knowing the package-ID you can theme any app. Also apps from Google Play.
In each of the XMLs for each app, all file-redirections are defined.
So we want to theme Calculator.apk to make it look like in stock Eclair ROM.
We already themed the style above, now we want to theme the icon and all images used by Calculator.apk.
In the decompiled Calculator.apk from CM7 ROM we find 2 drawable-folders:
drawable
- blue_button.xml
- button.xml
drawable-mdpi
- advanced.png
- clear_history.png
- icon.png
- simple.png
In the decompiled Calculator.apk from stock Eclair ROM we find these 2 drawable-folders:
drawable
- blue_button.xml
- button.xml
- transparent_button.xml
drawable-ldpi
- advanced.png
- calculator_button.9.png
- calculator_button_pressed.9.png
- clear_history.png
- icon.png
- simple.png
First we notice that the 3 normal PNG files looks exactly the same, aside from MDPI/LDPI. In this case there is no need for theming those.
Also notice there is no folder for landscape, as there is no need for a different looking PNG/XML.
But we want to theme the icon and the two XMLs from drawable. Remember, that XMLs in the drawable-folder are seen as any other PNG in a drawable-folder.
The icon from stock Eclair is renamed into something easy to understand, like ic_launcher_calculator2.png, and copied to our theme-apk-folder res/drawable-ldpi.
We will also copy the two .9.PNGs, as we will use them to make button-animations (explained in next post below).
The content of "res/xml/com_android_calculator2.xml" will look like this for theming the icon and the two XMLs.
Code:
<?xml version="1.0" encoding="utf-8"?>
<resource-redirections>
[COLOR="red"]<item name="drawable/icon">@drawable/ic_launcher_calculator2</item>[/COLOR]
<item name="drawable/blue_button">@drawable/calculator_button</item>
<item name="drawable/button">@drawable/calculator_button</item>
</resource-redirections>
The red line makes a redirection for the icon as shown in the app-drawer to a PNG in our theme-APK "res/drawable-ldpi/ic_launcher_calculator2.png".
We also make redirections for the XML-drawables, but as all buttons looks the same in stock Eclair we redirect to the same file for both button-types. Read more in next post about Advanced image and color animation.
Notice, that we do not make any redirections to the two .9.PNGs as they do not replace anything.

---

Advanced image and color animation [updated 14/4-13]
/color
The "color"-folder is a somewhat misleading foldername. Here we place XML-files that are used instead af a HEX-color-code. Yes, the XML-file it self is the color.
Normaly to set a text color in a style-class, you would use a tag like this:
Code:
<item name="android:textColor">#ffffffff</item>
Notice 8 HEX-digits.
This will just make the text full bright white. The first 2 hex-digits sets transparancy to "ff" = no transparency (00 = full transparency). The next 6 digits is the color in RGB-format, 2 hex-digits for each (red, green and blue).
But we could also set the color of some text to - not a HEX-color-code, but - the name of an XML-file in the "color" folder, like this:
Code:
<item name="android:textColor">@color/eclair_button_default</item>
This tag sets the text color to the XML-file "res/color/eclair_button_default.xml". The content of the XML-file can then define colors for different stages like selected, pressed etc.
In this way we can have the color of the text change when eg. a button is tapped. Cool stuff right?
---- MORE COMMING -----
/drawable
This folder is used just like the "color" folder, just for PNGs instead of colors, so eg. the PNG will change when tapped.
Normally the XML that theme an app will make a reference to a new PNG-file from the theme-APKs drawable-ldpi folder, but if no PNG with the refered name exists, Android looks for an XML-file in "res/drawable" instead.
The content of the XML-file can then define PNGs for different stages like selected, pressed etc.
Theming Calculator.apk we came across two XMLs in the drawable-folder.
The content of the 2 XMLs in Calculator.apk from CM7 ROM looks like this:
button.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#ff000000" android:endColor="#ff333333" android:angle="90.0" />
<corners android:radius="0.0dip" />
</shape>
blue-button.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#ff071622" android:endColor="#ff253541" android:angle="90.0" />
<corners android:radius="0.0dip" />
</shape>
As noted, the XMLs defines a gradient color for two different colors (blue and black), that looks like this:
When tapped there is no button-animation aside from edge-glow when relesed.
The chalange is to make it look like in stock Eclair ROM; transparent and when tapped the whole button glows bright:
The two steps (normal and pressed) comes from two .9.PNGs mentioned above.
In Calculator.apk from stock Eclair ROM this is accomplished by the use of a drawable-XML:
transparent_button.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:drawable="@drawable/calculator_button" />
<item android:state_pressed="true" android:drawable="@drawable/calculator_button_pressed" />
</selector>
The other two XMLs are not used, but must be leftovers from the original devs.
Looking at the XML-code, we notice a fairly simple way of making animations in buttons. We have got two item-lines acording to a pressed or not-pressed state.
Thats all there is to it.
The drawables refered to is the two .9.PNGs
So we rename transparent_button.xml to calc_button.xml (carefull not to use filenames already used by other drawables like another PNG) and copy it to "res/drawable" in our theme-apk-folder.
The result looks like this with the old icon, look and feel from the stock Eclair ROM:
You might notice a slight difference in spacing betwean the buttons from the stock one. Well, we will fix this too in another post - here in this thread - soon.
HA! Not a dry eye in the room.

---

Compiling and signing the theme-APK
Get all tools here: http://forum.xda-developers.com/showthread.php?t=2033415
--------- MORE COMMING SOON ---------

---

References to best replies
Reserved for ref to best replies in this thread :good:

---

thanks emperor

---

Renz29 said:
thanks emperor
Click to expand...
Click to collapse
i will add more examples and images soon in every section

---

Thank you!
☜ Sent from my Xperia ☞

---

Just updated posts #5, #6 and #7

---

How I can change the images of a theme? (res / drawable)
Thanks for your reply.

---

can you make this theme a theme chooser for my cm10? please..
View attachment 2176394
i like only the icons of that theme..

---

thanks