[Galaxy S II Themes and Apps] SilencerOfLambs:
Hi guys!

After getting a lot of requests by various users of Resurrection Remix and RootBox,I finally decided to do a tutorial on how to make certain kinds of mods.I have been modding for Resurrection Remix for quite some time now and have learnt a lot in the process.I will keep updating this thread as and when i learn new stuff.

What this tutorial teaches and guides you to do:

-ANIMATED NOTIFICATION DROPDOWN BACKGROUND

-NAVIGATION BAR BACKGROUND MOD

-TOGGLES BACKGROUND MOD

-PULLDOWN BAR MOD

-SYSTEM+DIALER BACKGROUND MOD

-LOCKSCREEN HANDLER MOD

MORE MODS WILL BE ADDED AS AND WHEN I GET TIME AND ALSO DEPENDING ON THE INTEREST OF THE USERS.

DISCLAIMER :

> Please be careful.The methods here are totally tested so if anything goes wrong it is probably your fault that you didn't do something correctly.I will give my support but I am not responsible for anything unfortunate that may happen.Don't forget to do a BACKUP before trying anything!

>This is a tutorial to help the daily user in making mods.It might not be the most perfect way to do things,so if you are competent enough and technically sound to build from source please go ahead and read Entropy512's post here to get an idea on the same.My tutorial is aimed at helping everyone make their own mods. :)

Firstly,I will give the credits of my learning curve to :

GaboWinter (For his EXCELLENT tutorials and awesome FAQ)

Westcrip (For giving us an excellent ROM that changed the way i looked at things)

Yorzua (For his excellent tutorials on theming)

MyLifeRocks10 (For teaching me how to use UFT)

Vreestyle (For being one of the main inspirations and letting me use his zip files as a base whenever required!)

Bajee11 (For guiding me on how to mess around with smali files)

Tigiy (Whose first Hulk mod was the one that triggered my curiosity)

Sun90,Faseeh,LegendZenefy,Kroz,Kicker09 (For being awesome!)

Neerajganga (For forcing and encouraging me to write this tutorial)

To all the others who helped me during this transition of mine.You know who you are!Also a huge thanks to all the developers without whom this wouldn't have been possible. :)

I'll try to cover all the mods that I have done so far gradually and I'll start with the easier ones.

Some of the tutorials may or may not already be available on the internet but I have been getting too many requests so I'll put everything together here.Remember that i am also NEW here so please dont flame me if i do things differently.However constructive criticism is always welcome! :)

I would appreciate a Thanks for all this as it took a lot of my time and effort. :)

So let's get started.

What you need to have installed on your PC :

-Android SDK - Get it here.

-Java Runtime Environment (APKtool needs at least ver. 1.6) - Get it here.

-Notepad++ or Adobe Dreamweaver for editing XMLs.

-Draw9patch.bat [Included in the Android SDK]

-Apktool - Get it here. - I use ICS Apktool to recompile and Original Apktool to decompile.Works great with SystemUI.apk

-Photoshop or GIMP - Get GIMP here (It is a free software).

-APK Multitool v 1.0.5/APK Manager 5.0.2. Get them here. (You can use Apktool for the same functions i think,however I use them both depending on my needs)

-7zip or Winrar.

Please don't ask me questions on how to set up the above as the tutorial is not for that and you will find many tutorials/guides on XDA and elsewhere which explain the same.

What you need to know before doing some of these mods:

-

Decompiling and compiling APKs

-

There are many tutorials on XDA for this.And it's pretty straightforward.I will just try to explain how to decompile the tricky SystemUI.apk.

I modified TVTV's post for HTC Desire,threw in my bits and wrote the way to do this :

Step 1 (installing the tools)

:

- Download and install the latest Java Runtime Environment (APKtool needs at least ver. 1.6);

-Download Apk Tool(both Original and ICS Apktool.I linked you to both above.)

Step 2 (preparing to decompile):

- In order to properly decompile/compile SystemUI.apk, you need to install the framework with Apktool.

- Open your root explorer of choice and navigate to /system/framework;

- Copy "framework-res.apk" and "SystemUI.apk" to the SD card, then move them to your PC either via cable or via a software of your choosing.

- Put both "framework-res.apk" and "SystemUI.apk" into the folder where you've extracted Original Apktool;

- Open command prompt (Windows button + R then type "cmd") and navigate to the folder where you have Original Apktool and the framework apk;

- Type "apktool if framework-res.apk". Your file will be processed and the required bits will be "installed" in "C:/Users/<yourusername>/apktool/framework";

Step 3 (proper decompilation):

