This tutorial will not include info on code, since that information is universal and there are tutorials everywhere already.
- an example of what you can do with this is here:Kronic BlueMod 4.3
- with this knowledge you can create a UI look that NOBODY else has, if you are so inclined, personally i like to share my work but i understand people who like to have unique stuff
this was done to H0!N0! v20f bell debloated/deodex rom.
- this tutorial is meant for ICS mod's but most of the concepts can be applied to other roms and android versions, however small things like file names and locations could change
requirements.
- common sense
- 7-zip installed (winrar can work too but i prefer 7-zip)
- apktool installed (which also requires jdk's etc, there is plenty of information available on how to install this already)
- here is the version of apktool i used and worked with v20f
- apktool Jar file thx to brut.alll
- paint.net (an open source paint program that can deal with transparency and .9.png files.
- working adb or some type of program to push and pull files from phone.
- windows environment (i used win8 64bit.)
Lesson 1 - setting up work environment.
the first thing you want to do when working with a new rom is install it's framework to apktool. This will help apktool know how to work with the files you are going to work with ( in lamens terms ) The command for install framework is "if".
the framework files are found in /system/framework/
- pull framework-res.apk and lge-res.apk, i also install systemui.apk too but i don't think this is needed. (systemui is found in /system/app/)
- make sure your command prompt is in the correct working directory then run the following commands
apktool if framework-res.apk
" " " lge-res.apk
" " " SystemUI.apk
it should install successfully and if you navigate to /users/yourname/framework/
you should see 1.apk 2.apk 127.apk (1 and 2 are the real framework files 127 is systemui and won't be there if you didn't bother installing it)
ok now apktool is setup.
Lesson 2 Repacking system files.
- once you have all the files for your new ****.apk system file, highlight them all, right click, go to 7-zip header, and select add to archive.
- set archive format: zip
- set compression level: store (this is 0 compression which is the best performance)
- set update mode: add and replace files
- once done, packing rename the file to the appropriate name with .apk extension.
- zipalign the file before adding it to a flashable zip or pushing to phone.
- flashable zip is recommended especially when pushing framework-res.apk to phone due to the fact you are replacing the framework app of the system it's better if the system is not running.
- always make a backup flashable with your original files in case you made a mistake.
there is a cool version of apktool that helps new users make flashable zips and zipalign files here:
Auto apktool - thanks to xavierjohn22 and brut.alll for this.
you can replace the files in a flashable zip with 7-zip on the fly by right click open archive, and drag and drop method.
lesson 3 - changing icons.
- this is the easiest part of UI moding if you know where the files are for the icons you want to change, just about anyone can do this, you don't even need to decompile.
- nitro hd uses apk/res/drawable-xhdpi/ resolution folder. so this is the folder you should edit files in, the other drawable folders don't change much.
- open the apk with 7-zip by right clicking it and using 7-zip menu, either extract the whole apk or just the res/drawable-xhdpi/ to view/edit files or you can use your decompiled folder if you are not just editing icons and are planning on rebuilding.
- as a general rule icons on the left side of the status bar are usually controlled by framework-res.apk and icons to the right side are controlled by SystemUI.apk
- for example adb status bar icon appears on left so it's found in framework-res.apk (even though the icon is also in the systemUI.apk that is not what will change the status bar icon.)
- wifi signal and battery etc, are on the right side so look in SystemUI.apk to change them.
- to edit the icons just right click the .png and open with paint.net the square checkerboard means transparent if you've never used paint.net before.
- there are multiple sets of icon styles so be sure you are editing the one your current rom is using (for example signal icons have about 5 styles) if you aren't sure which one you can change them all or do trial and error.
- when repacking the apk after icon changes, it is recommended that you repack your apk like done in lesson 2, although if you drag and drop into the archive and overwrite old files that should work too, although if you do it that way you should atleast zipalign it after.
Lesson 4 - .9.png files
- these files are used for making buttons and stretchable images, it's hard to explain and i'm by no means an expert on them, but when i edit them i only want to change color. I have had a few not work and you will get errors during compile if you mess up the formatting that's already done, this is some type of handle that tells the OS how to stretch the image i think. when i wasn't careful i got errors, when i just use the paint bucket and change the color and then save it, it usually works. if you want to change more there are lots of other guides that have better information. i recommend if you edit these you recompile your apk after every 2 or 3 files just to make sure there are no errors, this will make sure u dont edit a bunch then have trouble identifying which one caused the issue.
- some of the files on our phone that you might want to change the colors of are backgrounds, title bars, status bar pulldown menu buttons, etc. they are typically backgrounds that have different colors, sometimes it's hard to figure out which they are because their dimensions are not like how they show up on the phone, due to stretching. for instance a title bar can look like a vertical line | <--- like that because it is stretched to fill the screen horizontally, and usually it will be slightly faded and that fade will continue across which ever way it is stretched.
- you will also notice that divider bars show up as dots, in a .9.png, on these i just use a pencil and change the color of the CENTER of the dot only. if there is more than one pixel for the same color i just do it to each pixel, usually its 1 i think. (i think paint.net changed something since i updated i can use paint bucket in these and it seems to work)
some files you can look for that are useful to change are.
i will attach some example files that i blacked out like the example i linked at the beginning. if you want to see more just go to that link i posted and download the zip, extract the systemui.apk from it, unpack the apk, and you can see all the files and steal my painfully made homemade indicator that is 200+ file edits.
SystemUI.apk/res/drawable-xhdpi/
- indi_noti_btn_edit_normal.9.png
- indi_noti_btn_pressed.9.png
- indi_noti_progressbar_.normal.9.png
- indi_noti_title_list_divider.9.png
- These are just examples, there are some in framework-res too, usually the names describe what they do, you can try searching your folders for .9.png if you can't find what you are looking for, on different roms the names may be different, and it is possible for them to be in other drawable folders, but usually check xhdpi first as a general rule. you will also find statusbar backgrounds are usually not.9. files so you can put pictures and stuff in them just try to keep dimensions, it will get stretched to fit the status bar on most roms i believe.
Lesson 5 XML editing.
- install notepad++ it's free and its a must have unless you have another text editor designed to handle xml that you prefer.
- open command prompt, you can run in admin mode if you get file write errors or anything that will usually fix problems.
- navigate to folder where apktool is installed unless you have environment variables setup to handle apktool commands from other folders.
- make sure your SystemUI.apk and framework-res.apk are in the same folder, if not copy those files to that folder. for SystemUI.apk, open it with 7-zip and extract the file "classes.dex" to a folder for safe keeping, once that is done, delete it from the archive, as it will cause decompile errors. if you are running a v20c or earlier, you can try skipping this step because baksmali might work for you. if you want to edit classes.dex skip to lesson 6.
- once ready, go back to command prompt, you should still be in your apktool folder. type this.
- apktool d filename.apk
- it should decompile, if u get errors you can try another version of apktool or you can google the errors or post them here and people will try to help.
- it will create a folder named SystemUI and framework-res respectively, or the name of whatever apk you decompile. some other system files have classes.dex that has to be deleted for decompile to work. always back it up though cuz you need to add it back in later. framework-res doesn't have it on most roms i think.
- now you can open the xml's with notepad++ and edit them, save them and recompile. you can also edit images at this time if you wish in the /res/drawable-xhdpi/ folder. IF YOU MAKE MISTAKES IN THIS STEP YOU WILL GET COMPILE ERRORS, so backup original files if you are not confident in what you are doing. i can't list every xml edit here because there are millions of variations you can do, but these xml files control a number of things, from layouts to text color codes etc. variable names, calls to smali code.
- some guidelines are here.
/layout/
- status_bar.xml - edits the system status bar layout, these are fairly universal so if you want to edit this, lets say you want to move the clock to the center, just search the forums for how to center clock status_bar.xml or something, and you will find some example code's you can learn from. this goes for the others too, but here is an example.
/layout/status_bar_tracking.xml
- remove the line that starts with com.android.systemui.xxxxxxx.carrierlabel or something to that effect.
- add this line
- NOTE: for some reason the i can't make the code show up properly for the lines with textAppearance="atstyle/variablename" but that is how it should show up but replace at with the symbol for email at. xda site turns the symbol into a mention for some reason
Code:
<TextView android:textAppearance= [user=262514]@style[/user]/TextAppearance.StatusBar.Title" android:gravity="center" android:layout_gravity="bottom" android:paddingBottom="20.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="ADD CUSTOM TEXT HERE" />
make sure that you don't edit anything from the other lines, save the file. This will add text to replace the old carrier label, whatever you want, you can also add other things here like time i think, but i haven't done it before. the textappearance arguement will set the textappearance so if you want to copy the color or style of something else, just read the file that it contains and call the same style as it does, for example you can open your status_bar.xml and copy the textappearance that calls the clock, if u want it to appear like the clock does (color/font etc)
- another important layout file is
/layout/status_bar_expanded.xml
- this file controls the expanded status bar, obviously.
- in notepad++ you can add stuff to the title above the notificatations, by adding it between insert your additions after the line that says
Code:
<RelativeLayout android:id="@id/setting_layout" android:tag="NO_R2L" android:background="@drawable/notification_header_bg"
...etc
- i added the clock here, after the date, so i skipped down one more line, made a new line and added this code:
Code:
<com.android.systemui.statusbar.policy.Clock android:textAppearance= [user=262514]@style[/user]/TextAppearance.StatusBar.Date" android:gravity="left|center" android:id="@id/clock" android:paddingLeft="3.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:layout_toRightOf="@id/date" />
- you also have to make sure the arguements "android:layout_toRightOf="@id/date" is the right id, you can tell which id is which because they are set in each line. you also have to check what used to be beside the date, and fix that too. so look for the text (you can use ctrl f to search) android:layout_toRightOf="@id/date" except not the one you just added, it will probably be the next line for me it's this.
Code:
<View android:id="@id/settings_divider" android:background="@drawable/ic_divider_blue_holo_dark" android:layout_width="0.6700001dip" android:layout_height="16.0dip" android:layout_marginLeft="8.0dip" android:layout_marginTop="15.0dip" android:layout_toRightOf="@id/date" />
- in this line, change "date" to "clock" without changing any other code this will make the divider appear to the right of the clock instead of ontop of it. if you make errors in this phase you can also get compile errors.
changing these layout files have endless possibilities, but this is how you do it, be careful though if you aren't confident make backups and compile often to check for errors, you can google most common errors and find help. or ask.
other things you can do in xml is change values of predefined variables, like colors, file calls, numbers for settings, boolean values, etc. for the purpose of theming focus on styles.xml and colors.xml first if you can't find what you want to change there check the same ones in framework-res/systemui or whatever you are in the corresponding app some apps call framework-res or system-UI and use the colors defined there
- to pick colors you can use Paint.net, go to more colors in color picker, find the color you want, to use it in xml put it in the following format
# aa bbbbbb aa -> transparency code 00 means transparent and ff means solid. you can lookup these codes on google for more specific values.
bbbbb-> is the code you get from Paint.net beside Hex: if it says for blue, 264AFF and i don't want it to be transparent, the color code i would use in xml is the follow "#ff264aff" where i have the letters in lower case and a # at the beginning, only have "" if they are there already, look at the preexisting code to determine, you can also change colors by changing what style something calls (change the @style) call to a style in the styles.xml that you want it to look like.
the integers.xml has some interesting things that are fairly self explanitory, or you can google them if you want to know them all i can't list everything.
- RECOMPILING ONCE YOU HAVE MADE YOUR XML EDITS.
- go back to command prompt in the correct work folder, that your SystemUI and framework-res folders are in.
type:
apktool b SystemUI.. youll see something like this. if you don't get errors.
W: could not find sources
I: checking whether resources has changed...
I: building resources...
then it will take some time to work, depending on cpu speed.
then youll see:
aapt: warning: string 'sp_dcm_gps_popup_body_NORMAL' has no default translation
or a combination of multiple errors like that about default translation, this is normal.
then youll see:
I: Building apk file...
this is good.
at this point type this line again:
apktool b SystemUI
this time it should be fast and no errors.
- YOU NOW HAVE YOUR COMPILED MODIFIED XMLS, to pack them up, navigate to apktoolfolder/SystemUI/dist/SystemUI.apk
open with 7-zip
extract the folders res, assets, and resources.arsc file to a folder called "done" or whatever name you wanna use, then add the original META-INF folder, AndroidManifest.xml file, and the classes.dex file you backed up from the original apk to the same "done" folder.
you should now have the files and folders like this
- assets
- META-INF
- res
- AndroidManifest.xml
- classes.dex
- resources.arsc
the assets, res and resources files, should be the new edited ones, and the classes meta and android files sould be originals, if u edited the smali then the classes.dex file is the edited one from that process.
if there was no classes.dex in the original file obviously you don't need it here.
at this stage, you pack your apk as per instructions in lesson 2.
Note: some SystemUI.apk files have some tricky compression (newer ones) that cause errors in apktool decompile process.
the error i kept getting was Exception in thread "main" java.lang.illegalArguementException: MALFORMED.
it's an instant error (the second you push enter) it happens, which led me to believe it's an unpacking error.
i found another clue when i tried to pull the classes.dex file out of the package with 7-zip and got a program freeze, had to end task it.
i found the solution when i downloaded the latest beta version of winrar and tried to work with the package, i was able to unpack classes.dex -----> progress.
i still got the error after deleting it and trying to decompile though. so i conlcuded that the androidmanifest.xml is also packed with strange compression (that only a very new zip utility will handle)
[fix] use winrar beta version to completely unpack every file, then repack everything except classes.dex, save that file for repacking after recompile. with 0 compression, store and replace (for this step you can go back to 7-zip) since the files are already unpack, you can let 7zip pack up the normal way, then rename the SystemUI.zip to .apk and decompile the file..... errorless =D.
this is a fix to decompile the SystemUI found in the V20F with new framework rom fond in the dev section.
lesson 6 is coming soon, smali editing.
i decided to delay smali editing, i am not good enough at it to teach, you can download jar files called smali and baksmali that you run using command lines in command prompt, such as
"java -jar baksmali.jar classes.dex" to decompile (usually goes into a folder called "out")
"java -jar smali.jar <foldername>" to recompile
omit the " " when input into command prompt.
once classes.dex is recompiled add it back into the apk, if u did your edit correctly you win, if not you will probably sit at lg screen, or the system will load and no change will occur, or some errors.
from what i understand smali code is unique but similar to closer to assembly languages like C or it's variations. i can't find alot of info on it i had done a couple small edits that i tried to copy from someone else but they partially worked because our smali's are so much differant than the people i'm trying to learn from, it was hard for me to learn anything. what little info i find would be better for you to learn from the same people i'm learning from until i have a better grasp which i can't see myself finding the time for anytime soon
i'm so close to having a full bluemod LGMms.apk 3 items i can't figure out how to change, have like 31 changed .. can't find the last 3
if anyone can figure out how to change the title bar backgrounds let me know, i tried like 5 differant ways and nothing worked i think it's set transparent in the smali and i don't know smali well enough to find it
by the way everyone i figured out how to mod lockscreen on LG stock roms, THEY ARE NOT located in framework-res like most roms, it's found in /system/app/lockscreen.apk if u need helping finding an xml for a specific lockscreen let me know
- RECOMPILING ONCE YOU HAVE MADE YOUR XML EDITS.
- go back to command prompt in the correct work folder, that your SystemUI and framework-res folders are in.
type:
apktool b SystemUI.. youll see something like this. if you don't get errors.
W: could not find sources
I: checking whether resources has changed...
I: building resources...
then it will take some time to work, depending on cpu speed.
then youll see:
aapt: warning: string 'sp_dcm_gps_popup_body_NORMAL' has no default translation
or a combination of multiple errors like that about default translation, this is normal.
then youll see:
I: Building apk file...
this is good.
at this point type this line again:
apktool b SystemUI
this time it should be fast and no errors.
Click to expand...
Click to collapse
I get to this part and all it does is create a build folder in the systemui directory.... nothing else.
mattman86 said:
I get to this part and all it does is create a build folder in the systemui directory.... nothing else.
Click to expand...
Click to collapse
interesting, i should have mentioned sometimes you don't have to build twice, but that might not have been the error anyways.
is there a dist folder after first build?
what version of apktool are you using?
i've never seen no dist folder except when the build doesn't complete.
are you sure that there wasn't an error that isn't a warning (the warning "no default translation x 2-4 is normal but if u have actual build errors that stopped the compile process there will be no dist folder, because dist is the LAST step in the process.
- if the xml you modded got compiled correctly, it's possible to impliment it by replacing the xml in the original apk with 7-zip, just check the xml in the build folder and if it's there u can try overwriting the original one in the original apk, we still need to get down to the issue with no dist though.
if you want you can try ziping the systemui directory you are trying to build, and post it here, i'll try compiling for you and see if i get errors, that way i can tell you if the problem is your apktool or an error in a mod you made.
if you do that i'll need your framework-res.apk and lge-res.apk, unless you are working on liquid nitro, i already have the framework for that rom installed if thats the case i just need the zipped systemui folder you are working on and i can see what's what.
mattman86 said:
I get to this part and all it does is create a build folder in the systemui directory.... nothing else.
Click to expand...
Click to collapse
did u figure it out?
Finally, I found this thread. This is very useful bro! Keep it up.