[TUT]How to change colors of fonts for themes on stock ROM 2.2 and above - Droid 2 Themes and Apps

Required Items
APK Manager - http://forum.xda-developers.com/showthread.php?t=695701
Notepad++ - http://notepad-plus-plus.org/download (or equivalent editor)
Some sort of archive utility to open your theme (e.g. Winzip, WinRar, 7-zip, etc.)
Instructions
1. Copy your framework-res.zip to the folder that is labeled "place-apk-here-for-modding".
2. Open APK Manager by running the file that is labeled "Script.bat".
3. You will see the APK Manager now open. We first need to set the project with which we will be working. Type in option 22 to set the project.
4. You will see that it says "1-framework-res.apk". We want to choose this as our project so choose 1 and press enter.
5. Now that we have set our project, we want to decompile the apk so that we can see the xml code. Choose option 9 to decompile the apk.
6. When this is done running you can minimize APK Manager as we will not be utilizing this for a little while. Navigate to the folder that is labeled "projects" and open the folder labeled "framework-res.apk". Open the folder that is labeled "res". Open the folder that is labeled "values".
7. Open the Notepad++.
8. Click and drag the xml file that is named "colors" from the values folder that we navigated to earlier. You will see a whole bunch of items that look like this:
PHP:
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<color name="darker_gray">#ffaaaaaa</color>
<color name="white">#ffffffff</color>
<color name="black">#ff000000</color>
<color name="transparent">#00000000</color>
<color name="background_dark">#ff000000</color>
<color name="background_light">#ff555555</color>
<color name="safe_mode_text">#80555555</color>
<color name="bright_foreground_dark">#ff555555</color>
<color name="bright_foreground_dark_disabled">#80555555</color>
<color name="bright_foreground_dark_inverse">#ff999999</color>
<color name="dim_foreground_dark">#ff555555</color>
<color name="dim_foreground_dark_disabled">#80555555</color>
<color name="dim_foreground_dark_inverse">#ff555555</color>
<color name="dim_foreground_dark_inverse_disabled">#80555555</color>
<color name="hint_foreground_dark">#ff808080</color>
<color name="bright_foreground_light">#ff999999</color>
<color name="bright_foreground_light_inverse">#ff555555</color>
<color name="bright_foreground_light_disabled">#80000000</color>
<color name="dim_foreground_light">#ff555555</color>
<color name="dim_foreground_light_disabled">#80555555</color>
<color name="dim_foreground_light_inverse">#ff555555</color>
<color name="dim_foreground_light_inverse_disabled">#80555555</color>
<color name="hint_foreground_light">#ff808080</color>
<color name="lighter_gray">#ffdddddd</color>
<color name="perms_dangerous_grp_color">#ffdd6826</color>
<color name="perms_dangerous_perm_color">#ffdd6826</color>
<color name="shadow">#cc222222</color>
<color name="search_url_text_normal">#ff7fa87f</color>
<item type="color" name="search_url_text_selected">@color/black</item>
<item type="color" name="search_url_text_pressed">@color/black</item>
<item type="color" name="search_widget_corpus_item_background">@color/lighter_gray</item>
<item type="color" name="sliding_tab_text_color_active">@color/black</item>
<item type="color" name="sliding_tab_text_color_shadow">@color/black</item>
<color name="keyguard_text_color_normal">#ff555555</color>
<color name="keyguard_text_color_unlock">#ffa7d84c</color>
<color name="keyguard_text_color_soundoff">#ff555555</color>
<color name="keyguard_text_color_soundon">#ffe69310</color>
<color name="keyguard_text_color_decline">#fffe0a5a</color>
<color name="config_defaultNotificationColor">#ff00ff00</color>
</resources>
9. We will be changing the primary text color, so we will be modifying the color of:
PHP:
<color name="bright_foreground_dark">#ff555555</color>
<color name="bright_foreground_dark_disabled">#80555555</color>
<color name="bright_foreground_dark_inverse">#ff999999</color>
10. The items above are listed in their hex form. The first 2 hexadecimal places "ff" signify the alpha or transparency of the text. The next six are going to signify the color. Pick what ever color you want for the 2 items from any hexadecimal chart (http://html-color-codes.com/). I am going to be using bright pink and light blue for the example.
11. We would change the code of the bright_foreground_dark as this is the primary text color and we want it to be hot pink. We would have the following:
PHP:
<color name="bright_foreground_dark">#ffff00ff</color>
<color name="bright_foreground_dark_disabled">#80ff00ff</color>
12. Next we need to set the inverse to the light blue so we would have the following:
PHP:
<color name="bright_foreground_dark_inverse">#ff66ccff</color>
13. We now want to save this file by pressing either Ctrl+S or clicking the disk icon at the top. We can close Notepad++ after we save.
14. Restore APK Manager and run option 11 which will recompile the apk that we decompiled earlier.
15. Go to the folder that is labeled "place-apk-here-for-modding" and you will now see the file "unsignedframework-res.apk".
16. Delete you file that is labeled "framework-res.apk" and rename "unsignedframework-res.apk" to "framework-res.apk". Copy this back into whatever theme you would like and flash the zip as normal by mounting the system and then installing the zip from SD-Card.

Is this similar to changing actual fonts? I'd love to play around with some different fonts ..
Sent from my DROID2 using XDA App

roboots21 said:
Is this similar to changing actual fonts? I'd love to play around with some different fonts ..
Sent from my DROID2 using XDA App
Click to expand...
Click to collapse
no it is not

Related

HTC Home on Qtek 8500

Hi,
I have a Qtek 8500 with WM5, is it possible to add the HTC HOME plugin to it?
/JR
JesperRas said:
Hi,
I have a Qtek 8500 with WM5, is it possible to add the HTC HOME plugin to it?
/JR
Click to expand...
Click to collapse
Yes! It is posible. WM6 only.
nice share! thanks!
Big Thanks i've been looking for this on my smartphone forever.
Is there a way to change the color.
guyver76 said:
Is there a way to change the color.
Click to expand...
Click to collapse
try to change a homescreen color scheme
What exactly can i use this homeplugin for ? Tried it and think its quite useless..
the only other color scheme i have is guava and i hate that one does anyone have the blue or blue/green for WM6
You can change the background Image easy. Just copy the "Windows Mobile.,jpg" from windows directory to My documents(or to Storage Card\My Documents) and change it from settings -> Home screen -> background option. For changing the colors, must to edit or create an xml file.
This is mine "wm6.scheme.xml" file. If you want to use it, open notepad, paste the contents from here and save the file in unicode format as "wm6.scheme.xml"(don't save it as txt file). After put it to ApplicationData\Home on device and select it from settings -> Home Screen -> Color Scheme option.
Code:
<colorscheme>
<scheme>
<color name="COLOR_HOMEHIGHLIGHT" value="#508092" />
<color name="COLOR_HOMETEXT" value="#000000" />
<color name="COLOR_HOMEHIGHLIGHTTEXT" value="#000000" />
<color name="COLOR_TRAYGRADLEFT" value="#31C3D6" />
<color name="COLOR_WINDOW" value="#2BA9B7" />
<color name="COLOR_HIGHLIGHT" value="#275158" />
<color name="COLOR_HIGHLIGHTTEXT" value="#FFFFFF" />
<color name="COLOR_WINDOWTEXT" value="#FFFFFF" />
<color name="COLOR_GRADLEFT" value="#44767B" />
<color name="COLOR_GRADRIGHT" value="#44767B" />
<color name="COLOR_INTGRADLEFT" value="#44767B" />
<color name="COLOR_INTGRADRIGHT" value="#44767B" />
<color name="COLOR_BTNFACE" value="#3694AF" />
<color name="COLOR_WINDOWFRAME" value="#5E8EA2" />
<color name="COLOR_SCROLLBAR" value="#0080C0" />
<color name="COLOR_MENUTEXT" value="#000000" />
<color name="COLOR_MENU" value="#C5D2DA" />
<color name="COLOR_GRAYTEXT" value="#808080" />
<color name="COLOR_ALERTWINDOW" value="#A9D2DA" />
<color name="COLOR_ALERTTITLE" value="#416478" />
<color name="COLOR_ALERTRULE" value="#557E93" />
<color name="COLOR_STATIC" value="#EAF3F7" />
<color name="COLOR_STATICTEXT" value="#335662" />
<color name="COLOR_BTNTEXT" value="#6C9AA8" />
<color name="COLOR_TRAYTEXT" value="#FFFFFF" />
</scheme>
</colorscheme>
Added MRU Icons
I liked the idea of being able to use the htc home with my 3125 after upgrading to WM6, however, I found that I missed having the mru icons so...... After installing the regular cab on your phone and making a backup of the HTC.home.xml file, replace it with the version in the zip. It places the mru with 6 icons just above the calendar plugin.

How do I change default settings ?

Hello
I would like to change a few settings in a custom ROM. For example
Enable Location Services, 24hr time, etc.
Does anyone know which files I need to edit or decompile ?
I'm not sure what your asking, can you be more specific??
#Root-Hack_Mod*Always\
I mean when you install a ROM you get some default settings. You are also asked during ROM installation for some, I believe through HTCSetupWizard.apk. I found a way of decompiling SettingsProvider.apk and changing some settings in the bools.xml file but not all the options are there.
For example if you want to disable haptic feedback you change this in the bools.xml.
<bool name="def_haptic_feedback">false</bool>
So my question is where are all the other options (the ones not listed in SettinsProvider) stored ?
Just to make myself more clear.
My question is for customizing a ROM with specific settings during installation phase and not for changing settings after ROM is installed.
Oh ok gotcha and I have no idea unfortunately. Try sending a pm to a dev.
#Root-Hack_Mod*Always\
+1
Great question, I'm currently learning to create custom roms, more for myself, at the moment, and this will come in very useful for me,
Thanks in advance
default settings
sdeft said:
Hello
I would like to change a few settings in a custom ROM. For example
Enable Location Services, 24hr time, etc.
Does anyone know which files I need to edit or decompile ?
Click to expand...
Click to collapse
SettingsProvider.apk
Change in res/values
bools.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<bool name="def_dim_screen">true</bool>
<bool name="def_airplane_mode_on">false</bool>
<bool name="def_auto_time">true</bool>
<bool name="def_accelerometer_rotation">true</bool>
<bool name="def_screen_brightness_automatic_mode">false</bool>
<bool name="def_haptic_feedback">true</bool>
<bool name="def_bluetooth_on">false</bool>
<bool name="def_install_non_market_apps">false</bool>
<bool name="assisted_gps_enabled">true</bool>
<bool name="def_usb_mass_storage_enabled">true</bool>
<bool name="def_wifi_on">false</bool>
<bool name="def_networks_available_notification_on">true</bool>
<bool name="def_backup_enabled">false</bool>
<bool name="def_notification_pulse">true</bool>
<bool name="def_mount_play_notification_snd">true</bool>
<bool name="def_mount_ums_autostart">false</bool>
<bool name="def_mount_ums_prompt">true</bool>
<bool name="def_mount_ums_notify_enabled">true</bool>
<bool name="def_notifications_use_ring_volume">true</bool>
<bool name="def_vibrate_in_silent">true</bool>
</resources>
fractions.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<fraction name="def_window_animation_scale">100.0%</fraction>
<fraction name="def_window_transition_scale">100.0%</fraction>
</resources>
integers.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<integer name="def_screen_off_timeout">60000</integer>
<integer name="def_screen_brightness">102</integer>
<integer name="def_network_preference">1</integer>
<integer name="def_power_sounds_enabled">1</integer>
<integer name="def_dock_sounds_enabled">0</integer>
<integer name="def_lockscreen_sounds_enabled">0</integer>
</resources>
stevemp

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

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

[Guide][Ambor Theme Engine]How to port Xperia Themes to Cm11

How to port Xperia Themes To cm11
Hi everyone
Many peoples have asked to me about porting xperia themes to cm11
I have decided to make a guide for it
Info About Ambor Theme Engine
http://forum.xda-developers.com/showthread.php?t=2766508
Lets start
Steps
1)Download any theme from xperia themes.
2)Decompile it via any Apk Multi Tool
3)After decompiling
Go to xperia theme.apk/res/assests
You will see some zip files.
For example
android.zip
com.android.systemui.zip
com.sonyericsson.home.zip
com.sonyericsson.uxp.zip
....
Change last name of all files from .zip to .apk
Ex: old :android.zip
new:android.apk
4)Decompile all apk that you have changed them.(step 3)
5)Now download any theme from my thread.
http://forum.xda-developers.com/crossdevice-dev/sony/ambor-theme-engine-themes-collections-t2824696
6)Decompile it(step5)
7)Again return to step4
Go to xxx.apk/res/drawable-xxhdpi for all themes
Now you musst be carefull.
compare all of them with drawable-xxhdpi of my theme.
all name musst be same.
Tipp
Easy Compare
for example
go to my theme.apk/res/xml/android.xml
open it
and look at drawable line by line
8)Go to com.sonyericsson.uxp.apk/res/values/colors.xml
open it
you will see some code lines
somc_theme_accent_color_dark
somc_theme_accent_color_light
somc_accent_color_neutral
for example
PHP:
<color name="somc_theme_accent_color_dark">#ff82c7e1</color>
<color name="somc_theme_accent_color_light">#ff2b5c6a</color>
<color name="somc_accent_color_neutral">#ff82c7e1</color>
This codes are color of theme
copy #ff82c7e1
Go to my theme.apk/res/values/colors.xml/
you will see different lines.Dont worry.
for example
PHP:
<color name="somc_color_dark">#ff205971</color>
<color name="somc_color_light">#ff205971</color>
<color name="somc_color_light_off">#ff205971</color>
Paste all colors (#ff82c7e1,#ff2b5c6a) to my theme
it musst be show like this after this step
PHP:
<color name="somc_color_dark">#ff82c7e1</color>
<color name="somc_color_light">#ff2b5c6a</color>
<color name="somc_color_light_off">#ff82c7e1</color>
9)Make the same for all another colors
Tipps about some colors
go to my theme.apk/res/xml/com.xxx.xxx
open it
for example
com_sonyericsson_soundenhancement.xml
open it
you will see this colors lines
PHP:
<item name="color/scalebar_line_color">@color/scalebar_line_color</item>
<item name="color/scalebar_center_line_color">@color/scalebar_center_line_color</item>
<item name="color/surround_preset_name_color">@color/surround_preset_name_color</item>
<item name="color/surround_preset_summary_color">@color/surround_preset_summary_color</item>
10)After than go to my theme.apk/res/values/colors.xml
you will see like this
PHP:
<color name="scalebar_line_color">#ffff6265</color>
<color name="scalebar_center_line_color">#ffff6265</color>
<color name="surround_preset_name_color">#ffff6265</color>
<color name="surround_preset_summary_color">#ffff6265</color>
<color name="somc_accent_color_neutral">#ffff6265</color>
This color code #ffff6265 is my theme color.Look at "somc_color_light"
11)At last you musst edit other pngs in drawable hdpi and xxhdpi according to your theme color
How to edit png files?
Look at this thread
That´s it.
You have ported Xperia Theme.
12)Dont forget that the name of theme
For this
Go to my theme.apk/res/values/strings.xml
Change the app name
13)Last step
go to mytheme.apk/res/androidmanifest.xml
Find package
ex:com.gamzekal.themename.apk
change it what do you want
14)Compile your new theme.apk
Credits
Of course @ Ambor