-For decompiling we will use the Original Apktool.

- Copy your SystemUI.apk from "/system/app" to the folder where you've installed the Original Apktool or copy the SystemUI.apk you wish to mod to the folder where you've extracted Original Apktool;

- Open a command prompt, navigate to the Original Apktool folder, type "apktool d SystemUI.apk" and wait till the original apktool has finished. You should get no errors whatsoever and your apk should now be decompiled into "readable format" in "<yourOriginalAPKtoolfolder>/SystemUI".

Step 4 (proper compilation):

- After making the desired changes in the decompiled apk, it's now time to compile it.

-For compilation we will use the ICS Apktool

-Copy the changed SystemUI folder,SystemUI.apk and framework-res.apk to the folder of ICS Apktool

- Open a command prompt, navigate to the ICS Apktool folder then type "apktool b SystemUI". Your apk will now be compiled to "<yourICS Apktoolfolder>/SystemUI/dist" (again, you should get no errors whatsoever). DON'T USE IT YET!

- Being a system app, SystemUI.apk must first be signed with the proper keys else odds are it won't work. To do that, you need to rename the SystemUI.apk you're editing (the original one) into SystemUI.zip, open it with an archive manager then extract META-INF and AndroidManifest.xml to the "<yourICS APKtoolfolder>/SystemUI/build/apk" folder, then run the "apktool b SystemUI" command again. Your APK will now be built with the proper keys included, and is now fully functional. You may "pick it up" from the "<yourICS APKtoolfolder>/SystemUI/dist" folder;

- You can now flash the resulting (modded) apk to your device either via ADB or via a way of your choosing (.ZIP from recovery etc.).

Have fun and remember to always do a nandroid backup before messing with system files!

-

A general idea of what 9.PNG images are

.

READ this to know what they are and how to use draw9patch.bat.

For patching 9.PNGs

go to Yorzua's thread HERE.

Note:

You can either follow all the steps in his tutorial for creating the image and then use the drag and drop(7zip,winrar) method OR skip step 3 of his tutorial and compile the image along with the previously decompiled apk.In other words,if you decompile the apk,then skip step 3 and if you want to use the drag and drop method,then follow the entire tutorial of Yorzua.Usually when a simple 9.PNG patch is required,Yorzua's method can be followed,but when we are editing XML files,we need to decompile the apk and then recompile it as otherswise the XMLs wont be editable as they are encrypted).

So now that we are settled with that,let's begin the real stuff starting with the easiest :

NOTE : I ATTACHED AN EMPTY FLASHABLE ZIP FOR YOU GUYS.

After you mod your framework-res.apk, SystemUI.apk etc you need to place

them(drag and drop the modded apk's) inside the flashable file using 7zip or Winrar.

SystemUI.apk and Contacts.apk goes inside /system/app

Framework-res.apk goes inside /system/framework

After flashing any mod,dont forget to fix permissions!

If you are on a kernel other than Siyah kernel do the following steps :

-Reboot to recovery

-Mounts and storage

-Mount /system

-Flash zip

-Fix permissions

-Reboot system

ANIMATED NOTIFICATION DROPDOWN BACKGROUND​

- Decompile your SystemUI.apk

- Navigate to /res/layout/ and open status_bar_tracking.XML

- Use Notepad++ to change the following lines of code.

Now add this line:

android:background="@drawable/dropanim"

to

<com.android.systemui.statusbar.phone.TrackingView android:orientation="vertical" android:paddingLeft="0.0px" android:paddingRight="0.0px" android:paddingBottom="0.0px" android:focusable="true" android:visibility="gone" android:descendantFocusability="afterDescendants"
xmlns:android="http://schemas.android.com/apk/res/android">

-The "dropanim" is basically the name of the XML file that you are gonna create next.So you can name it whatever you want.

-Save the XML file and navigate to /res/drawable

-Inside this drawable folder , make an XML file named "dropanim".

-This XML file will basically point to all your resources(images).The images should be PNG images.Depending on the number of images you use,the code will be accordingly written.From personal experience,i would say don't exceed 30-35 png image files.Also there are ways to make the animation play only once,to make it play once forward and then reverse infinite number of times.More on that a little later.

-The android:drawable="drawable/anim1" syntax points at the images.Here the image name is anim1.

-You can refer the code below for this XML file.Depending on the number of images you use,you will have to edit the code accordingly.

<?xml version="1.0" encoding="utf-8"?>
<animation-list android:oneshot="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:duration="150" android:drawable="@drawable/anim1" />
<item android:duration="150" android:drawable="@drawable/anim2" />
<item android:duration="150" android:drawable="@drawable/anim3" />
<item android:duration="150" android:drawable="@drawable/anim4" />
<item android:duration="150" android:drawable="@drawable/anim5" />
<item android:duration="150" android:drawable="@drawable/anim6" />
<item android:duration="150" android:drawable="@drawable/anim7" />
<item android:duration="150" android:drawable="@drawable/anim8" />
</animation-list>

-Here the 'duration' part signifies the time lapse you want between frames in milliseconds.

-The above code is an example for 8 images.Thus there is anim1 to anim8.

NOTE:

- If you want the animation to play for only once,then in the code above replace

<animation-list android:oneshot="false"

with

<animation-list android:oneshot="true"

.

-If you want the animation to play in reverse once it has reached the end then firstly keep

<animation-list android:oneshot="false"

set to false

and add the line :

android:repeatMode="reverse" after

<animation-list android:oneshot="false"

This line will make your animation play in reverse.

-Save this XML file.

-Now navigate to the drawable-hdpi folder and place your images there.

-Recompile your SystemUI.apk

-And then use ADB or a flashable zip to enjoy your newly modded and animated background! :)

