Database Develop

[GUIDE] Creating Transparent Statusbars for CM7 based and most other ROM

Reading the next couple of paragraphs will help you to yourself create a Transparent Statusbar for CM7 based and also most other ROMs. I feel that despite some good programs available for doing this, for example the excellent patcher from ZduneX25, users face quite a bit of difficulty in creating their own transparent statusbars. So here is a detaild guide based on my experience. I have prepared status bars at least for 20 different ROMs using this process with zero fails. Hope it helps people out here.
Prerequisites:
Properly configured Apktool - http://code.google.com/p/android-apktool/
7-zip - http://www.7-zip.org/
Framework-res.apk and SystemUI.apk of the ROM for which you wish to create the statusbar
SystemUI.apk from an existing ROM or theme having transparent statusbar from which you want to copy the transparent images. I have attached the one I am using currently. Use it if you want.
Steps to create the statusbar:
Step 1 – Edit the SystemUI.apk to enable transparency
Open command prompt and go to the directory where you have installed Apktool
Install Framework-res.apk
Code:
apktool if Framework-res.apk
Decompile SystemUI.apk
Code:
apktool d /path/to/SystemUI.apk /path/to/decompiled_files
Now in the decompiled_files folder, open the following file ina a text editor
Code:
/path/to/decompiled_files/smali/com/android/systemui/statusbar/StatusBarService.smali
Search and Find the following string:
Code:
new-instance v0, Landroid/view/WindowManager$LayoutParams;
Three or four lines below this string you will find the following:
Code:
const/4 v5, 0x2
Replace it with
Code:
const/4 v5, -0x3
Now open the following file in a text editor
Code:
/path/to/decompiled_files/res/layout/status_bar.xml
You will find the following code at the end of the file
Code:
<com.android.systemui.statusbar.DateView android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:gravity="left|center" android:id="@id/date" android:background="@drawable/statusbar_background" android:paddingLeft="6.0px" android:paddingRight="6.0px" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
Replace it with
Code:
<com.android.systemui.statusbar.DateView android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:gravity="center|center" android:id="@id/date" android:background="@drawable/statusbar_background2" android:paddingLeft="6.0px" android:paddingRight="6.0px" android:layout_width="fill_parent" android:layout_height="fill_parent" android:singleLine="true" />
Save and close the file
Browse to
Code:
/path/to/decompiled_files/drawable-mdpi or drawable-hdpi
Copy
Code:
statusbar_background.9.png
and paste it again as
Code:
statusbar_background2.9.png
in the same folder. You can also copy-paste and rename the file.
Recompile the SystemUI.apk
Code:
apktool b /path/to/decompiled_files
The new SystemUI.apk is saved to
Code:
/path/to/decompiled_files/dist/SystemUI.apk
Step 2 – Add the transparent images
Open the new SystemUI.apk in 7-zip and browse to the following locations depending on your device resolution
Code:
\res\drawable-mdpi\ or \res\drawable-hdpi\
Open the other SystemUI.apk (no. 4 in the prerequisites above) also in 7-zip and browse to the same folder,
Code:
\res\drawable-mdpi\ or \res\drawable-hdpi\
depending on your device resolution. Select the following files
statusbar_background.9.png
statusbar_background2.9.png
shade_bg.png (if you want a transparent pull down as well. Make sure the shade_bg.png is a transparent image.)
Drag and drop these files over to the other open 7-zip window containing your new SystemUI.apk. 7-zip will ask for confirmation, click OK.
Step 3 – Sign SystemUI.apk
You can use a number of signing tools to sign your files but in my experience it results in error many times, specially on Windows. The alternative way is use the signed files of the original apk.
Open the new SystemUI.apk in 7-zip
Open the original SystemUI.apk in 7-zip. This is the original SystemUI.apk from the ROM for which you want to create the statusbar, the one you decompiled.
Drag and drop the META-INF folder and AndroidManifest.xml file from the original to the new SystemUI.apk.
Close all files. That’s it. You just signed your APK with zero chances of any error.
Now push this final SystemUI.apk to /system/app on you phone and reboot.
Of course the risk is your own here. If something bad happens just push your original SystemUI.apk to the phone and you should be good.
Also in case you find any error here, please inform me and I will try to correct it.
Click the Thanks button if this writeup helped you.