How To Background notification follow color xpanded and header . using theme coloring

im sorry... im junior member...
i can share guide simple for systemui....
you Must decompile systemUi.apk
and go to /res/drawable / find the notification_material_bg.xml
and find the
Metode 1
HTML:
android:color
change to
HTML:
android:color="@color/system_secondary_color" />
and for Notif lockscreen transparant
go to
res/drawable
and find notification_material_bg_dim.xml
find
HTML:
android:color
chabge to
HTML:
android:color="#00000000" />
done recompile and sign... and move to /priv- app/SystemUI/HERE chnge permision rw-r-r
rezza99 said:
im sorry... im junior member...
i can share guide simple for systemui....
you Must decompile systemUi.apk
and go to /res/drawable / find the notification_material_bg.xml
and find the
Metode 1
HTML:
android:color
change to
HTML:
android:color="@color/system_secondary_color" />
and for Notif lockscreen transparant
go to
res/drawable
and find notification_material_bg_dim.xml
find
HTML:
android:color
chabge to
HTML:
android:color="#00000000" />
done recompile and sign... and move to /priv- app/SystemUI/HERE chnge permision rw-r-r
Click to expand...
Click to collapse
thanks
Jonathan93style said:
thanks
Click to expand...
Click to collapse
good job sir.. :fingers-crossed:
rezza99 said:
im sorry... im junior member...
i can share guide simple for systemui....
you Must decompile systemUi.apk
and go to /res/drawable / find the notification_material_bg.xml
and find the
Metode 1
HTML:
android:color
change to
HTML:
android:color="@color/system_secondary_color" />
and for Notif lockscreen transparant
go to
res/drawable
and find notification_material_bg_dim.xml
find
HTML:
android:color
chabge to
HTML:
android:color="#00000000" />
done recompile and sign... and move to /priv- app/SystemUI/HERE chnge permision rw-r-r
Click to expand...
Click to collapse
Nice guide work fine in MM base, i try in nougat touchwiz, here some changues extras:
Changue color panel notification :
decompile framework.res
go--> res/value/colors.xml
Edits this lines:
Code:
<color name="notification_title_color">#ff252525</color>
<color name="notification_info_color">#ff8c8c8c</color>
<color name="notification_text_color">#ff515151</color>
Example for background dark can put:
Code:
<color name="notification_title_color">#ffffffff</color>
<color name="notification_info_color">#ffffffff</color>
<color name="notification_text_color">#ffffffff</color>
Changue icon color panel notification:
same in framework.res (colors.xml)
Code:
<color name="notification_icon_bg_color">#ff5c7480</color>
Some edits in SystemUI
go-- res/value/colors.xml
edit:
Code:
<color name="notification_header_bg_tw">#00000000</color>
<color name="notification_legacy_background_color">#ff520000</color>
<color name="notification_material_background_color">#ff520000</color>
<color name="notification_material_background_dimmed_color">#ff520000</color>
<color name="notification_material_background_low_priority_color">#ff520000</color>
<color name="notification_shade_background_color">#ff520000</color>
<color name="notification_ripple_untinted_color">#ff520000</color>
<color name="notification_ripple_color_low_priority">#ff520000</color>
<color name="notification_ripple_tinted_color">#ff520000</color>
for make perfect edit UI need more edits,styles.xml,more changue in colors.xml (UI/framework.res)
:fingers-crossed:
By Zonik said:
Nice guide work fine in MM base, i try in nougat touchwiz, here some changues extras:
Changue color panel notification :
decompile framework.res
go--> res/value/colors.xml
Edits this lines:
Code:
<color name="notification_title_color">#ff252525</color>
<color name="notification_info_color">#ff8c8c8c</color>
<color name="notification_text_color">#ff515151</color>
Example for background dark can put:
Code:
<color name="notification_title_color">#ffffffff</color>
<color name="notification_info_color">#ffffffff</color>
<color name="notification_text_color">#ffffffff</color>
Changue icon color panel notification:
same in framework.res (colors.xml)
Code:
<color name="notification_icon_bg_color">#ff5c7480</color>
Some edits in SystemUI
go-- res/value/colors.xml
edit:
Code:
<color name="notification_header_bg_tw">#00000000</color>
<color name="notification_legacy_background_color">#ff520000</color>
<color name="notification_material_background_color">#ff520000</color>
<color name="notification_material_background_dimmed_color">#ff520000</color>
<color name="notification_material_background_low_priority_color">#ff520000</color>
<color name="notification_shade_background_color">#ff520000</color>
<color name="notification_ripple_untinted_color">#ff520000</color>
<color name="notification_ripple_color_low_priority">#ff520000</color>
<color name="notification_ripple_tinted_color">#ff520000</color>
for make perfect edit UI need more edits,styles.xml,more changue in colors.xml (UI/framework.res)
:fingers-crossed:
Click to expand...
Click to collapse
Great job sir... .. nice UI... what Your use Rom??
@By Zonik 
 @rezza99
Hello
I want to change background color quick panel toggle but i can't find what value changes.
It could very helpfull if you tell me which value changes , i think it's in systemui/res/values/colors.xml but i don't find which it is.
Thanks

Categories

Resources