how to edit XML files? - G1 Q&A, Help & Troubleshooting

i searched but found nothing of use..
someone can please explain it to me?
thanks

The xml files within an android build have been compiled and can only be hex-edited.. what are you trying to do?

change a little thing.. i guess hax-editing its ok
how can i do that?

There actually IS a way to view the xml files as plain xml. You can then edit the xml files, but you need to resign the application again.

ok.. im listening
i do it on eclipse?

Download AXMLPrinter2.jar from here:
http://code.google.com/p/android4me/downloads/list
It works very well. I hope that you're not cheating on some game or something...

derfolo said:
Download AXMLPrinter2.jar from here:
http://code.google.com/p/android4me/downloads/list
It works very well. I hope that you're not cheating on some game or something...
Click to expand...
Click to collapse
i want to change color in progress_horizontal.xml
and its a good opportunity to learn
i download it.. where to put it?

derfolo said:
Download AXMLPrinter2.jar from here:
http://code.google.com/p/android4me/downloads/list
It works very well. I hope that you're not cheating on some game or something...
Click to expand...
Click to collapse
I didn't know about that... what a useful tool, thanks.

Guys, after reading about this a bit more, this is what you'll need to do:
1. use the AXMLPrinter2.jar to get the xml file where you can read it.
2. Find the value you are trying to change in the xml file--e.g., color = #FF0000.
3. Edit the binary version of the xml file with a hexeditor and find and replace your variable.
Unfortunately, it seems that no one has figured out how to convert the plain xml back to binary (and make it work) yet. Hope this is all helpful to you!

Barina said:
i want to change color in progress_horizontal.xml
and its a good opportunity to learn
i download it.. where to put it?
Click to expand...
Click to collapse
Put it anywhere you want. Make sure you have java installed, then type:
Code:
java -jar (your path)AXMLprinter2.jar (filename) > (filename.out)
Find the value you want to change, then use a hex editor to make the change to the original binary xml file. Colors are easy to find and change.

ive got this:
Code:
<?xml version="1.0" encoding="utf-8" ?>
- <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:id="@android:01020000">
- <shape>
<corners android:radius="5.0dip" />
<gradient android:startColor="#FF9D9E9D" android:endColor="#FF747674" android:angle="270.0" android:centerY="0.75" android:centerColor="#FF5A5D5A" />
</shape>
</item>
- <item android:id="@android:0102000F">
- <clip>
- <shape>
<corners android:radius="5.0dip" />
<gradient android:startColor="#80FFD300" android:endColor="#A0FFCB00" android:angle="270.0" android:centerY="0.75" android:centerColor="#80FFB600" />
</shape>
</clip>
</item>
- <item android:id="@android:0102000D">
- <clip>
- <shape>
<corners android:radius="5.0dip" />
<gradient android:startColor="#FFFFD300" android:endColor="#FFFFCB00" android:angle="270.0" android:centerY="0.75" android:centerColor="#FFFFB600" />
</shape>
</clip>
</item>
</layer-list>
what to do next?
is that hex editor okay?
http://www.chmaas.handshake.de/delphi/freeware/xvi32/xvi32.htm#download
edit:
the color is represented with 8 chars and in photoshop its 6 chars.... what a..?!

Barina said:
ive got this:
Code:
<?xml version="1.0" encoding="utf-8" ?>
- <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:id="@android:01020000">
- <shape>
<corners android:radius="5.0dip" />
<gradient android:startColor="#FF9D9E9D" android:endColor="#FF747674" android:angle="270.0" android:centerY="0.75" android:centerColor="#FF5A5D5A" />
</shape>
</item>
- <item android:id="@android:0102000F">
- <clip>
- <shape>
<corners android:radius="5.0dip" />
<gradient android:startColor="#80FFD300" android:endColor="#A0FFCB00" android:angle="270.0" android:centerY="0.75" android:centerColor="#80FFB600" />
</shape>
</clip>
</item>
- <item android:id="@android:0102000D">
- <clip>
- <shape>
<corners android:radius="5.0dip" />
<gradient android:startColor="#FFFFD300" android:endColor="#FFFFCB00" android:angle="270.0" android:centerY="0.75" android:centerColor="#FFFFB600" />
</shape>
</clip>
</item>
</layer-list>
what to do next?
is that hex editor okay?
http://www.chmaas.handshake.de/delphi/freeware/xvi32/xvi32.htm#download
edit:
the color is represented with 8 chars and in photoshop its 6 chars.... what a..?!
Click to expand...
Click to collapse
I Googled it and came up with this:
"..colors are 8 digit hexidecimal numbers which include the alpha value. The last 6 digits are the RGB values, much like an HTML color. The first 2 digits is the alpha value, and that is what we must set to get a translucent background."
So I am guessing the first 2 digits of the 8 are the background color/transparency, and the rest is what you want to change.

There is a thread by stericson that details this in the theme section. Go to his profile and look through the threads he created or search for
"How to edit xml"
the thread should be linked in the stickies in the theme section

ohhh i see..
okay ill search it later i just noticed that the ColorChange3 can do this..
thanks a lot!

thanks for this programme going to see if van edit a few files here and there. what do i do once i have finished editing the .out file? do i jus rename it back to .xml?

Related

progress_horizontal.xml

what parts do i change for a yellow bar
i'll make the framework from source
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:id="@android:01020000"
>
<shape
>
<corners
android:radius="5.0dip"
>
</corners>
<gradient
android:startColor="#FF9D9E9D"
android:endColor="#FF747674"
android:angle="270.0"
android:centerY="0.75"
android:centerColor="#FF5A5D5A"
>
</gradient>
</shape>
</item>
<item
android:id="@android:0102000F"
>
<clip
>
<shape
>
<corners
android:radius="5.0dip"
>
</corners>
<gradient
android:startColor="#80FFD300"
android:endColor="#A0FFCB00"
android:angle="270.0"
android:centerY="0.75"
android:centerColor="#80FFB600"
>
</gradient>
</shape>
</clip>
</item>
<item
android:id="@android:0102000D"
>
<clip
>
<shape
>
<corners
android:radius="5.0dip"
>
</corners>
<gradient
android:startColor="#FFFFD300"
android:endColor="#FFFFCB00"
android:angle="270.0"
android:centerY="0.75"
android:centerColor="#FFFFB600"
>
</gradient>
</shape>
</clip>
</item>
</layer-list>
how do u make it from the source could i possibly get you to pm me some info on this so i can stop hex editing XML FILES
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:id="@android:01020000"
>
<shape
>
<corners
android:radius="5.0dip" <! you can chnage the roundness of the corners with this, ie to make it square chnage this to 0.0dip remember to chnag ethe other two instances of this if you want it to chnage.
>
</corners>
<gradient
android:startColor="#chnage this"
android:endColor="#and this"
android:angle="270.0"
android:centerY="0.75"
android:centerColor="#and this"
>
</gradient>
</shape>
</item>
<item
android:id="@android:0102000F"
>
<clip
>
<shape
>
<corners
android:radius="5.0dip"
>
</corners>
<gradient
android:startColor="#chnage this one too"
android:endColor="#and this one"
android:angle="270.0"
android:centerY="0.75"
android:centerColor="#and this one"
>
</gradient>
</shape>
</clip>
</item>
<item
android:id="@android:0102000D"
>
<clip
>
<shape
>
<corners
android:radius="5.0dip"
>
</corners>
<gradient
android:startColor="#this is the background color"
android:endColor="#so is this"
android:angle="270.0"
android:centerY="0.75"
android:centerColor="#and this too"
>
</gradient>
</shape>
</clip>
</item>
</layer-list>
There ya go
But would it be easier to just use colorchange.jar? if you only want to change the colors, and arent that into source editing?
cache u ever get my pm?
pyrator said:
cache u ever get my pm?
Click to expand...
Click to collapse
not sure mate, sorry i get a lot of pm, send it again and ill get back to yopu i promis.
really sorry, didnt mean to be rude
thanks for the help think i've got there
I'm really interested in knowing how to edit the source of .xml files also.
Can you guys tell me how to do it?
Thanks
google apk tool
Thanks man, this is going to make everything so much easier for me now

[Q] [ADW]Theming help