Preview of one that i had done for Resurrection Remix:

[YOUTUBE]Obq9lbYk9Io[/YOUTUBE]

NOTIFICATION DROPDOWN BACKGROUND MOD​

So this one is something that i have been getting many requests for and although i had initially implemented it as a theme , I finally learnt how to make it as a flashable zip.Pretty easy once you know what to change.So lets get on with it. :)

For this particular mod you will again need to know how to compile and decompile the apk.Also needs proper knowledge of 9 PNGs.The 9.PNG concept is pretty important here as unlike the other mods,the stretching of the image takes place to a large extent to cover the entire area of the notification background,so if it not done properly,then you will see white/transparent empty spaces in the area that is hidden behind the toggles.This happens because the image didn't 'stretch' out to cover the empty part.

Here we go..

-Open Photoshop or GIMP and make the image that you want to set as you dropdown background.This must be a PNG image of size roughly around 536x398 pixels.

Ensure that when you finally save the above image,you save it with a 2 pixel transparent border at the left and right and a 2 pixel transparent border at the bottom.This is because when the picture gets stretched later on,we want the transparent bit to get stretched and not the actual picture as it will result in the distortion of the edge pixels then.If the transparent bit is stretched,there is no problem with that.

So finally after saving the image with a 2 pix border everywhere except the top,we'll get an image of 540x400 pixels.This image should be saved as notification_bg.png.

Size is not a very critical issue but if you exceed you may get a clipped picture.

-Having done that, we need to now define the stretching and content parameters using draw9patch.bat tool from the android sdk.

You can use this image as a reference on how the border pixels will have to be.This is totally upto you and you will be able to see the stretching and preview of it in the draw9patch tool.

Reference image :

-Save the 9.PNG as notification_bg.9.png.

Now we need to edit the XML files to point it to our new image.

-For this first decompile SystemUI.apk using the method and tools i explained earlier.

-Navigate to res/layout/status_bar_tracking.xml

-Open it with Notepad++ and change the following code from :

<FrameLayout android:background="@drawable/notification_tracking_bg" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0">
<com.android.systemui.statusbar.policy.WeatherText android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:gravity="center" android:layout_gravity="bottom" android:paddingBottom="40.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" />
<com.android.systemui.statusbar.phone.CarrierLabel android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:gravity="center" android:layout_gravity="bottom" android:paddingBottom="20.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" />
</FrameLayout>

to

<FrameLayout android:background="@drawable/notification_bg" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0">
<com.android.systemui.statusbar.policy.WeatherText android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:gravity="center" android:layout_gravity="bottom" android:paddingBottom="40.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" />
<com.android.systemui.statusbar.phone.CarrierLabel android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:gravity="center" android:layout_gravity="bottom" android:paddingBottom="20.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" />
</FrameLayout>

-Save the file.

-Now navigate to res/values/drawables.xml and change the line :

<item type="drawable" name="notification_tracking_bg">#d8000000</item>

to

<item type="drawable" name="notification_tracking_bg">@drawable/notification_bg</item>

-Save it.Now both your XML files point to the the correct images.

-After this simply recompile the SystemUI.apk and you are done.To flash it you can use my attached flashable zip.

-Enjoy :)

NAVIGATION BAR BACKGROUND MOD

​

-Open up Photoshop or GIMP and make your navigation bar background image that you want to use.It has to be a PNG image of about 540x70 pixels.You can take any image from the net: resize it,crop it,change the tint etc, but it needs to be roughly of that dimension.