wow !! gonna try it dude

can you make another guide on changing font colors,for example the font color in the settings menu screen?

dyetheskin said:
can you make another guide on changing font colors,for example the font color in the settings menu screen?
Click to expand...
Click to collapse
I will have a go at it next time.

Awesome thanx for explaining it so nicely
Sent from my GT-S5570 using xda premium

Very nice tutorial up there, but is there any solution for overlapping date when there are many notification icon on dropped down status bar?

@Cortiis
i tried but failed many times..so will u plzzz do it for me...here are the files..the 1st two are from the rom in which i want trans s.bar...3rd one(renamed) is from the rom which already has trans s.bar..
btw all the files here are not from my phone but from respective rom zips in my comp..

This worked for me but only on the lockscreen and when I have holo launcher running. Samsung home (touchwiz i presume) still has black status bar. search for solution to that with no success... anyone know what else needs to be modded for the transparent status bar in touchwiz? btw thanks to ccgh for pointing me to this thread

Will it work with 4.1?
(Cm10)
Sent from my Slim Jelly phone

[ask] change background on menu setting

how to replace a black background in the menu settings by using a transparent image

You must unzip framework-res.apk (recommend 7-zip). Open folder "res" go to drawable-mdpi and you'll see a lot of png's pictures. Then search for black backround png and replace it with new!

Ok thanks

[How-To] Theming for Chameleon OS - Theme Structure

There are alot of great resources here to get started theming, so I won't go into the basics here. This thread is a how-to structure a .ctz theme for Chameleon OS, a new ROM that uses a theme engine similar to MIUI. Theming for ChaOS is easy compared to the theme chooser, no xml mapping or any of that. It is very straight-forward.
So I will do my best not to overcomplicate it.
Someone is usually available for support on IRC Freenode #chameleonos
Theme structure
The Chameleon OS theme is made up of 3 components
1. Individual app or icon archives containing a res folder and a theme_values.xml
2. A description.xml that contains the basic info like theme name and author
3. Folders for Media
Archives
The Chameleon OS theme archives are for individual apps and an icon archive. They are labeled by app, for example, com.android.systemui, framework-res, com.android.settings, and so on.
The app archives contain a res folder and a theme_values.xml(if you are changing any values). The res folder will have subfolders for each resolution you are theming,i.e., drawable-hdpi, drawable-xhdpi, drawable-mdpi, drawable-nodpi and so on, your decompiled apk will show you what images go in which folder.
In addition: you can override framework images on a per-app basis. Simply include the framework images you want to override in the appropriate drawable-folder. This comes in handy for fixing text/background issues in individual apps, without having to re-theme the app. Simply add the backgrounds(or whatever) you want to change to the proper drawable folder and *BAM* its fixed. You have this option with theme-values also. Another way this comes in handy is because of the theme mixing feature, certain drawables are taken from framework for each app. Example: when someone mixes a dark status bar with a light framework, the proper notification backgrounds will show if you include them with the systemui archive.
The icons archive just contains the res folder and drawable subfolders containing the icons you are using with your theme.
Description xml
The description.xml is a xml file containing basic info that the Theme Manager uses. Here is an example:
Code:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<ChaOS-Theme><title>*</title><themer>*</themer><author>*</author><version>*</version><uiVersion>2</uiVersion></ChaOS-Theme>
Where you see * is where you enter the info for your theme, title, themer, author, version
Other folders for media(previews, ringtones, wallpaper, boot animation)
previews folder - contains screenshots that show up in the theme manager. Images are labeled as follows: preview_0.png, preview_1.png, ect. Also, you can specify an image for each category: preview_launcher_0.png, preview_statusbar_0.png, preview_contact_0.png, preview_icons_0.png, preview_mms_0.png.
You can have as many images as you want, just change the number at the end from 0 to 1,2,3, etc.
wallpaper folder - contains your default wallpaper labeled default_wallpaper.jpg or .png
ringtones folder - you can include a ringtone and a notification tone that can be applied with theme manager they should be mp3 format and are labeled as follows: notification.mp3, ringtone.mp3
boots folder - contains the bootanimation.zip you want to use with your theme
Theme_values
The Chameleon OS theme engine allows for the changing of many of the things found in the values folder of your decompiled apk: arrays, attrs, bools, colors, dimens, and strings.
Mostly themers just use colors to fix text readability issues, but all are available for your themes. In addition, the theme engine allows you to override framework values on a per-app basis. this allows you to correct text issues within a single apk, without impacting other apks that use the same value.
Example: Say I wanted to change the color value holo_blue_light to an orange color, in an apk.
File name - theme_values.xml
Code:
<?xml version="1.0" encoding="utf-8" ?>
<ChaOS_Theme_Values>
<color name="holo_blue_light">#ffff8800</color>
</ChaOS_Theme_Values>
You can include as many values as you like in between the <ChaOS_Theme_Values> and </ChaOS_Theme_Values>
This file goes with the res folder for your apk when making the archive.
Archiving the theme
This is important if you want your theme to work. I am using windows and winrar(zip format not rar) to archive. If you are on Mac or linux it may differ slightly
Select the res folder and theme_values.xml together, right-click->Add to archive. Name the archive appropriately, i.e. com.android.systemui
Repeat for each apk that you are theming.
Put all of your archives with the media folders and the description.xml and select all, right-click->Add to archive
Name your archive themename.ctz
Push to your device and apply then go back and do it 50 more times until it looks the way you want

