[GUIDE] The SBG Method | A method for themers [11/23/2013]

Hello everyone!


Into:

What is "SBG Method"?
"SBG Method" is a simple method that users and themers can use to make some of their work easier.
It is mostly targeted on themers that like to make lots of variations for their themes.


"Go on! I like the sound of it!":

It is kind of a complex way and maybe a bit time consuming at first, but it helps a lot.
So, what is this method?
Let's use an example!:

Let's say I am making a CyanogenMod theme which I am gonna release in different color versions.
A CyanogenMod theme replaces original resources(drawables, colors, styles, e.t.c.) from original packages found in Android, such as com.android.systemui(SystemUI.apk). Those resources are the ones who(most of the time) define what you see in your devices screen.
To redirect an icon, for example the Brightness Tile icon, you have to add a redirection. In a redirection you tell Android which resource(drawable, color, e.t.c.) from the original package to replace with which one from your CyanogenMod theme resources.
Most people do this:
They replace an icon,for example "ic_qs_brightness_auto_on.png", with another icon they created which they placed in their CyanogenMod theme adding the original package name as a prefix to better locate it, com_android_systemui_ic_qs_brightness_auto_on.png.
A redirection for this resource would be like this:

<item name="drawable/ic_qs_brightness_auto_on">@drawable/com_android_systemui_ic_qs_brightness_auto_on</item>

Replacing an icon(.png) with an icon(.png), pretty simple and easy.
No one tells you though that you can't do otherwise.
How about replacing an icon(.png) with an .xml?
"Why do that?! As long as .png -> .png works fine why change my ways?"
Well, you are right!

But let's use one more example:

I finished with my CyanogenMod theme. I created new icons for all of my Quick Setting Tiles and I added a blue circle background behind every ON tile and a grey circle background behind every OFF tile.
Users liked my icons and ask me to make the same Tiles but have red squares behind ON tiles and white squares behind OFF tiles. Now I have to make the same icons but add a different background behind them.
If the tiles are for example 123 files it'll take lot's of time, especially if I am a user that has less or no experience at all with Photoshop Actions.
Now users ask me to make the same icons with green triangles/dark grey background for ON/OFF tiles.
Time consuming!

What if I had just 123 icons for Tiles and just 2 more to use as ON/OFF backgrounds?
I would only have to change 2 .pngs each time instead of 123.

Well, that's basically the "SBG Method" and "SBG" stands for "Separated Background".
You can use this method on anything you can imagine!
Resources I used this method on successfully are:

Status Bar icons, Halo, Quick Setting Tiles.

I am sharing that method with you because we all can have different ideas and you can all use this in different ways.


How to make this work:

Let's use an example again:

Let's say I want to change the Brightness Tile.
I'll personally make an .xml called:
brightness_auto_on.xml for when Auto Brightness is ON
brightness_auto_of.xml for when Auto Brightness is OFF

In redirections I'll make this:

<item name="drawable/ic_qs_brightness_auto_on">@drawable/brightness_auto_on</item>
<item name="drawable/ic_qs_brightness_auto_off">@drawable/brightness_auto_off</item>

Now, how is an .xml gonna be uses instead of a .png?:

(Tired of reading? Image examples!)
brightness_auto_on


brightness_auto_off



A layer-list will render resources one on top of another.
In this case, a brightness icon on top of a circle background.

Android will replace the stock Brightness ON/OFF tile icons with my two, .xml rendered Brightness ON/OFF resources.


What are the benefits of this method?:

• Less time releasing your themes with different colors.
• You can provide users with very small VRT flashables that can contain just the replacing backgrounds.
• Easier for users to make their own backgrounds.
• You can make more backgrounds like blue backgrounds for WiFi/Signal tiles and red backgrounds for all others or make a plethora of colorful backgrounds and assign each background to each Tile.
• Lot's of possibilities, just be creative!
• Smaller size themes. "Why? I am going to have 123 more files(.xml)." Here's why smaller size:
• Having a 4kb background repeated 123 times will be around 123 times larger* so it's best to have just one background. Plus, each .xml you will create will be around 200B large that means...**

4*123=492kB *
200*123=24600B=24kB **
492-24=468kB
You save 468kB ;)


Disadvantages:

• One .xml for each icon you replace(for example, 123 Tiles = 123 .xmls).
• Lots of writing(.xmls), depending on how many icons you are gonna replace with .xml.
• More files.
• Performance cost(?)

Notes:

• If you have any idea on how to make this guide easier you can tell me.
• Maybe the examples were not the best ones but I just wanted to give you an idea on how my method can help you.
• I'll make a template myself for Tiles for you all to not have to write the .xmls.
• If you find any misspelling you can tell me.

Thanks goes to:

My XDA buddies:
@Chirag_Galani
@joehanh88
@KINGbabasula
@shut_down

My long time friends at #TeamFun IRC channel:
All of you guys!