-After you are done with that image,you will need to make another image so that it can be used in landcape mode.Now the dimension of the landscape image needs to be 70x540 pixels roughly.Usually once you are done with the portrait background,just rotate it by 90 degrees to get the landscape image.Remember that both need to be PNGs.

-Save the portrait and landscape images with any name.For example i will use "raja_nav_bg.png" for the portrait image and "raja_nav_bg_land" for the landscape image.

-Now,it's time to use those images in our SystemUI.apk.

-To do this first decompile SystemUI.apk using apktool.You will now find a SystemUI folder in your apktool path.

-Copy the two images that you made earlier and paste them in this path:

SystemUI\res\drawable-hdpi

-Now the thing is that we need to edit 3 XML files.All these XML files are located in the layout folder of SystemUI and are related to the navigation bar background.Each of them point to a hexadecimal colour code.We need to change that and make them point to a drawable resource,which in our case are the 2 images that we made.

-To do this first go to SystemUI/res/layout and open the file navigation_bar.xml with Notepad++.

-Change this line :

<com.android.systemui.statusbar.phone.NavigationBarView android:background="@drawable/nav_bar_bg" android:layout_width="fill_parent"

to

<com.android.systemui.statusbar.phone.NavigationBarView android:background="@drawable/your_portrait_image" android:layout_width="fill_parent"

Remember that in the @drawable part,we do not have to give the extension of the file.Just the file name.

-Now navigate below in the page near the Frame Layout section that says android:id@id/rot90 and add this to the existing code :

android:background="@drawable/your_landscape_image"

So the existing part becomes something like this after the addition :

FrameLayout android:id="@id/rot90" android:paddingTop="0.0dip" android:background="@drawable/your_landscape_image" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="fill_parent">

-Now save the XML file and close it.

-In a similar and identical manner we need to edit the navigation_bar_naked.xml and navigation_bar_search.xml.

2 edits in each of them.One near the FrameLayout for landscape and the other one at the top for the portrait image.

-After editing all the files,save them and exit.

-Now copy this changed SystemUI folder to ICS apktool folder and recompile it.Follow the steps that i stated earlier on how to recompile and you will have your modded SystemUI.apk :)

Then either use ADB or a flashable zip file to use the new SystemUI.apk on your phone!

A screenshot of a navigation background mod that i did for Resurrection Remix :

TOGGLES BACKGROUND MOD

​

Many users had requested me to put a jet black background behind the toggles instead of the zigzag lines.So here is the way to change them..

- Open up Photoshop or GIMP and make a PNG image/background of 960x180 pixels resolution.If you want it transparent then you can keep it so using Photoshop.Name this image as notify_panel_notification_icon_bg.png.

-Save it somewhere on your desktop

-Now use 7zip or Winrar to open framework-res.apk in view mode.Don't extract it.

-Navigate to framework-res.apk/res/drawable-hdpi and drag and drop the image that you made here, and by doing that you will replace the existing notify_panel_notification_icon_bg.png image of size 14x14.

-Keep the framework-res.apk somewhere safe as we shall be using this one while flashing the mod or with Adb.

So the original image was a 'tile' image of 14x14 pixels and we just replaced it with another image having a dimension of 960x180 pixels.Initially,the tile image was 'repeated' several times using a code in one of the xml files in SystemUI.apk and thus it appeared to be spread out over the area behind the toggles.We need to now disable that as we are using a background of 960x180.

-To do this we need to first decompile SystemUI.apk

-After doing so navigate to the SystemUI\res\drawable folder.

-Open status_bar_ticker_background.xml with Notepad++.

-Change the existing code from :

<?xml version="1.0" encoding="utf-8"?>
<bitmap android:src="@android:drawable/notify_panel_notification_icon_bg" android:tileMode="repeat"
xmlns:android="http://schemas.android.com/apk/res/android" />

to

<?xml version="1.0" encoding="utf-8"?>
<bitmap android:src="@android:drawable/notify_panel_notification_icon_bg" android:tileMode="disabled"
xmlns:android="http://schemas.android.com/apk/res/android" />

-Save the XML file.

Note

: Incase you want to use a transparent background,then you dont have to edit the XML file as a transparent image of 14x14 pixels in the drawable-hdpi folder of framework-res.apk will give you transparent toggle background.

-After editing the above XML file , recompile SystemUI.apk.

-Now,both your framework-res.apk and SystemUI.apk have been modded and you can use them on your phone and get whatever background you desire.

A screenshot of a purely black toggle background that i made for Resurrection Remix :