[GUIDE][UPDATED 5/5/2013]Ultimate Guide to Android Misc. Editing

Ultimate Editing and Theming Guide​
Preliminary Requirements:-
PC with Windows(Please avoid Windows Vista)
Java JRE or JDK
APK Multitool
framework-res.apk, SystemUI.apk, twframework-res.apk, com.htc.resources for installing
7-zip
Notepad++
Android Device for testing
Photoshop or equivalent image editing software
android-sdk(for 9 png editing)
Lots and lots of patience and mind
What this guide includes:-
1. Easiest Decompiling and Recompiling Guide *Must Read before continuing*
2. Explanation of 9 pngs and how to edit or make them
3. How to Batch edit pngs (Not 9 pngs) (Changing color, etc)
4. APK png resources(General Location of General pngs)
First Step:
Decompiling: [MUST READ]
We are assuming that you have installed JAVA, Android SDK and apk-multitool without any problems
1. Copy your mobile's framework-res.apk, SystemUI.apk and twframework-res.apk in others folder in directory where you have extracted apk-multiool
2. Open Setup.bat. Choose 2 :- Installing Framework-res
{
"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"
}
Setup.bat​
Choose 1 (framework-res.apk)
Choose 2 (twframework-res.apk) [similarly install OEM specific files such as com.htc.resources , etc]
Choose 4 (SystemUI.apk)
Window will close each time you choose an option
You will have to restart Setup.bat each time
3. Now place the apk you want to edit in place-apk-here-for-modding
4. Now open script.bat. (If you see any error, either you haven't installed JAVA and SDK[adb] or they aren't implented, Please install them properly before continuing). Click any key to continue
APK-Multitool Window​
5. You will see the above window. Now, make sure you have installed all frameworks and Compression level is set to 9.
6. Now, we will choose our project. Click 24. A list of files present in place-apk-here-for-modding will be in front of you. Choose any file
7. Click on 9. Now decompiling will be in process.
8. After it is complete, go to projects folder, you will see a folder with the name of apk you decompiled
Decompiled apk example​
If it is decompiled properly, then there will be apktool.yml file in it
9. Do your modifications. Now, you can edit .9.png files (they will be discussed later) and xml files which were uneditable first
You will notice that there will be many new folders which weren't present in compiled form of apk. These all folders are generated from a file called resources.arsc present in compiled form which is absent in decompiled form
Such an example is of values folder which contains crucial xml files like styles.xml, strings.xml, ids.xml, etc
Always open xml files with Notepad++, it will mark commands and syntax making it look aligned and making it easy to understand
Example of decompiled xml file ​
Also, you can edit 9 patch files also which will be changed from now on
Example:-
We will discuss 9 png in detail later on
10. After you have done your modifications and you are ready to recompile the app, choose 11 (Compile System APK) if you are editing System App or 12(Compile Non-System App) if you are editing other than System App
11. a) If System App:-
After some time it will ask that if you want to copy additional files other than signatures to ensure less amount of errors, then choose y
After extracting some files, it will ask you to delete files from keep folder
Simply go to keep folder,
If you edited any pngs and there are many and you are lazy enough to delete one by one, then delete the whole folder in which you edited pngs
If you edited any xml file, then delete that xml file AND ALSO DELETE RESOURCES.ARSC
Why? Because we told that values and several other folders are generated from resources.arsc while decompiling
Now, if we don't delete resources.arsc, the modification we did in values folder will be reverted to original state
After doing this, go to script.bat again and press any key to continue
11. b)If its not system app:
Just recompile it and sign it man through the menu in apk multitool man.
It is easy as hell. Tutorial of non-system app has been ended here
12. Now, you will get another apk name System_ apkname.apk
Open both apks as archives by 7-zip
13. Last and most important step:-
Just drop the files you edited from new apk to old apk in correct folders. By now, you may have understood that resouces.arsc INCLUDES your edited xmls
14. Now, the final apk is not System_apkname.apk but apkname.apk (the original file you started with). Push it and enjoy
9 PNG Discussion
These are special types of pngs that can be stretched to fit the need of program or different scenarios or cases. It contains 1 pixel lines on each border of different lengths for different things
As told above, we can't edit 9 png in compiled form as it will lose these lines which define its properties. So, we first need to decompile apk in order to edit 9 pngs
So, after decompiling apk, open 9 png in Photoshop and select the part inside that 1 px border and edit anything you want (Hue, Saturation, Bevel, Emboss, ANYTHING)
Now save it (save it as a normal png and then rename it as .9.png because photoshop doesn't recognise 9 png extension and image will loose its RGB format)
Explanation of 9 png:-
You can read this for more information
If you have doubt that you have gone wrong somewhere or you have made a new png from scratch and want to test if it is correct or not:
(Check all 9 png files you edit as they can cause Force Closes or bootloops)
Go to folder where you extracted android-sdk and go to tools folder and open draw9patch.bat
A window like this will open up:-
Drop you 9 png here
A new window will open with you 9 png on it
Tick on show bad patches
If you see red rectangles, you have a bad 9 patch image. You will need to delete or add those lines in png to remove all red boxes. If you want to delete, press Shift and start moving cursor over lines you want to delete. You can choose method of hit and trial to remove all rectangles and move the lower scale to see how your image size is adjusted
Or you can do what I do:
1. Remove all lines
2. Add single dot on top centre and left centre border of image (That can be taken as stretchable area)
3. Add lines on right and bottom of image where you want to fill content. Now, click on Show Content
The purple area you see in image is the content area (Text will be filled there. Eg:- Popup Menu)
4. Now, you can adjust these lines acoording to your need that what you want for stretchable area and content area until an unless there comes an red triangle
5. When it is done. Save the file. DONE
Easy, isn't it?
That's what theming is
Batch Editing pngs in Photoshop
Well the scenario is you have 200 pngs and you want to change their color, hue, add effect to them, etc. Definitely not worth the time you will spent doing this one by one. So, here, I will cover how to batch apply same edits on to your infinite pngs. Here, I am taking example of changing color of battery png from green to purple, you can apply any attribute to your image in the same way. I repeat it is not for .9.png files. Read above guide for reference
Let's start
1. First copy all your pngs you need to edit in a separate folder. I have made a folder named Battery Base and pasted my all pngs of battery there.
Now create another folder where your edited pngs will be saved. For eg:- Battery Done. (Don't create it inside Battery Base folder)
2. Open Adobe Photoshop and Choose Window>Actions or Alt+F9
3. Click on the note like file (Create new Action)
Rename it to anything you want . I have chosen Battery_color
Then click on Record. Now, you will see that red circle is enabled and now everything you do on image will be recorded and will be applied on each image.
4. Now, do this very carefully, don't miss any step.
We will do every thing that we want Photoshop to do with each file we want to edit.
a) So, first we want Photoshop to open the image. So , click on Open and choose any png from Battery Base folder (Choose a file with more color so that you know what color exactly your file will be after editing. That is why I chose 90 percent battery here).
b) Now, after opening, we want to change Color of png from green to purple. So, choose Image>Adjustment>Hue and Saturation or Ctrl+U
A dialog box with 3 sliders will appear. Move upper slider to change color. You can move other slider to change saturation and brightness if you want. Now, if you got it right, click on OK.
Every step of yours is being recorded, so don't do unnecessary stuff you don't want to do on other images. Nonetheless, if you have done it, then Drop down the Battery Base Action in action palette and you will see your every action there, If you want to delete any action , you can delete it from there. You can also add any action before pre completed action by clicking above that action and performing it.
Now, you can do anything you want to be done on your rest of pngs.
c) Now, we want Photoshop to save this png to carry on working on others. So, Go to File>Save as... and save it as a png in Battery Done folder. Photoshop will ask you to choose, so choose smallest compression and no interlace.
d) Image is saved but we also want Photoshop to close the png so that it does not open 200 tabs for editing 200 pngs. So, click on close (Small cross on title bar of png). If, it asks that do you want to save changes to png . Say no, because if you say yes, the png in Battery Base will be changes and when batch processing is done, that png in Battery Done will be of different color that all others.And also, your all green pngs in Battery Base folder will turn purple too. But we want purple images in Battery Done and green in Battery Base.
5. Now, we hae done what we want, so, we will stop recording the Action. Click on that square in Actions Palette.
6. Fun Starts. Now we will do the batch processing.
Go to File>Automate>Batch
In the dialog box, Choose the action to be Battery_Color (or obiviously any action you created)
Source folder: Battery Base
Destination Folder: Battery Done
Tick both Override Action 'Open' commands and Override Action 'Save as' commands
Click on OK. Sit back for 3 to 5 minutes(204 pngs) and TADA
You can apply any action in same way. Such as bevel, glossy, pale, etc to innumerous amount of pngs
General APK png Resources
Here I will tell you where to find some pngs to theme your Phone
Note: Here I will tell location of pngs but that may differ based on modification done to your ROM by OEMs or devs. These pngs are found after decompiling or extracting the apk files. For more reference, read this.
In this part, there is only brief information, but for a very good guide, please go here. I haven't covered it all up as d3cka himself has done a marvellous job in making that guide. All the things present in that guide should solve all your queries.
General location of apks:
SystemUI.apk - /system/app/
framework-res.apk - /system/framework/
twframework-res.apk - /system/framework
framework.jar - /system/framework/
lidroid-res.apk - /system/framework/
Click to expand...
Click to collapse
Variable list:
I have referred to some locations as drawable-xdpi. X here stands for
X: m, l, h, xh
Meaning pngs can be in drawable-mdpi, drawable-hdpi, drawable-ldpi, drawable-xhdpi depending on resolution of your phone
In some places, I have just added * in order to fill spaces that are not common in each png
[?] means maybe only for GB or Samsung
Click to expand...
Click to collapse
Battery Icons -
(i)Ice Cream Sandwich/Jelly Bean: SystemUI.apk/res/drawable-xdpi/stat_sys_battery**.png
(ii)Gingerbread: framework-res.apk/res/drawable-xdpi/stat_sys_battery**.png
Status Bar icons - SystemUI.apk/res/drawable-xdpi/
Note, some, however very few status bar icons are also present in framework-res.apk
Platlogo - framework-res.apk/res/drawable-nodpi/platlogo*.jpg
(image that pops up when repeatedly clicked on Android Version)
In Gingerbrad, its a single file but in ICS and JB, they are many images.
Default Wallpaper - framework-res/res/drawable-xdpi/default_wallpaper.jpg
Default Lockscreen Wallpaper[?] - framework-res.apk/res/drawable-xdpi/zzzzzzzz_default_lockscreenw.jpg
Spinners[GB] - framework-res.apk/res/drawable-xdpi/spinner_****_**.png
(The loading circles)
Menu Icons - framework-res.apk/res/drawable-xdpi/ic_menu_**.png
These icons may also be present in twframework-res.apk for Samsung Touchwiz ROMs
Notification Toggles
(i)With lidroid 15 toggles : lidroid-res.apk/res/drawable-xdpi/
(ii)Without lidroid mod : SystemUI.apk/res/drawable-xdpi
These were some general pngs of system apps that may be used to theme the phone. You can find respective pngs to theme in their apks.
Will add more soon...
This is a work in progress.
Will add more things soon
Don't hesitate to ask any questions about anything
Credits:
@d3cka for teaching best about 9 pngs
@deathnotice01 for helping me
Miscellaneous Google and xda posts