I am trying to make my own ADW theme. Everything is set up correctly and I'm using Eclipse.
The problem I have is that I don't know how I should edit the xmls in /res/drawable without getting force close in Emulator when trying it out.
i.e. I edit home_arrows_left.xml from:
Code:
<?xml version="1.0" encoding="utf-8"?><level-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:maxLevel="0" android:drawable="@drawable/dot_big" />
<item android:maxLevel="1" android:drawable="@drawable/dot_big" />
<item android:maxLevel="2" android:drawable="@drawable/dot_big" />
<item android:maxLevel="3" android:drawable="@drawable/dot_big" />
<item android:maxLevel="4" android:drawable="@drawable/dot_big" />
<item android:maxLevel="5" android:drawable="@drawable/dot_big" />
<item android:maxLevel="6" android:drawable="@drawable/dot_big" />
</level-list>
to:
Code:
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:maxLevel="0">dot</item>
<item android:maxLevel="1">dot</item>
<item android:maxLevel="2">dot</item>
<item android:maxLevel="3">dot</item>
<item android:maxLevel="4">dot</item>
<item android:maxLevel="5">dot</item>
<item android:maxLevel="6">dot</item>
</level-list>
And I create a file in drawable called dot.png
If I export+install with adb and select as ADW theme in emulator I get ADW force close when pressing home button.
I'm not a pro with XML but I could spend some time to learn more if someone just tells me what I need to know to create ADW themes.
Maybe I could use some tool to validate the XML?
The only problem I have is to edit the XML in the right way.
Zalastax said:
I am trying to make my own ADW theme. Everything is set up correctly and I'm using Eclipse.
The problem I have is that I don't know how I should edit the xmls in /res/drawable without getting force close in Emulator when trying it out.
i.e. I edit home_arrows_left.xml from:
Code:
<?xml version="1.0" encoding="utf-8"?><level-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:maxLevel="0" android:drawable="@drawable/dot_big" />
<item android:maxLevel="1" android:drawable="@drawable/dot_big" />
<item android:maxLevel="2" android:drawable="@drawable/dot_big" />
<item android:maxLevel="3" android:drawable="@drawable/dot_big" />
<item android:maxLevel="4" android:drawable="@drawable/dot_big" />
<item android:maxLevel="5" android:drawable="@drawable/dot_big" />
<item android:maxLevel="6" android:drawable="@drawable/dot_big" />
</level-list>
to:
Code:
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:maxLevel="0">dot</item>
<item android:maxLevel="1">dot</item>
<item android:maxLevel="2">dot</item>
<item android:maxLevel="3">dot</item>
<item android:maxLevel="4">dot</item>
<item android:maxLevel="5">dot</item>
<item android:maxLevel="6">dot</item>
</level-list>
And I create a file in drawable called dot.png
If I export+install with adb and select as ADW theme in emulator I get ADW force close when pressing home button.
I'm not a pro with XML but I could spend some time to learn more if someone just tells me what I need to know to create ADW themes.
Maybe I could use some tool to validate the XML?
The only problem I have is to edit the XML in the right way.
Click to expand...
Click to collapse
Just change all of the
Code:
android:drawable="@drawable/dot_big"
to
Code:
android:drawable="@drawable/dot"
And create a dot.png
Thank you for the help!
I have one more question.
How do I refer to images in drawable-hdpi/drawable-mdpi/drawable-ldpi depending on if they are hdpi/mdpi/ldpi?
I have tried to open some APK's but you can't see what's written in the XML files. Maybe someone could contribute with the source of an ADWTheme that have different images based on dpi?
You have to decompile an APK in order to view XML files as plain text. I suggest apkmanager 4.8 (I tried 4.9 and it wasn't compiling apks right for me.)
Once extracted, the tool will allow you to extract the contents of .apk's, and decompile them so you can edit the xml files. You will have to recompile and sign the .apk file once you decompile and edit it.
I extracted an apk from my device and turned it into a zip. I have viewed some XML's via AXMLPrinter2.jar but If I look what's written in android:drawable it says android:drawable="@7F020007". Thats not a path or a file so when it compiles the path changes. I shall see if the same thing happens with the program you told me about tomorrow.
Do you need to make different images for different dpi levels?

TSF Shell Theme [Instructional]

I found quite a few themes, but the original creators don't provide a guide, or leave you to decompile theirs which seems to cause issues with a rebuilt version. In light of this, I will provide a guide on the easy process of developing a theme for TSF Shell.
You will need Eclipse and all the usual Android app development stuff installed. This guide will not be covering that aspect.
Set up a basic app, you also need to include an empty activity. This part is not overly important.
AndroidManifest.xml
Your empty activity needs to specify that it is a theme
Code:
<intent-filter>
...
<action android:name="com.tsf.shell.themes" />
...
</intent-filter>
You will need an assets folder, which will be the base of your theme. It will include:
A subfolder named theme, with subfolders preview, widget, shell, and icon. These will be where the theme parts go.
PreviewDescription.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<theme>
<version value="1" />
<info date="CREATION_DATE" author="YOUR_NAME" name="THEME_NAME"/>
<preview frontcover="IMAGE_FOR_THEME_ICON">
<item image="PREVIEW_IMAGE" />
<item image="PREVIEW_IMAGE" />
<item image="PREVIEW_IMAGE" />
</preview>
</theme>
The capitalized words should be replaced by the file names of the files that will be placed in the preview folder. These file names can be whatever you like, as long as they match the values listed here.
The widget folder is somewhat specific. It contains a subfolder named "com.tsf.shell.widget.folder" with the files "widget_folder_bg.png", "widget_folder_front.png", and "widget_folder_icon.png" which should be replaced by the images you want for each of these items.
ThemeDesription.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<theme>
<version value="1" />
<icon-default scale="0.70" leftOffset="0" rightOffset="0"
topOffset="0" bottomOffset="0">
<item image="default" />
<item image="default2" />
<item image="default3" />
<item image="default4" />
<item image="default5" />
</icon-default>
<icon-filter>
<item component="com.android.vending/com.android.vending.AssetBrowserActivity"
image="gplay" />
<item component="com.android.vending/com.google.android.finsky.activities.PlayLauncherActivity"
image="gplay" />
<item component="com.android.mms/com.android.mms.ui.ConversationList"
image="messaging" />
</icon-filter>
<widget>
<item type="widget_system_folder">
<icon image="widget_folder_icon"/>
<nameText size="14" color="#FF333333" x="20" y="-6" width="86" height="23"/>
<sizeText size="14" color="#FF99CC00" colorFull="#FFFF3300" width="16" height="20" x="101" y="9"/>
<frame image="widget_folder_windows_bg"/>
<order>
<backPlane x="0" y="17" width="128" height="32" image="widget_folder_bg"/>
<childContainer x="0" y="-23"/>
<frontPlane x="0" y="-31" width="128" height="64" image="widget_folder_front"/>
<textPlane x="0" y="-43" width="128" height="32"/>
<cachePlane width="128" height="128"/>
</order>
<child>
<item x="0" y="-5" z="0" rx="0" ry="0" rz="0" sx="1" sy="1" sz="1" />
<item x="-2" y="5" z="0" rx="0" ry="0" rz="-20" sx="1" sy="1" sz="1" />
<item x="5" y="15" z="0" rx="0" ry="0" rz="20" sx="1" sy="1" sz="1" />
</child>
</item>
</widget>
<shell>
<pageController image="page_controller_miui_w"/>
<pageControllerIndicator image="page_controller_indicator_miui_w" offsetX="14" offsetY="7" angleUnit="23" angleOffset="1"/>
<deleteController imageOpen="control_del_open_miui_w" imageClose="control_del_close_miui_w"/>
<menu toolButton="menu_tool_button_miui_w" themeButton="menu_theme_button_miui_w" userButton="menu_user_button_miui_w" settingButton="menu_setting_button_miui_w" bg="menu_bg_miui_w" bgOffsetX="1" />
<applicationPage effectButton="application_page_effect_button_miui_w"
nvPoint="application_page_nv_point" />
<pagePreview select="shell_select_page_bg_select_miui_w"
unselect="shell_select_page_bg_unselect_w" transitionButton="application_transition_button_miui" />
<transitionButton image="application_transition_button_miui" />
<linePickerMenu image="shell_picker_menu_item_miui_w" notic="shell_picker_menu_item_text_bg_miui_w" />
<interactiveArrange bg="shell_interactive_grid_bg_miui_w"
scaleButton="shell_interactive_grid_scale_button_miui_w" />
<publicButton close="public_button_close_miui_w" return="public_button_return_miui_w" />
<app multiChoice="shell_multi_choice_miui" />
</shell>
<wallpaper default="1">
<item image="wallpaper1" thumb="wallpaper1_thumb" />
<item image="wallpaper2" thumb="wallpaper2_thumb" />
<item image="wallpaper3" thumb="wallpaper3_thumb" />
<item image="wallpaper4" thumb="wallpaper4_thumb" />
</wallpaper>
</theme>
The above is an excerpt from an existing theme to help you determine what goes where. The important parts are icon-default scale="0.70" which is the size of the original icon that will be placed within the "generic" background, which is specified by the item image values within the icon-default class. Everything surrounds the ThemeDescription, so if you want to change something, this is usually where.
Back to the icon and shell folders. This is where you will place images you want used for each app and the parts of the interface. How the theme will handle missing icons was covered by the theme description so don't worry if you don't have one for everything. These items should already have been specified by the ThemeDescription, so now it is just filling in the pictures.
Sent from my Jailbroken iPad 3
twistedumbrella said:
I found quite a few themes, but the original creators don't provide a guide, or leave you to decompile theirs which seems to cause issues with a rebuilt version. In light of this, I will provide a guide on the easy process of developing a theme for TSF Shell.
You will need Eclipse and all the usual Android app development stuff installed. This guide will not be covering that aspect.
Set up a basic app, you also need to include an empty activity. This part is not overly important.
AndroidManifest.xml
Your empty activity needs to specify that it is a theme
Code:
<intent-filter>
...
<action android:name="com.tsf.shell.themes" />
...
</intent-filter>
You will need an assets folder, which will be the base of your theme. It will include:
A subfolder named theme, with subfolders preview, widget, shell, and icon. These will be where the theme parts go.
PreviewDescription.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<theme>
<version value="1" />
<info date="CREATION_DATE" author="YOUR_NAME" name="THEME_NAME"/>
<preview frontcover="IMAGE_FOR_THEME_ICON">
<item image="PREVIEW_IMAGE" />
<item image="PREVIEW_IMAGE" />
<item image="PREVIEW_IMAGE" />
</preview>
</theme>
The capitalized words should be replaced by the file names of the files that will be placed in the preview folder. These file names can be whatever you like, as long as they match the values listed here.
The widget folder is somewhat specific. It contains a subfolder named "com.tsf.shell.widget.folder" with the files "widget_folder_bg.png", "widget_folder_front.png", and "widget_folder_icon.png" which should be replaced by the images you want for each of these items.
ThemeDesription.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<theme>
<version value="1" />
<icon-default scale="0.70" leftOffset="0" rightOffset="0"
topOffset="0" bottomOffset="0">
<item image="default" />
<item image="default2" />
<item image="default3" />
<item image="default4" />
<item image="default5" />
</icon-default>
<icon-filter>
<item component="com.android.vending/com.android.vending.AssetBrowserActivity"
image="gplay" />
<item component="com.android.vending/com.google.android.finsky.activities.PlayLauncherActivity"
image="gplay" />
<item component="com.android.mms/com.android.mms.ui.ConversationList"
image="messaging" />
</icon-filter>
<widget>
<item type="widget_system_folder">
<icon image="widget_folder_icon"/>
<nameText size="14" color="#FF333333" x="20" y="-6" width="86" height="23"/>
<sizeText size="14" color="#FF99CC00" colorFull="#FFFF3300" width="16" height="20" x="101" y="9"/>
<frame image="widget_folder_windows_bg"/>
<order>
<backPlane x="0" y="17" width="128" height="32" image="widget_folder_bg"/>
<childContainer x="0" y="-23"/>
<frontPlane x="0" y="-31" width="128" height="64" image="widget_folder_front"/>
<textPlane x="0" y="-43" width="128" height="32"/>
<cachePlane width="128" height="128"/>
</order>
<child>
<item x="0" y="-5" z="0" rx="0" ry="0" rz="0" sx="1" sy="1" sz="1" />
<item x="-2" y="5" z="0" rx="0" ry="0" rz="-20" sx="1" sy="1" sz="1" />
<item x="5" y="15" z="0" rx="0" ry="0" rz="20" sx="1" sy="1" sz="1" />
</child>
</item>
</widget>
<shell>
<pageController image="page_controller_miui_w"/>
<pageControllerIndicator image="page_controller_indicator_miui_w" offsetX="14" offsetY="7" angleUnit="23" angleOffset="1"/>
<deleteController imageOpen="control_del_open_miui_w" imageClose="control_del_close_miui_w"/>
<menu toolButton="menu_tool_button_miui_w" themeButton="menu_theme_button_miui_w" userButton="menu_user_button_miui_w" settingButton="menu_setting_button_miui_w" bg="menu_bg_miui_w" bgOffsetX="1" />
<applicationPage effectButton="application_page_effect_button_miui_w"
nvPoint="application_page_nv_point" />
<pagePreview select="shell_select_page_bg_select_miui_w"
unselect="shell_select_page_bg_unselect_w" transitionButton="application_transition_button_miui" />
<transitionButton image="application_transition_button_miui" />
<linePickerMenu image="shell_picker_menu_item_miui_w" notic="shell_picker_menu_item_text_bg_miui_w" />
<interactiveArrange bg="shell_interactive_grid_bg_miui_w"
scaleButton="shell_interactive_grid_scale_button_miui_w" />
<publicButton close="public_button_close_miui_w" return="public_button_return_miui_w" />
<app multiChoice="shell_multi_choice_miui" />
</shell>
<wallpaper default="1">
<item image="wallpaper1" thumb="wallpaper1_thumb" />
<item image="wallpaper2" thumb="wallpaper2_thumb" />
<item image="wallpaper3" thumb="wallpaper3_thumb" />
<item image="wallpaper4" thumb="wallpaper4_thumb" />
</wallpaper>
</theme>
The above is an excerpt from an existing theme to help you determine what goes where. The important parts are icon-default scale="0.70" which is the size of the original icon that will be placed within the "generic" background, which is specified by the item image values within the icon-default class. Everything surrounds the ThemeDescription, so if you want to change something, this is usually where.
Back to the icon and shell folders. This is where you will place images you want used for each app and the parts of the interface. How the theme will handle missing icons was covered by the theme description so don't worry if you don't have one for everything. These items should already have been specified by the ThemeDescription, so now it is just filling in the pictures.
Sent from my Jailbroken iPad 3
Click to expand...
Click to collapse
This is a great guide! Thanks for this! I must say tfs shell is just great and some minor bugs but it can be solved with proper attention and spare time for decompile and recompile!

[TUT][JB] HOW TO THEME SystemUI.apk for TOTALLY newbie!

hello community
i would like to share something i know about how to theme for most SystemUI.apk.
What in this TUT??
PAGE #1 :
1. Theme Tools that needed.
2. STEPS for making theme.
3. HOW TO CHANGE COLOR FOR TEXT.
4. HOW TO MAKE 1% BATTERY INCREMENT.
5. HOW TO MAKE CENTER CLOCK.
6. HOW TO REARRANGE THE TOGGLE.
7. HOW TO REMOVE THE BRIGHTNESS BAR.
8. HOW TO CHANGE STATUS BAR BACKGROUND.
9. HOW TO MAKE THE BUTTON AND NOTIFICATION TRANSPARENT.
10. HOW TO MAKE TRANSPARENT BACKGROUND.
PAGE #2 :
11. HOW TO REMOVE THE TEXT AND TOGGLES STATUS.
12. HINT HOW TO EDIT IMAGE WITHOUT GETTING ERROR!
13. sample_toggles for all!
14. HOW TO CHANGE ANY PART WITH IMAGE.
15. How To Sign Your Apk After Modding!
TUT SHARED BY OTHERS :
- HOW TO MOVE TOGGLES TO BOTTOM, HOW TO MOVE BATTERY ICON TO LEFT, HOW TO ADD AM/PM AT STATUS BAR. by @SuperDroid-BOND
- HOW TO ADD SCREENSHOT BUTTON IN STATUSBAR. by @remuntada78​​
1. Theme Tools that needed :
Click to expand...
Click to collapse
- Apktool (download the Jar and aapt) [only for Windows] thanks to iBotPeaches for the tool.
- Android Utility [only for MAC/LINUX] thanks to tommytomatoe for the tool.
- Better Draw9Patch. (for editing .9patch png) thanks to AndroidGraphix for the tool.
- good .xml reader (i'd prefer Notepad ++).
- good image editor (i'd prefer GIMP).
- for color to html, go to this site (colorgenerator or colorhunter which is my reference for color
i dont know about Linux or Mac, so this TUT is just for Windows. But im sure the steps is just the same.
STEPS after download the tool (Apktool):
Click to expand...
Click to collapse
- extract both downloaded zip file. (the Jar and aapt)
- you'll get 3 files ( aapt.exe, apktool.bat, and apktool.jar), place it together in one folder.
- go to Home Menu, search for "cmd", copy the cmd to the apktool folder.​
STEPS for installing:
1) pull your framework-res.apk (in system/framework)
2) pull SystemUI.apk (in system/app)
3) install them with the command
Code:
apktool if framework-res.apk
Code:
apktool if SystemUI.apk
this will install the framework and the systemui for the current ROM.​
2. STEPS for making theme :
1) decompile SystemUI.apk with the command.
Code:
apktool d SystemUI.apk
2) then go to SystemUI/res/drawable-hdpi/ (to edit the images)
be careful of the .9.png . Use the Better Draw9Patch tool for editing .9patch pngs.
these are the list of the png and where it will display :
Click to expand...
Click to collapse
for background :
* notification_panel_bg.9 ------------------------------------------------| (status bar bg)
* tw_quick_panel_list_bg_f/n/p ----------------------------------------| (toggle bg)
* tw_quick_panel_quick_setting_button_bg_normal.9 ---------| (toggle button background)
* tw_status_bar_call_ongoing_#####.9 ----------------------------| (status bar display when call)
for icons :
* all tw_quick_panel_icon_###.png ----------------------------------| (toggle button)
{
"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"
}
* stat_sys_battery_# , stat_sys_battery_charge_anim## ------| (for battery display)
* tw_quickpanel_icon_#.png -------------------------------------------| (for status bar expended quicksetting)
* tw_quick_panel_plnm_setting_dv ----------------------------------| (for divider between the quicksetting and clock)
* tw_status_bar_close_on/off ------------------------------------------| ( for the status bar bottom drag)
for recent tumbnail :
* look for all recents_thumbnail_#.png ------------------------------| (for thumbnail bg)
* tw_btn_default_normal_holo_recent_button.9 ------------------| (for btn bg)
* tw_recent_panel_icon_######_holo_dark ----------------------| (for btn icon)
thats all for the important images (other images you'll know just with its look and where it belong )​
3. HOW TO CHANGE TEXT COLOR.
Click to expand...
Click to collapse
res/layout :
1. tw_status bar.xml
battery text color.
Code:
<TextView android:textSize="12.0dip" android:textColor="#something"
clock text color.
Code:
<com.android.systemui.statusbar.policy.Clock android:textSize="@dimen/status_bar_clock_text_size" android:textColor="#something"
change the "something" with your preferred color.
2. tw_status_bar_expanded_header.xml
for pull down clock color.
Code:
<com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/TextAppearance.StatusBar.Expanded.Clock" android:textColor="#something"
for date color.
Code:
"@style/TextAppearance.StatusBar.Expanded.Date" android:textColor="#something"
res/values :
1. colors.xml
for pull down Notification label color.
Code:
<color name="notification_category_color">
for clear button label text color.
Code:
<color name="tw_status_bar_clear_btn_text">
2. styles.xml
Code:
<style name="TextAppearance.StatusBar.Expanded.Clock" parent="@style/TextAppearance.StatusBar.Expanded">
<item name="android:textSize">32.0dip</item>
<item name="android:textStyle">normal</item>
<item name="android:textColor">#ff33b5e5</item>
<item name="android:fontFamily">sans-serif-light</item>
Code:
<style name="TextAppearance.StatusBar.Expanded.Date" parent="@style/TextAppearance.StatusBar.Expanded">
<item name="android:textSize">12.0dip</item>
<item name="android:textStyle">normal</item>
<item name="android:textColor">#FF9CE4FE</item>
<item name="android:textAllCaps">true</item>
Code:
<style name="TextAppearance.StatusBar.Expanded.Network" parent="@style/TextAppearance.StatusBar.Expanded">
<item name="android:textSize">14.0dip</item>
<item name="android:textStyle">normal</item>
<item name="android:textColor">#ff33b5e5</item>
you can change the text size, color, style (bold or normal) in that xml.​
4. HOW TO MAKE 1% BATTERY INCREMENT :
Click to expand...
Click to collapse
res/drawable/
- edit the stat_sys_battery.xml and stat_sys_battery_charge.xml to be like this :
Code:
<?xml version="1.0" encoding="utf-8"?>
<level-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/stat_sys_battery_0" android:maxLevel="0" />
<item android:drawable="@drawable/stat_sys_battery_1" android:maxLevel="1" />
<item android:drawable="@drawable/stat_sys_battery_2" android:maxLevel="2" />
<item android:drawable="@drawable/stat_sys_battery_3" android:maxLevel="3" />
<item android:drawable="@drawable/stat_sys_battery_4" android:maxLevel="4" />
<item android:drawable="@drawable/stat_sys_battery_5" android:maxLevel="5" />
.
.
.
.
until :
Code:
.
.
.
.
.
<item android:drawable="@drawable/stat_sys_battery_95" android:maxLevel="95" />
<item android:drawable="@drawable/stat_sys_battery_96" android:maxLevel="96" />
<item android:drawable="@drawable/stat_sys_battery_97" android:maxLevel="97" />
<item android:drawable="@drawable/stat_sys_battery_98" android:maxLevel="98" />
<item android:drawable="@drawable/stat_sys_battery_99" android:maxLevel="99" />
<item android:drawable="@drawable/stat_sys_battery_100" android:maxLevel="100" />
</level-list>
animated battery charge display :
Code:
<?xml version="1.0" encoding="utf-8"?>
<level-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:maxLevel="0">
<animation-list android:oneshot="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:duration="1500" android:drawable="@drawable/stat_sys_battery_0" />
<item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_anim0" />
</animation-list>
</item>
<item android:maxLevel="1">
<animation-list android:oneshot="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:duration="1500" android:drawable="@drawable/stat_sys_battery_1" />
<item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_anim1" />
</animation-list>
</item>
<item android:maxLevel="2">
<animation-list android:oneshot="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:duration="1500" android:drawable="@drawable/stat_sys_battery_2" />
<item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_anim2" />
</animation-list>
.
.
.
.
until :
Code:
.
.
.
.
<item android:maxLevel="100">
<animation-list android:oneshot="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:duration="1500" android:drawable="@drawable/stat_sys_battery_100" />
<item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_anim100" />
</animation-list>
</item>
<item android:maxLevel="101">
<animation-list android:oneshot="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:duration="1000" android:drawable="@drawable/stat_sys_battery_100" />
<item android:duration="500" android:drawable="@drawable/stat_sys_battery_charge_animfull" />
</animation-list>
</item>
</level-list>
then put the battery icons in res/drawable-hdpi, recompile.​
5. HOW TO MAKE CENTER CLOCK?
Click to expand...
Click to collapse
res/layout
tw_status_bar.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<com.android.systemui.statusbar.phone.PhoneStatusBarView android:orientation="vertical" android:id="@id/status_bar" android:background="@drawable/status_bar_background" android:focusable="true" android:fitsSystemWindows="true" android:descendantFocusability="afterDescendants"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:systemui="http://schemas.android.com/apk/res/com.android.systemui">
<ImageView android:id="@id/notification_lights_out" android:paddingLeft="6.0dip" android:paddingBottom="2.0dip" android:visibility="gone" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="fill_parent" android:src="@drawable/ic_sysbar_lights_out_dot_small" android:scaleType="center" />
<LinearLayout android:orientation="horizontal" android:id="@id/icons" android:paddingLeft="6.0dip" android:paddingRight="6.0dip" android:layout_width="fill_parent" android:layout_height="fill_parent">
<LinearLayout android:orientation="horizontal" android:id="@id/left_icons" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
<TextView android:textSize="15.0dip" android:gravity="center_vertical" android:id="@id/carrierLabel" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
<ImageView android:id="@id/doNotDisturbIcon" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tw_dnd" android:alpha="0.7" android:scaleX="0.85" android:scaleY="0.85" />
<com.android.systemui.statusbar.StatusBarIconView android:id="@id/moreIcon" android:visibility="gone" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="fill_parent" android:src="@drawable/stat_notify_more" />
<com.android.systemui.statusbar.phone.IconMerger android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/notificationIcons" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentLeft="true" />
</LinearLayout>
<LinearLayout android:gravity="center" android:orientation="horizontal" android:id="@id/clock" android:layout_width="wrap_content" android:layout_height="fill_parent">
<com.android.systemui.statusbar.policy.Clock android:textSize="@dimen/status_bar_clock_text_size" android:textColor="#ff99FF00" android:gravity="center" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
</LinearLayout>
<LinearLayout android:gravity="right|center" android:orientation="horizontal" android:id="@id/right_icons" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0" android:layout_alignParentRight="true">
<LinearLayout android:gravity="right|center" android:orientation="horizontal" android:id="@id/statusIcons" android:layout_width="wrap_content" android:layout_height="fill_parent" />
<LinearLayout android:gravity="right|center" android:orientation="horizontal" android:id="@id/signal_battery_cluster" android:paddingLeft="0.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent">
<include android:id="@id/signal_cluster" android:layout_width="wrap_content" android:layout_height="wrap_content" layout="@layout/tw_signal_cluster_view" />
<TextView android:textSize="9.0dip" android:textColor="#ff99FF00" android:layout_gravity="center" android:id="@id/battery_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/status_bar_network_name_separator" />
<ImageView android:gravity="center" android:id="@id/battery" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout android:orientation="horizontal" android:id="@id/ticker" android:paddingLeft="6.0dip" android:animationCache="false" android:layout_width="fill_parent" android:layout_height="fill_parent">
<ImageSwitcher android:id="@id/tickerIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:layout_marginRight="4.0dip">
<com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="centerInside" />
<com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="centerInside" />
</ImageSwitcher>
<com.android.systemui.statusbar.phone.TickerView android:id="@id/tickerText" android:paddingTop="2.0dip" android:paddingRight="10.0dip" android:layout_width="0.0dip" android:layout_height="wrap_content" android:layout_weight="1.0">
<TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:id="@id/ticker_text_view_old" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" />
<TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:id="@id/ticker_text_view_new" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" />
</com.android.systemui.statusbar.phone.TickerView>
</LinearLayout>
</com.android.systemui.statusbar.phone.PhoneStatusBarView>
edit the xml just like mine ​
6. HOW TO REARRANGE THE TOGGLE :
Click to expand...
Click to collapse
before:
res/values
arrays.xml
Code:
<string-array name="QuickSettingButtonAttribute">
<item>Wifi</item>
<item><string-array name="QuickSettingButtonAttribute">
<item>Wifi</item>
<item>Location</item>
<item>SilentMode</item>
<item>AutoRotate</item>
<item>Bluetooth</item>
<item>MobileData</item>
<item>DormantMode</item>
<item>PowerSaving</item>
<item>AllShareCast</item>
<item>MultiWindow</item>
<item>Sync</item>
</string-array>
just arrange what ever you want it to be with replace the arrangement of that xml.
eg. you want to make the GPS toggle to the other side :
HTML:
<string-array name="QuickSettingButtonAttribute">
<item>Wifi</item>
<item>SilentMode</item>
<item>AutoRotate</item>
<item>Bluetooth</item>
<item>MobileData</item>
<item>DormantMode</item>
<item>PowerSaving</item>
<item>AllShareCast</item>
<item>MultiWindow</item>
<item>Location</item>
<item>Sync</item>
</string-array>
after :
thats it, then recompile! ​
7. HOW TO REMOVE THE BRIGHTNESS BAR :
Click to expand...
Click to collapse
res/layouts
tw_status_bar_expanded.xml
find :
Code:
<LinearLayout android:orientation="vertical" android:id="@id/brightness_controller" android:background="#00000000" android:layout_width="fill_parent" android:layout_height="56.0dip">
replace the
Code:
android:layout_height="56.0dip"
with
Code:
android:layout_height="0.0dip"
recompile ​
8. HOW TO CHANGE STATUS BAR BACKGROUND :
Click to expand...
Click to collapse
res/drawable-hdpi
this is the easiest way.
replace the notification_panel_bg.9.png with any of your preferred image with resolution of 480x800.
but before that dont forget to make all toggle background to be transparent.​well, these are several ways that you can make it done :
1) this is the step that i always use to make change the background.
- decompile the apk.
- go to the res/drawable-hdpi folder.
- find the notification_panel_bg.9.png.
- open it with any of your preferred photo editor.
- resize the image to 482x802 (so that the other 2x2 pixel will leave for .9patch).
- open the image that you want to make as background (copy it)
- paste it into the notification_panel_bg.9.png that you have resized.
- draw the whole 2x2 with black line #000000.
- save the image.
- recompile.​
2) this steps is much easier, but i dont recommend. sometimes it failed.
- decompile the apk.
- recompile the apk.
- go to build/apk/res/drawable-hdpi.
- find the notification_panel_bg.9.png
- replace with your preferred image. (but dont forget to name the image with the same name include .9)
- build the apk again.
- your finished apk will be in dist folder.​
3) this is the safest way i guess but always success.
- decompile the apk.
- go to res/layout folder.
- find tw_status_bar_expanded.xml
- in that xml, find android:background="@drawable/notification_panel_bg".
- change that notification_panel_bg with any name. example android:background="@drawable/mybackground".
- save the xml.
- then, go to res/drawable-hdpi folder.
- place your image named "mybackground".
- compile the apk.​
9. HOW TO MAKE THE BUTTON AND NOTIFICATION TRANSPARENT :
Click to expand...
Click to collapse
res/layouts
tw_status_bar_expanded.xml
find :
all
Code:
android:background="#something"
in the xml the change the "#something" with "#00000000".
change ff value to (00 -> 100% transparency, 3f -> 75% transparency, 7f -> 50% transparency, bf -> 25% transparency)
The other value (1e1e1e) is RBG for grey color, if you want it black it will be (000000).
So:
#00000000 - black with 100% transparency
#3F000000 - black with 75% transparency
#7F000000 - black with 50% transparency
#BF000000 - black with 25% transparency
this post originally posted at http://forum.xda-developers.com/showthread.php?t=2078585 by majdinj (hit thanks to him )
Click to expand...
Click to collapse
then go to SystemUI\smali\com\android\systemui\statusbar\phone
PhoneStatusBar.smali
- find -0x100 (there will be just two of it in that smali)
- change both to 0x0 (0=zero)
- save smali.
(that will make the notification bar transparent).​
10. HOW TO MAKE TRANSPARENT BACKGROUND :
Click to expand...
Click to collapse
res/layout
tw_status_bar_expanded.xml
find :
Code:
android:id="@id/notification_panel" android:background="@drawable/notification_panel_bg"
change the "@drawable/notification_panel_bg" to "#00000000" or your preferred transparent range. Then, recompile ​
11. HOW TO REMOVE THE TEXT AND TOGGLES STATUS :
Click to expand...
Click to collapse
res/layout
tw_quick_setting_button.xml
find :
Code:
<ImageView android:layout_gravity="center" android:id="@id/btn_image" android:layout_width="fill_parent" android:layout_height="60.0dip" android:layout_marginTop="4.0dip" />
1. change the android:layout_height="60.0dip" to android:layout_height="90.0dip".
2. change the android:layout_marginTop="4.0dip" to android:layout_marginTop="0.0dip"
then in the same xml.
find :
Code:
<TextView android:textSize="@dimen/quick_setting_button_text_size"
at the same line, you'll see android:textColor="blablabla", change it to android:textColor="#00000000".
and android:layout_height="blabla.bladip" to android:layout_height="0.0dip"
also at the same xml.
find :
Code:
<ImageView android:layout_gravity="center" android:id="@id/btn_status_image"
.
change all the padding to be like mine :
HTML:
<ImageView android:layout_gravity="center" android:id="@id/btn_status_image" android:paddingLeft="0.0dip" android:paddingTop="0.0dip" android:paddingRight="0.0dip" android:paddingBottom="0.0dip" android:layout_width="fill_parent" android:layout_height="0.0dip" android:scaleType="fitXY" android:drawable="@drawable/tw_quick_panel_off" />
all this steps will make the size of the toggle bigger, remove the toggles text, and remove the toggles status.
then go to :
res/values
dimens.xml
find :
Code:
<dimen name="quick_setting_button_
there will be 7 lines of it in that xml.
change the line to be just like mine :
HTML:
<dimen name="quick_setting_button_height">90.0dip</dimen>
<dimen name="quick_setting_button_image_height">90.0dip</dimen>
<dimen name="quick_setting_button_text_height">0.0dip</dimen>
<dimen name="quick_setting_button_text_size">0.0dip</dimen>
<dimen name="quick_setting_button_status_height">0.0dip</dimen>
<dimen name="quick_setting_button_status_padding">2.0dip</dimen>
<dimen name="quick_setting_button_margin_top">0.0dip</dimen>
next steps :
- make your own toggle images with resolution of 80x100 or 90x110 or mine is 90x150. ( just any resolution that fit your toggle when displayed).
- it doesn't matter because you already fix the dimension of the toggle display. The point of creating new big toggles is not to make the display stretched or narrowed.
final steps:
res/layout
tw_status_bar_expanded.xml
find :
Code:
<com.android.systemui.statusbar.policy.quicksetting.QuickSettingPanel android:orientation="horizontal" android:id="@id/quicksetting_container" android:layout_width="wrap_content" android:layout_height="wrap_content"
- in that line you'll see android:divider="@bla/blablabla" change it to android:divider="#00000000".
(that will remove the divider between the toggles)
then in the same xml, find :
HTML:
<HorizontalScrollView android:id="@id/quicksetting_scroller" android:scrollbars="none" android:layout_width="wrap_content"
edit the android:layout_height= to android:layout_height="90.0dip".
finish, recompile!
this is how it will look like :
​
12. HINT HOW TO EDIT IMAGE WITHOUT GETTING ERROR! :
Click to expand...
Click to collapse
1) ONLY EDIT the .9patch images before recompile the apk!
HOW TO EDIT IT??
- use the Better Draw9Patch to edit .9patch.
- there are many TUT for that..but i will put it in this TUT later.
- ONLY EDIT THE .9patch images in res/ (which folder it belong) before recompile!
2) EDIT NON-.9patch images after you recompile the "HOW TO EDIT IT" above.
- you can edit all of the NON-.9patch images FREELY in build/res/apk/ (which folder it belong).
- the folder you'll get after you recompile the apk.
- BUT DO NOT TOUCH ANY .9patch images in there!
​
13. sample toggles for ALL!! :
Click to expand...
Click to collapse
want other cool toggles???
click this link!!
sample_toggles_1 :
Click to expand...
Click to collapse
sample_toggles_2 :
Click to expand...
Click to collapse
sample_toggles_3 :
Click to expand...
Click to collapse
sample_toggles_4 :
Click to expand...
Click to collapse
sample_toggles_5 :
Click to expand...
Click to collapse
DOWNLOAD LINK:
sample_toggles_1
sample_toggles_2
sample_toggles_3
sample_toggles_4
sample_toggles_5
Click to expand...
Click to collapse
link updated : 12 MAY 2013
and here is the base for all my icons :
just put the icon inside that toggle base
download link :
base_sample_toggle_1
base_sample_toggle_2
want other cool toggles???
click this link!!
just download it and try to mod yourself with my toggles
the toggles is able to use if you use all my dimension that i have modded in the tut. (TUT #11)
dont forget to hit thanks if you using this toggles for your mod. give me credits is good enough.
​
14. HOW TO CHANGE ANY BACKGROUND WITH OWN IMAGE :
Click to expand...
Click to collapse
In this TUT#14, you can change any part with any image by using the .9patch. png.
its easy, you just need to change the color code in the xml for example android:background="#colorcode" to android:background="@drawable/your_image".
And then you need to create an .9.png image then put it into res/drawable-****.
the **** means what is your device dpi.
the size of the image is depend with the part that you want to change, it is your creativity.​
before :
after :
Click to expand...
Click to collapse
15. How To Sign Your Apk After Modding! (IMPORTANT)
Click to expand...
Click to collapse
- recompile the apk, then the apktool will create new folder named "build".
- open the build/apk/ , copy and replace the original META-INF folder and AndroidManifest.xml into it. (for signing)
- recompile again by using command :
Code:
apktool b SystemUI
- your modded file will be in "dist" folder.
Click to expand...
Click to collapse
P.S : ALWAYS REPLACE THE ORIGINAL META-INF FOLDER AND AndroidManifest.xml from the ORIGINAL APK into the MODDED APK AFTER BUILD! or else you got bootloop.​
references :
- http://forum.xda-developers.com/showthread.php?t=2078585 by majdinj.
- http://forum.xda-developers.com/showthread.php?t=1714481 by emompong.
- http://forum.xda-developers.com/showpost.php?t=35294425&postcount=172 by devabhishek.
credits to :
- Koulis2000 because teach me a lot of things especially for the xml and .9patch, thanks dude!
- bobfrantic also share what he knows to me , thanks a lot!
Click to expand...
Click to collapse
let me know if i forgot place your name as credit, im just normal human being :fingers-crossed: and sorry for that.
hit thanks to them, their post really help me a lot
there will be more TUT after this..maybe how to theme framework-res.apk
there must be something more i left, but i will put it later when i remember what it is.
if you got something more to ask, dont be shy to PM me.. i'll be happy to help..
(only if im able to!)​
IF YOU HAVE SOMETHING THAT YOU KNOW FOR HOW TO MODDING SYSTEMUI.APK, AND IT IS NOT INCLUDED IN THIS TUT, PLEASE SHARE IT HERE
SO THAT MAYBE THIS TUT WILL HELP MANY PEOPLE WITH MANY VERSION OF DEVICES, I WISH THIS THREAD WILL BECOME THE PERFECT PLACE FOR PEOPLE WHO WANT TO LEARN ABOUT HOW TO THEME SYSTEMUI.APK ​
Nice thread, can you also add how to hide text in the toggles in the status pull down? Also here is a great little program people can use for determining color codes like #cecece to change colors. windows only though
View attachment color2html.zip
bobfrantic said:
Nice thread, can you also add how to hide text in the toggles in the status pull down? Also here is a great little program people can use for determining color codes like #cecece to change colors. windows only though
View attachment 1826979
Click to expand...
Click to collapse
i put the site i refer already
anyway, thanks..
will update the thing you said for next update..
Re: [TUT][JB] HOW TO THEME SystemUI.apk for newbie!
Nice thread that can really help out all the noobs out there. :thumbup:
Sent from my GT-I9070 using xda premium
can i use apk multi tool to do this as it gives all xml and icon files easily..??
is both same ??
thx for tutorial.
Re: [TUT][JB] HOW TO THEME SystemUI.apk for newbie!
Great tutorial, all well explained. Thanks
Sent from my GT-I9070
ravijani said:
can i use apk multi tool to do this as it gives all xml and icon files easily..??
is both same ??
thx for tutorial.
Click to expand...
Click to collapse
yes..just the same..but for apkmulti tool always set compression level to 0..(option 21).
and dont forget to replace the original META folder and AndroidManifest to the modded apk after recompile..
frzek said:
Great tutorial, all well explained. Thanks
Sent from my GT-I9070
Click to expand...
Click to collapse
hope this thread help a lot of people
Epic tut... but is apktools necessary? I use WinRAR.
R: [TUT][JB] HOW TO THEME SystemUI.apk for newbie!
panda00 said:
Epic tut... but is apktools necessary? I use WinRAR.
Click to expand...
Click to collapse
Yes for modify xml files. With winrar you can change the png only
Inviato dal mio GT-I9070 con Tapatalk 2
KINGbabasula said:
Yes for modify xml files. With winrar you can change the png only
Inviato dal mio GT-I9070 con Tapatalk 2
Click to expand...
Click to collapse
How come? If you use winrar, you can open xml files and edit them...
panda00 said:
How come? If you use winrar, you can open xml files and edit them...
Click to expand...
Click to collapse
you need to decode the xml so it can be read by any xml reader..with winrar you cant read the xml..
thats why you need the apktool to decode the xml..
Re: [TUT][JB] HOW TO THEME SystemUI.apk for newbie!
The finest work. Tnx a lot
Enviado desde mi GT-I9070 usando Tapatalk 2
Одг: [TUT][JB] HOW TO THEME SystemUI.apk for newbie!
Great tut.
Послато са GT-I9070 користећи Тапаток 2
xessus said:
The finest work. Tnx a lot
Enviado desde mi GT-I9070 usando Tapatalk 2
Click to expand...
Click to collapse
shut_down said:
Great tut.
Послато са GT-I9070 користећи Тапаток 2
Click to expand...
Click to collapse
thanks a lot for the compliment, friend
Re: [TUT][JB] HOW TO THEME SystemUI.apk for newbie!
Thanks, after my exams this week I'm definitely going to theme some!
Sent from my GT-I9070 using xda app-developers app
hey guys
why the 'command' to be like this when i recompile the SystemUI?
i just "MAKE 1% BATTERY INCREMENT" , can you tell me where is my mistake? thks before
sandrin0 said:
Thanks, after my exams this week I'm definitely going to theme some!
Sent from my GT-I9070 using xda app-developers app
Click to expand...
Click to collapse
goodluck
droid_bazzline02 said:
hey guys
why the 'command' to be like this when i recompile the SystemUI?
i just "MAKE 1% BATTERY INCREMENT" , can you tell me where is my mistake? thks before
Click to expand...
Click to collapse
that is not the problem..scroll up more, the exact problem will shown at the several lines after you hit the the build command..
my guess is you forgot to put the battery set completely in the hdpi folder..
joehanh88 said:
goodluck
that is not the problem..scroll up more, the exact problem will shown at the several lines after you hit the the build command..
my guess is you forgot to put the battery set completely in the hdpi folder..
Click to expand...
Click to collapse
I've checked it again, then after i try to recompile the SystemUI again, the dist folder was not out.
why guys?
droid_bazzline02 said:
I've checked it again, then after i try to recompile the SystemUI again, the dist folder was not out.
why guys?
Click to expand...
Click to collapse
because you got error while decompile..

[GUIDE][MOD][THEMING] How To Make Settings become Lollipop CM12 Themes Look A Like

Hello XDA, Today I Will share Guide for Any AOSP ROM Settings to become Lollipop CM12 Themes Look a Like!
Hope it will work too in your guys device, i create this guide on JB 4.2.2 Mediatek Mt6589 device.
I'm not responsible for any damage done to your device with this guide
Thanx
Click to expand...
Click to collapse
​
(Part I) Remove App Icon on ActionBar​
{
"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"
}
Prepare
- Know how to Decompile-Recompile
- Settings.apk
Guides
- Decompile Settings.apk
- go to folder \res\values
- open Styles.xml
- add on styles.xml above </resources> add this code
HTML:
<style name="Mole.Theme" parent="@android:style/Theme.Holo">
<item name="android:actionBarStyle">@style/Mole.Holo.Bar</item>
</style>
<style name="Mole.Holo.Bar" parent="@android:style/Widget.Holo.ActionBar">
<item name="android:icon">@drawable/trans_yanu</item>
</style>
<style name="Mole.Bar" parent="@android:style/Widget.ActionBar">
<item name="android:icon">@drawable/trans_yanu</item>
<item name="android:paddingTop">0.0dip</item>
<item name="android:paddingBottom">0.0dip</item>
<item name="android:paddingStart">0.0dip</item>
<item name="android:paddingEnd">0.0dip</item>
</style>
- still in values folder
- make one new files named drawables.xml
- write on drawables.xml this code
HTML:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item type="drawable" name="trans_yanu">#00000000</item>
</resources>
- now open AndroidManifest.xml
- on AndroidManifest.xml search android:theme="@style/Theme.Holo"
- change with android:theme="@style/Mole.Theme"
- so will look like this
HTML:
<application android:hardwareAccelerated="true" ....... android:theme="[B]@style/Mole.Theme[/B]" ........ >
- Recompile and Sign
- Push to \system\app with right permission (rw,r,r)
- reboot
Remove App Icon ActionBar in all Apps (optional)​
Prepare
- know how to Decompile Recompile
- framework-res.apk
Guides
- decompile framework-res.apk
- go to folder \res\values\
- open styles.xml
- find
HTML:
<style name="Widget.Holo.ActionBar" parent="@style/Widget.ActionBar">
and
HTML:
<style name="Widget.ActionBar" parent="@style/Widget">
- add above </style>
HTML:
<item name="icon">@drawable/trans_yanu</item>
- so it will look like this
HTML:
</style>
<style name="Widget.Holo.ActionBar" parent="@style/Widget.ActionBar">
<item name="progressBarStyle">@style/Widget.Holo....
.......
.......
.......
<item name="icon">[B]@drawable/trans_yanu[/B]</item>
</style>
<style name="Widget.Holo.Light" par...
- watch every space and make sure the code sructure still on track
- next open drawables.xml still in values folder
- add above </resources>
HTML:
<item type="drawable" name="trans_yanu">#00000000</item>
- Save - Decompile - Push Reboot
- Done
(Part II) Add Float Effect Background Menu And Child Menu Settings
Add Float Effect Background Menu And Child Menu Settings
Prepare
- Know How to Decompile Recompile
- Finished Part I
- Disable Signature System
- Settings.apk
- framework-res.apk
Guides
- Decompile Settings.apk
- go to folder \res\values\
- open styles.xml
- add this above </resources>
HTML:
<style name="Mole.ListSeparator" parent="@*android:style/Widget.TextView.ListSeparator">
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/merah_yanu</item>
<item name="android:background">@drawable/duawarna_yanu</item>
<item name="android:paddingTop">25.0dip</item>
<item name="android:paddingBottom">@dimen/yanu_head_padd</item>
<item name="android:textAllCaps">true</item>
<item name="android:paddingStart">@dimen/yanu_head_padd</item>
</style>
- add this code on "Mole.Theme"
HTML:
<item name="android:listSeparatorTextViewStyle">@style/Mole.ListSeparator</item>
- so it will look like this
HTML:
<style name="Mole.Theme" parent="@*android:style/Theme.Holo">
<item name="android:actionBarStyle">@style/Mole.Holo.Bar</item>
<item name="android:listSeparatorTextViewStyle">@style/Mole.ListSeparator</item>
</style>
- still on folder values
- open dimens.xml
- add above </resources>
HTML:
<dimen name="yanu_head_padd">17.0dip</dimen>
- open colors.xml
- add above </resources>
HTML:
<color name="merah_yanu">#fff44336</color>
<color name="gray_yanu">#ff2a2a2a</color>
<color name="lightgray_yanu">#ff191919</color>
<color name="bgmenu_yanu">#502a2a2a</color>
- open folder \res\drawable
- make one xml file and named it duawarna_yanu.xml
- write inside duawarna_yanu.xml with these code
HTML:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:height="9.0dip">
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00000000" />
</shape>
</item>
<item android:top="9.0dip">
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/gray_yanu" />
</shape>
</item>
</layer-list>
- save
- Recompile - sign - push
- Reboot
Edit Background list​- still on Settings.apk
- go to folder \res\layout\
- open preference_header_item.xml
- compare these code, looks on android:background and android:layout_margin
- if you guys os JB 4.2.1 maybe can direct paste these code
HTML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:gravity="center_vertical" android:background="[B]@color/lightgray_yanu[/B]" android:paddingRight="?android:scrollbarSize" android:layout_width="fill_parent" android:layout_height="wrap_content" android:minHeight="48.0dip"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:layout_gravity="center" android:id="@id/icon" android:layout_width="@dimen/header_icon_width" android:layout_height="wrap_content" android:layout_margin="[B]@dimen/yanu_head_padd[/B]" />
</LinearLayout>
<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="6.0dip" android:layout_marginRight="6.0dip" android:layout_marginBottom="6.0dip" android:layout_weight="1.0">
<TextView android:textAppearance="?android:textAppearanceMedium" android:ellipsize="marquee" android:id="@*android:id/title" android:fadingEdge="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" />
<TextView android:textAppearance="?android:textAppearanceSmall" android:ellipsize="end" android:id="@*android:id/summary" android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxLines="2" android:layout_below="@*android:id/title" android:layout_alignLeft="@*android:id/title" />
</RelativeLayout>
</LinearLayout>
- save
- open preference_header_switch_item.xml
- compare againt, looks on android:background and android:layout_margin
HTML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:gravity="center_vertical" android:background="[B]@color/lightgray_yanu[/B]" android:paddingRight="?android:scrollbarSize" android:layout_width="fill_parent" android:layout_height="wrap_content" android:minHeight="48.0dip"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:layout_gravity="center" android:id="@id/icon" android:layout_width="@dimen/header_icon_width" android:layout_height="wrap_content" android:layout_margin="[B]@dimen/yanu_head_padd[/B]" />
</LinearLayout>
<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="2.0dip" android:layout_marginTop="6.0dip" android:layout_marginRight="6.0dip" android:layout_marginBottom="6.0dip" android:layout_weight="1.0">
<TextView android:textAppearance="?android:textAppearanceMedium" android:ellipsize="marquee" android:id="@*android:id/title" android:fadingEdge="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" />
<TextView android:textAppearance="?android:textAppearanceSmall" android:ellipsize="end" android:id="@*android:id/summary" android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxLines="2" android:layout_below="@*android:id/title" android:layout_alignLeft="@*android:id/title" />
</RelativeLayout>
<Switch android:layout_gravity="center" android:id="@id/switchWidget" android:padding="8.0dip" android:focusable="false" android:clickable="true" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
- save, recompile - sign - push
Makes float effect on Child menu Settings
​- still on Settings.apk
- go to folder \res\layout
- open and prepare to edit these files too
preference_icon.xml
preference_memoryusage.xml
preference_radiobutton.xml
preference_settings_checkbox_widget.xml
preference_sim_info.xml
preference_sim_info_checkbox.xml
Click to expand...
Click to collapse
- add this code on each Parent layout (lines #2)
HTML:
android:background="@color/bgmenu_yanu"
- save - recompile -push
- reboot
- next we will edit framework-res.apk too
- decompile framework-res.apk
- go to folder \res\layout
- open and prepare to edit these files too
preference_child.xml
preference_child_holo.xml
preference_header_item.xml
preference_holo.xml
preference_information.xml
preference_information_holo.xml
Click to expand...
Click to collapse
- againt add this code on those parent layout
HTML:
android:background="@color/bgmenu_yanu"
- go to folder \res\values
- open colors.xml
- add above </resources>
HTML:
<color name="bgmenu_yanu">#502a2a2a</color>
- save - recompile - push
- reboot
(Part III) Add dual layer background and edit Side padding
(Part III) Add dual layer background and edit Side padding​
​Prepare
- Know how to decompile recompile apk
- Disabled signature system
- Finished Part I dan Part II
- Settings.apk
- framework-res.apk
Guides
- Decompile Settings.apk
- make sure you have finished tutorial part II
- go to folder res\drawable\
- make 2 new xml files with name duawarna_yanu_cover.xml and duawarna_yanu_cover_anak.xml
- write in duawarna_yanu_cover.xml
HTML:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:height="9.0dip">
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/teal_yanu" />
</shape>
</item>
<item android:top="133.0dip">
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/dark_yanu" />
</shape>
</item>
</layer-list>
- write in duawarna_yanu_cover_anak.xml
HTML:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:height="9.0dip">
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@*android:color/teal_yanu" />
</shape>
</item>
<item android:top="73.0dip">
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@*android:color/dark_yanu" />
</shape>
</item>
</layer-list>
- save
- go to folder \res\values\
- open styles.xml and add this script bellow (name="Mole.Theme")
HTML:
<style name="Mole.Theme" parent="@*android:style/Theme.Holo">
....
....
<item name="android:windowBackground">@drawable/duawarna_yanu_cover</item>
</style>
<style name="Mole.Theme.Anak" parent="@*android:style/Theme.Holo">
<item name="android:windowBackground">@drawable/duawarna_yanu_cover_anak</item>
<item name="android:listSeparatorTextViewStyle">@style/Mole.ListSeparator</item>
</style>
- open colors.xml
- add these two color value
HTML:
<color name="dark_yanu">#ff111111</color>
<color name="teal_yanu">#ff00695c</color>
</resources>
- save
- open AndroidManifest.xml
- change these 3 android:theme look like this
HTML:
<application android:theme="[B]@style/Mole.Theme.Anak[/B]" android:label="@string/settings_label" android:icon="@mipmap/ic_launcher_settings" android:taskAffinity="" android:hardwareAccelerated="true" android:uiOptions="splitActionBarWhenNarrow" android:supportsRtl="true">
<activity android:theme="[B]@style/Mole.Theme[/B]" android:label="@string/settings_label_launcher" android:name="Settings" android:taskAffinity="com.android.settings" android:launchMode="singleTask" android:configChanges="mcc|mnc|keyboardHidden|screenSize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<action android:name="android.settings.SETTINGS" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:theme="[B]@style/Mole.Theme.Anak[/B]" android:name=".SubSettings" android:taskAffinity="com.android.settings" android:configChanges="mcc|mnc|keyboardHidden|orientation|screenSize" android:parentActivityName="Settings" />
- save
- recompile - sign
- Settings done
- decompile framework-res.apk
- go to folder \res\values\
- open dimens.xml
- find and change these 2 value with these
HTML:
<dimen name="preference_fragment_padding_side">9.0dip</dimen>
<dimen name="preference_screen_header_padding_side">9.0dip</dimen>
if you dont want any side padding just make 0dp atau 0.0dip
- save - recompile - sign
- push Settings.apk and framework-res.apk to each system folder
- Reboot and done
Thanx
- Kohlewrrk
- giannisgx89
- Gustavo F. Santos
for inspiration
- stackoverflow
- maaadgroup
- CatatanDroid Blog Tips Apps Game Android
- Mediatek Android Art and Dev Reborn Facebook Group
Pertamax om
Any feedback guys?
@zhalx
Thanks for this Awesome
arun.negi004 said:
@zhalx
Thanks for this Awesome
Click to expand...
Click to collapse
you're welcome brother.
did it work on your device?
nice share om yan
zhalx said:
you're welcome brother.
did it work on your device?
Click to expand...
Click to collapse
Following your Guide right Now..
kingdj said:
nice share om yan
Click to expand...
Click to collapse
Thanx for visited om Agil. _/|\_
arun.negi004 said:
Following your Guide right Now..
Click to expand...
Click to collapse
Good Luck then.
Great tutorial om :highfive:
aldiandrew said:
Great tutorial om :highfive:
Click to expand...
Click to collapse
Thanks om :good:
Nice guide sir....will this work on kitkat ?
Saawi_singh said:
Nice guide sir....will this work on kitkat ?
Click to expand...
Click to collapse
yes, it works on kitkat too
ok sir...i was trying this bt it gives error...i'm trying this guide on lollifox...it is already lollpop themed so it have not any icon on action bar so followed 2nd part bt i changed the Mole.Theme code to mine androidmanifest.xml code..is that ok or i doing wrong?
Saawi_singh said:
ok sir...i was trying this bt it gives error...i'm trying this guide on lollifox...it is already lollpop themed so it have not any icon on action bar so followed 2nd part bt i changed the Mole.Theme code to mine androidmanifest.xml code..is that ok or i doing wrong?
Click to expand...
Click to collapse
it's oke sir, you can change any name of it as long as each of that have proper values.
Thanks.the mod works on my device
My setting has tabs this will work on mine too?
My device's default setting text was black now it is unreadable how to fix?
I dont want to change text color but that new black thing turned into white how to fix?

Categories

Resources