PULLDOWN BAR MOD​

This mod is for the bar that we get when we pull down the notification dropdown.This has been done many times before but I will share it nevertheless as some users cannot find what they want.

It is a simple mod that doesn't require editing any XML files.It does however require the patching of a 9.PNG image.

We shall be using Yorzua's method here which will help us in optimizing the 9.PNG image so that the 7zip drag-and-drop method can be used here,rather than going into the lengthy process of decompiling the SystemUI.apk,pasting the unoptimized 9.png in it and recompiling it again). 9.PNG images get optimized on recompiling,but Yorzua's link lets us use a tool which will optimize the image beforehand so that we can just drag and drop it there).

-Firstly open up SystemUI.apk with 7zip or Winrar.

-Navigate inside the drawable-hdpi folder and find the file status_bar_close_on.9.

-Drag it and drop it on the desktop.We will use this file for reference purpose while patching the 9.PNG image.

-Now open up Photoshop or GIMP and make your bar image.It should be a PNG image of around 476x42 pixels(This is variable and the width can be anything within 480 pixels and the height can be within 48 pixels).Save it as status_bar_close_on.png.

-So now we have your PNG ready and we need to make it a 9.png using the draw9patch.bat file in the Android-SDK.Many people prefer to do it with Eclipse but that's just complicated and a miserable way of doing it.

-At this stage,I expect you to have read enough about 9.PNG images from the links i gave at the start of this thread.If you haven't then go and read it as it might be a bouncer otherwise.

-Now open draw9patch.bat and drag the ORIGINAL status_bar_close_on.9.png image that you had taken from the SystemUI.apk and drop it in the tool.

-Observe how the borders of the image are and how the pixels have been drawn at all the borders.Each pixel is important and changing even one of them can result in a big visual difference.These pixels contain the stretching information and changing them can change the whole behaviour of these images.Remember the pattern and the coordinates of these pixels as you will have to need to do the same thing while patching your status_bar_close_on.png.You can change one or two pixels in the left and top border just to see how the image stretches in the right viewing pane of draw9patch tool.

-After you got an idea of these 9.png files,you have to do make the same border so that it stretches properly with your status_bar_close_on.png image.

For reference,you can use this 9.PNG file of mine also :

-After you are done patching the image properly save it as status_bar_close_on.9.png

-Open SystemUI.apk again with 7zip or Winrar and navigate to the drawable-hdpi folder.

-Drag and drop your new 9.png image that you made and overwrite the existing one.

-Close the apk.

-Your modded SystemUI.apk is now ready.

-Use ADB or a flashable zip for getting it on your phone. :)

A screenshot of the pulldown mod i had made for Rootbox :

SYSTEM+DIALER BACKGROUND MOD​

Most people know this.It is very easy and no XML editing or 9.PNG is required.However you need Contacts.apk for changing the dialer background.

-Simply take your favourite pics of 480x800 resolution.They must be PNG images.

-For the picture that you want to use as the dialer background,name it as

background_dial_holo_dark.png.

-For the picture you want to use as System background(for example Settings background) name it as background_holo_dark.png

-You will need framework-res.apk and contacts.apk for this.

-Using 7zip or winrar open framework-res.apk and navigate to :

framework-res.apk\res\drawable-nodpi

-Drag the background_holo_dark.png that you made and drop it inside this and in doing so you will replace the existing one.

-Close the apk.

-Now open Contacts.apk with 7zip or Winrar and navigate to

Contacts.apk\res\drawable-nodpi

-Drag the background_dial_holo_dark.png that you made and drop it here and replace the existing one.

-Done.Your contacts.apk and framework-res.apk files are now modded and you backgrounds will also change.Simple,isn't it? :)

Some screenshots of the system+dialer background that i had made for Resurrection Remix :

LOCKSCREEN HANDLER MOD​

This is again an easy mod and no skill required.

-For this mod you will need framework-res.apk

-Make 2 handler icons,one that will be normally be displayed on the lockscreen and the other that it will change to when pressed for unlocking.

-Name the 1st icon as ic_lockscreen_handle_normal.png and the second icon

as ic_lockscreen_handle_pressed.png.

-Remember that both the images need to be PNG images of 162x162 pixels.

-Now open up framework-res.apk with 7zip or Winrar.

-Navigate to framework-res.apk\res\drawable-hdpi and drag and drop the two images above inside this and replace the existing ones.

-Done,you can now close the apk and use your modded framework-res.apk.

You can find some amazing lockrings icon here.Be sure to use the HDPI ones.

A screenshot of these mods :