Reserved

great
Great Guide Areeb...I THINK THIS SHOULD BE DISPLAYED AGAIN IN PORTAL
reserved

puneeth.007 said:
Great Guide Areeb...I THINK THIS SHOULD BE DISPLAYED AGAIN IN PORTAL
reserved
Click to expand...
Click to collapse
Not Now
It's incomplete
It'll ruin this guide then!

RE
+1 Thanks for this great guide

highly detailed guide, with of course nice pictorial representation!
:good:

This guide is awesome !
Unfortunately I don't know how to use photoshop correctly I still have not learned it , first by myself , and 2nd on school. I am just 13 2/3 YO . Anyway , i didn't have such knowledge about .9 png-s. Thanks

I had always got errors while editing compiled 9.png files. Hope this guide, help me to figure it out that...
Sent from my GT-S5830i using xda app-developers app

Added Batch editing in Photoshop

Sniper Killer said:
This guide is awesome !
Unfortunately I don't know how to use photoshop correctly I still have not learned it , first by myself , and 2nd on school. I am just 13 2/3 YO . Anyway , i didn't have such knowledge about .9 png-s. Thanks
Click to expand...
Click to collapse
I have covered Photshop Now. Hope it helps you
And added path thickness changing guide too

iamareebjamal said:
1. Easiest Decompiling and Recompiling Guide
Click to expand...
Click to collapse
It's not bad. :silly: Bookmarked ready to be added to mine, but could you please include tw somewhere in the thread title as it will be easier for People browsing mine looking for help for tw files.

[TOOL]Colors.xml Changer

Hello everyone!
I would like to share my simple-but useful,script!
What's that script?
This script is taking a colors.xml file which you select , and changes all the colors to the one you need.
How can that script be "useful"?
Sometimes when themers want to find out which color (i.e) affects the color of toolbar of an app,are searching in the colors.xml
Instead of searching all the colors.xml,i created that script which changes all the color values to one color of your choise.
This will make all the colors (i.e.) green.So compiling the theme will make you understand what is affected by colors.xml or styles.xml or or or...
Yes but...malware?
Source code
Also its compiled with AutohotKey.that means ,if u open the .exe as text file,there is all the source code there.
How to use it:
Download the zip and extract it.
Run the .exe
The script will do nothing until you press the 'F2' button.
Select the colors.xml you want.
Type the color you want.
Pressing ok ,will create a new modified xml at your desktop
Profit.
Pressing ESC in the operation will exit the script and will remove the produced folder at desktop
Give me some feedback,if that app is running on your computer because i use x64 windows 7