I wish to make transparent the contacts.apk on my streak , I have tried many guides but none of these worked for my froyo 2.2.2. Any of you tried by chance?
Have you looked here?
http://forum.xda-developers.com/showthread.php?t=990014
Seems to be a lot of transparent apps here and some instructions for editing your own.
thanks for the help (useful link), even if I meant something like
I'm sorry if you do not see too much but definitely makes the idea (sorry but taken from the web)
Now that is cool and I want it too....
I found this guide on the web,i tried many times it did not work :
What you have to do:
Extract the Contacts.apk from your phone/rom zip file
Decompile Contacts.apk
Open
call_background.xml
in res/drawable
Change
--- Code: ---<?xml version="1.0" encoding="UTF-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:drawable="android:color/transparent" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="android:drawable/menuitem_checkbox_on" />
<item android:state_focused="false" android:state_pressed="false" android:drawable="android:drawable/screen_background_dark" />
</selector>
--- End code ---
To:
--- Code: ---<?xml version="1.0" encoding="UTF-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:drawable="android:color/transparent" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="android:drawable/menuitem_checkbox_on" />
<item android:state_focused="false" android:state_pressed="false" android:drawable="android:color/transparent" />
</selector>
--- End code ---
Save and close.
Open
styles.xml
in res/values.
Change lines 3-6
--- Code: ---<style name="DialtactsTheme" parent="android:style/Theme">
<item name="android:windowNoTitle">true</item>
<item name="android:windowContentOverlay">null</item>
</style>
--- End code ---
To.
--- Code: ---<style name="DialtactsTheme" parent="android:style/Theme.Wallpaper">
<item name="android:windowBackground">drawable/custom_background_dialer</item>
<item name="android:windowNoTitle">null</item>
</style>
--- End code ---
Save and close.
Next add the transparent custom_background_dialer.png to the drawable-mdpi-finger folder.This can also be a custom image doesn't have to be a transparent one.
IN APKManager choose the option to compile your Contacts
Answer yes when you get asked if it is a system apk and if you want to copy files from the original framework. After the original framework has been extracted, change to your "keep"-Directory and delete the files resources.arsc and everything that you changed, (i.e. call_background.xml and the styles.xml is now hidden so you can't delete that so just delete the resources.arsc & call_background.xml)
Let apkmanager continue its work.
Now you have a new apk file in your place-here-for-modding directory, which you can push on your phone (DO IT IN RECOVERY): adb push unsignedContacts.apk /system/app/Contacts.apk or rename taking the unsigned out and put in your theme zip.
Now you must make the dialer buttons transparent.Change the following to be transparent,
Images are in the drawable-mdpi-finger folder:
btn_dial_action_left_disable.9
btn_dial_action_left_disable_focused.9
btn_dial_action_left_normal.9
btn_dial_action_left_pressed.9
btn_dial_action_left_selected.9
btn_dial_action_middle_disable.9
btn_dial_action_middle_disable_focused.9
btn_dial_action_middle_normal.9
btn_dial_action_middle_pressed.9
btn_dial_action_middle_selected.9
btn_dial_action_right_disable.9
btn_dial_action_right_disable_focused.9
btn_dial_action_right_normal.9
btn_dial_action_right_pressed.9
btn_dial_action_right_selected.9
btn_dial_normal.9
btn_dial_pressed.9
btn_dial_selected.9
btn_dial_textfield_activated.9
btn_dial_textfield_normal.9
btn_dial_textfield_pressed.9
btn_dial_textfield_selected.9
Screen Shot of what it looks like:
You have ideas on how to do (even call_background.xml is different )
I did ok, this is for you (although I have to change something again)
could we see a teaser screenie on the streak with this, thanks guys!
nice work!
1) Fly in straight line
----fly along X----
<?xml version="1.0" encoding="utf-8"?><set android:shareInterpolator="false" android:zAdjustment="top" xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="@integer/config_longAnimTime" android:fromXDelta="100.0%p" android:toXDelta="0.0" /></set>
----fly along y---
<?xml version="1.0" encoding="utf-8"?><set android:shareInterpolator="false" android:zAdjustment="top" xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="@integer/config_longAnimTime" android:fromYDelta="100.0%p" android:toYDelta="0.0" /></set>
---fly along X-Y-----
<?xml version="1.0" encoding="utf-8"?><set android:shareInterpolator="false" android:zAdjustment="top" xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:duration="@integer/config_longAnimTime" android:fromYDelta="100.0%p" android:toYDelta="0.0" android:fromXDelta="100.0%p" android:toXDelta="0.0" /></set>
^^^^^^^^^CHANGE VALUES ACCORDINGLY TO ALTER DIRECTIONS^^^^^^^^^
---requirements------ basic knowledge of co-ordinate geometry----in translate animation,,,,, the center of mass of screen (if seen as a rectangle) is the ORIGIN (0,0)-=----------------------and 100%p means 100% (along X or Y , down or right if positive and up or left if negative) relative to paren]]]]]
2) Popup from CENTER
<?xml version="1.0" encoding="utf-8"?><set android:interpolator="@anim/decelerate_interpolator" xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:duration="500 android:fromXScale="0.0" android:toXScale="1.0" android:fromYScale="0.0" android:toYScale="1.0" />
</set>
3) Popup from top-left (relative to you,, not screen)
<?xml version="1.0" encoding="utf-8"?><set android:interpolator="@anim/decelerate_interpolator" xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:duration="500 androidivotX="100%p" android:fromXScale="0.0" android:toXScale="1.0" android:fromYScale="0.0" android:toYScale="1.0" />
</set>
4) Fade in
<?xml version="1.0" encoding="utf-8"?><set android:interpolator="@anim/decelerate_interpolator" xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:duration="@integer/config_mediumAnimTime" android:fromAlpha="0.0" android:toAlpha="1.0" /></set>
-------combine all these intelligently to create several combos------------------------
change values accordingly to create OUT animations
------------------------------------------------------------------PRESS THANKS IF YOU LIKE MY WORK :good: ---------------------------------------------------------------------
Can I apply this for lockscreen...
Regards,
Ganesh
Ganesh A said:
Can I apply this for lockscreen...
Regards,
Ganesh
Click to expand...
Click to collapse
yes you can... just edit lockscreen exit xml in framework-res/anim/
Great one ..... Helped meh alot !! (Y)
@aman d awsum--- COOL :good:
re animation
nice guide
i will try
where are the activity_open_enter, open_exit and activity_close_enter, close_exit used for? i mean, how do these work? if an app is opened, does activity_open_enter get used, and if an app is closed activity_close_exit is used?
How to do this with stock rom
mjz2cool said:
where are the activity_open_enter, open_exit and activity_close_enter, close_exit used for? i mean, how do these work? if an app is opened, does activity_open_enter get used, and if an app is closed activity_close_exit is used?
Click to expand...
Click to collapse
bro,,, see the anims that begin with the word wallpaper,,,, those are the one that show the way wallpaper and app opening closing etc!!! just search for them in styles.xml and you will know
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
After I have posted my tutorial How To Add Extra Buttons In Navigation Bar,
Many user PM'ed me how to colorize navigation bar buttons.
So, here I will teach you how to colorize navigation bar buttons.
Maybe this is the last tutorial of 2013 from me.
Decompile SystemUI.apk
Navigate to SystemUI.apk\
Open apktool.yml file in file editor
Mine is look like this
Code:
version: 2.0.0-Beta7
apkFileName: 1-SystemUI.apk
isFrameworkApk: false
usesFramework:
ids:
- 1
sdkInfo:
minSdkVersion: '15'
targetSdkVersion: '15'
packageInfo:
cur_package: com.android.systemui
cur_package_id: '127'
orig_package: com.android.systemui
versionInfo:
versionCode: '15'
versionName: 4.0.4-tL1_3w
compressionType: false
[*]Add the red line only
Code:
version: 2.0.0-Beta7
apkFileName: 1-SystemUI.apk
isFrameworkApk: false
usesFramework:
ids:
- 1
[COLOR="Red"]- 2[/COLOR]
sdkInfo:
minSdkVersion: '15'
targetSdkVersion: '15'
packageInfo:
cur_package: com.android.systemui
cur_package_id: '127'
orig_package: com.android.systemui
versionInfo:
versionCode: '15'
versionName: 4.0.4-tL1_3w
compressionType: false
[*]Save the file
[*]Navigate to SystemUI.apk\res\drawable-hdpi
[*]Mark all the navigation buttons png and move them to a known directory
[*]In my case the files are
Code:
ic_sysbar_back.png
ic_sysbar_back_land.png
ic_sysbar_home.png
ic_sysbar_home_land.png
ic_sysbar_recent.png
ic_sysbar_recent_land.png
[*]Now rename all the files and add "_colored" at the end without quote
[*]The files will be look like
Code:
ic_sysbar_back[COLOR="Green"]_colored[/COLOR].png
ic_sysbar_back_land[COLOR="Green"]_colored[/COLOR].png
ic_sysbar_home[COLOR="Green"]_colored[/COLOR].png
ic_sysbar_home_land[COLOR="Green"]_colored[/COLOR].png
ic_sysbar_recent[COLOR="Green"]_colored[/COLOR].png
ic_sysbar_recent_land[COLOR="Green"]_colored[/COLOR].png
[*]Now have to make 6 xml files like bellow
File Name: ic_sysbar_back.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<somc:colorizable android:drawable="@drawable/ic_sysbar_back_colored" android:color="@com.sonyericsson.uxp:color/semc_theme_accent_color" xmlns:somc="com.sonymobile"
xmlns:android="http://schemas.android.com/apk/res/android" />
File Name: ic_sysbar_back_land.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<somc:colorizable android:drawable="@drawable/ic_sysbar_back_land_colored" android:color="@com.sonyericsson.uxp:color/semc_theme_accent_color" xmlns:somc="com.sonymobile"
xmlns:android="http://schemas.android.com/apk/res/android" />
File Name: ic_sysbar_home.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<somc:colorizable android:drawable="@drawable/ic_sysbar_home_colored" android:color="@com.sonyericsson.uxp:color/semc_theme_accent_color" xmlns:somc="com.sonymobile"
xmlns:android="http://schemas.android.com/apk/res/android" />
File Name: ic_sysbar_home_land.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<somc:colorizable android:drawable="@drawable/ic_sysbar_home_land_colored" android:color="@com.sonyericsson.uxp:color/semc_theme_accent_color" xmlns:somc="com.sonymobile"
xmlns:android="http://schemas.android.com/apk/res/android" />
File Name: ic_sysbar_recent.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<somc:colorizable android:drawable="@drawable/ic_sysbar_recent_colored" android:color="@com.sonyericsson.uxp:color/semc_theme_accent_color" xmlns:somc="com.sonymobile"
xmlns:android="http://schemas.android.com/apk/res/android" />
File Name: ic_sysbar_recent_land.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<somc:colorizable android:drawable="@drawable/ic_sysbar_recent_land_colored" android:color="@com.sonyericsson.uxp:color/semc_theme_accent_color" xmlns:somc="com.sonymobile"
xmlns:android="http://schemas.android.com/apk/res/android" />
[*]Now place all the xml files to SystemUI.apk\res\drawable folder
[*]Recompile your SystemUI.apk
Please Note :
Take backup before doing anything.
Use Notepad++ to edit files.
Please read the tutorial properly befor editing files.
This tutorial will work for other devices too.
Nice guide！however，i want to know how to add quick button on status bar expanded。And how to add txt under the quick buttons ？hope you can help me。Want to change my Xperia Z systemui changed。
@BDFreak
U made arc section alive once more!
Thank you bro!
Sent from my LT18i using Tapatalk 2
bxfdaxia said:
Nice guide！however，i want to know how to add quick button on status bar expanded。And how to add txt under the quick buttons ？hope you can help me。Want to change my Xperia Z systemui changed。
Click to expand...
Click to collapse
These things are too difficult and
I didn't try this kind of things.
poria1999 said:
@BDFreak
U made arc section alive once more!
Thank you bro!
Sent from my LT18i using Tapatalk 2
Click to expand...
Click to collapse
This kind of comments inspire me too much.
:good:GOOD JOB！I always enjoy you provide tutorials
Thanks your contribution！
Hi all
Do you have a problem with "Back" button didn't change color ?
For me i have to edit smali file to make it work.
devilmaycry2020 said:
Hi all
Do you have a problem with "Back" button didn't change color ?
For me i have to edit smali file to make it work.
Click to expand...
Click to collapse
No, I didn't face this kind of problem...
But I have heard that some people have this problem with 2012-2013 phones.
question
This tutorial does work in all devices
nice mod but when im trying to compile my systemui again it gives me lot of errors thats weird since i ve been recomping it lots of times and never got this;
Can u help me somehow ?
I want to delete this thread
Reserved
Reserved
Hi, I was wondering if you could help? I'm looking to invert the colours on my settings menu (see screenshot) from a white background with black script to a black background with white script.
Thing is, I really don't know what does what in the background holo dark/holo light xml files. Does one xml file control the background colour and the other the script colour? Here's what each xml file reads - can you advise what I should change to end up with a black background and white script?
background_holo_light.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#ffe8e8e8" android:endColor="#ffffffff" android:angle="270.0" />
</shape>
background_holo_dark.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#ff000000" android:endColor="#ff272d33" android:angle="270.0" />
</shape>
Would really appreciate any help you can give.