Post Reply

[GUIDE] Modding (theming) Market app and others

OP 00.ante

6th March 2011, 02:29 PM   |  #1  
00.ante's Avatar
OP Senior Member
Flag Zagreb
Thanks Meter: 456
 
707 posts
Join Date:Joined: Dec 2010
Donate to Me
More
Since there was quite pm's for on how to theme market or any other app. So decided to put one guide how to do it.
Basiclly this is for market app but can be also used for other apps.

If you like my work you can buy me a drink; cheers


For start you need:
Now when you have everything you need we can start. If you have orginal file is also to have modded one so you can compare what was changed. Market had changes from 2.2x version till now so you can't just copy and paste files from one to another file or drag them from another apk to another. Basiclly few folders can be copyed into app which your modding. Rest you can see what is same and what isn't by comparing how many xml files are in each folder. (you might say it takes long time but that's the best way and only one way for start to do it; when you get hangoff it you want do it and when you see which are basic things and commen to all Market apps.)

Now let's start with de-compiling your file/files:
If you use apktool use version 1.3.1 since newer ones 1.3.2 has some bug in de-compiling and compiling.
Copy somewhere your downloaded apktool (some folder) and also copy in there apps your modding.



Open CMD (Command prompt) in Windows and go to folder where your apktool is (I think I don't have to write command how to get there.... ; but here is little trick if you don't know for windows 7 which will open cmd in folder you are >> Open apktools in your Windows Explorer next hold Shift on keyboard and while holding it click your right mouse button and when menu opens just select Open command window here; and now your in cmd where your apktool is).

So now we need to de-compile file to see what we have in there since when you open apk file in 7zip not all folder are shown!

Run command to de-compile apk
Quote:

apktool d -d Vending.apk

(Vending.apk is name of market app or it can be com.android.vending-1.apk)
Now you wait till de-compiling is finished. When finished in your apktool folder you'll see folder called Vending (that is de-compiled apk file).


In Vending folder you have this:
  • - res folder
  • - smali folder
  • - AndroidManifest.xml
  • - apktool.yml


From list we are more interested in res folder since it has what we needed rest of files/folders we don't touch.
Ok now we open res folder and we have quite number of folder in there and each folder has quite number of png files or xml files.

In res folder these folders are interesting for us:
  • - color (xml files)
  • - drawable (xml files; few png's)
  • - drawable-da-hdpi-v4 (png file)
  • - drawable-da-mdpi-v4 (png file; it for mdpi devices; some edited some not it's on you will you edit it or not)
  • - drawable-hdpi-v4 (png files)
  • - drawable-mdpi-v4 (png fiels; I didn't see anybody editing it)
  • - layout (xml files)
  • - values (xml files)
So those are folder we are editing and modding and rest we don't touch!

Now were going to start with xml folders.. Lets start with color folder. When you edit xml file with notepad for example just click on Save option in notepad menu and not Save As and file will be saved and later will won't be any problems when compiling back app. In there you have 4 xml files which you can edit colors in them for some texts. I only edit xml called header_text.xml.

In header_txt.xml file you see this line
Code:
<item android:color="@android:color/black" />
part you can change is where it says color/black and can be changed to color/white and nothing else!!! (This part is like file name says for header text in which color to show). So for color folder that's it. (If you want you can play with other xml's in there if you see something like android:color="#ffbb0000" this your color in hex code and it has to be written in hex code for example to be "gingerbread green" it should be this "#ff96d21e")

When done with color folder were moving to drawable folder and in there we only need 1 xml file called bottom_light_gradient.xml. In there you need to edit this line
Code:
<gradient android:startColor="#ff96d21e" android:endColor="#ffffffff" android:angle="90.0" android:type="linear" />
from #ff96f21e" you only change 96d21e to color you want and first 2 ff need to be there! Second color is "#ffffffff" for white background and if your market has blackbackground or transparent cahnge that color from "#ffffffff" to "#00000000".


As far as I know (didn't search and look rest of xml files in drawable folder) nothing else can be changed in other xml files in drawable folder since rest xml files contain pictures names which to use for what.
Moving on to next folder which has xml files which we need to edit; folder called layout.

In layout there is quite number of xml files you can edit colors in hex format but basiclly you need only few files to edit so you don't have trouble like white text on white background.
So for here I edit only 3 files (2 files are for widget and one is for writting review for some app.)

Files your editing are:
  • - widget_app.xml
  • - widget_no_content.xml
  • - write_review.xml
In first 2 files you can replace line where it says /white or /black. (I wrote before what you can write there). Also if you want you can change some of xml files in this folder but in my opinion there isn't any need for that.
Last file write_review.xml is one I had problems with it when using Neon or Black version while writting review (comment) for some app. Thanks to MikeyMike01 it's resolved. If your using normal background as main to be white (like in stock version) then you don't need to touch any of files from layout folder; or you can play with them (your decision).

Here is orginal line from write_review.xml file
Code:
<EditText android:textColor="?android:textColorPrimary" android:gravity="top" android:id="@id/comment_box" android:layout_width="fill_parent" android:layout_height="fill_parent" android:maxLines="4" android:minLines="4" android:maxLength="150" android:freezesText="true" android:inputType="textLongMessage|textCapSentences|textMultiLine" />
Here is part you have to edit when using other color for main theme background in app
Code:
<EditText android:textColor="#ff000000" android:gravity="top" android:id="@id/comment_box" android:layout_width="fill_parent" android:layout_height="fill_parent" android:maxLines="4" android:minLines="4" android:maxLength="150" android:freezesText="true" android:inputType="textLongMessage|textCapSentences|textMultiLine" />
When finished with layout folder we are moving to last xml folder we need to edit called values (for every app it's almost same and all of them have it) and in there we only are interested in 2 files called:
  • - colors.xml
  • - styles.xml

In colors.xml you can change anything you want but as long as it's in hex color code and needs to start with #ff and ends with you 6-digit hex color code like this for steel blue #ff00aeff. Not sure if I need to explain which color is which since it has quite lines in there but you can play with them to see which line is what. My advice is to set different colors to see what is changed when you run your themed app and then you'll see result of your various colors and fix them one by one in file on your computer.

Final xml file which we need to edit is styles.xml and there are only 3 lines you change. First 2 lines are colors (1st is text name of color and like written before can only be black or white and 2nd line is hex color code). Last line in file your changing is look of your app aka "theme" to be with transparent background, black or white.

This is line your looking for and this one is for white background
Code:
    <style name="TallTitleBarTheme" parent="@android:style/Theme.Light.NoTitleBar">
for black or neon version line looks like this
Code:
    <style name="TallTitleBarTheme" parent="@android:style/Theme.Black.NoTitleBar">
for transparent versions line looks like this
Code:
    <style name="TallTitleBarTheme" parent="@android:style/Theme.Translucent.NoTitleBar">
Another on for transparent if you don't like pages to be one over other is not use Translucent; use this line
Code:
    <style name="TallTitleBarTheme" parent="@android:style/Theme.Wallpaper.NoTitleBar">
WARNING: Don't copy xml files from older version of apps to newer one since there can be some changes in them; only file you can copy without any problem at all is file color.xml in values folder and file bottom_light_gradient.xml in drawable folder.

Well that's it for xml files and were moving on pictures in png format. All png's can be edited with gimp or photoshop like written before without any problem. Problematic files are called 9.png which aren't that easy to edit.
Problem with 9.png files is that they have black "dots" or lines around sides which indicate to android how will image be streched and sized to fit and look right.

Here is guide you look and read closely how and what to do on 9.png files.
http://forum.xda-developers.com/show....php?p=5206698

Myself I edit them with gimp using colorize function and after that I look closely how do black dots and lines look and is there any change in there color. If there is any change in color when compresing file you'll get error. So before going into editing 9png files read guide from link and if you want try my method which isn't in some way most efficent since you have to zoom and look closely every pixel in image to see if looks like orginal one!

Png files are listed in folder I wrote before on start of guide. Most of us who mod markets don't mod mdpi folders since most users use hdpi devices. But if you want you can edit.

Also one notice in market folder drawable-hdpi-v4 don't touch these 2 files since when edited on compiling you always get an error. Not sure why; tried every method to edit them but didn't work?!

Files are:
  • - title_bar_light_shadow.9.png
  • - title_bar_shadow.9.png
Also don't edit png called transparent.png.

After your done with editing and changing png files your ready to compile you new app (market).

Like written before you need again CMD (Command prompt) and run these command to compile file:
Quote:

apktool b -d Vending

If you notice now there isn't .apk extension in compiling command and it because your compiling folder where you edited files. Now you have to wait for apktool to finish compiling files and it takes few minutes for that if no errors.
Little about errors little "bug" in apktool is that it doesn't create any log file so you can see which error your getting and you can't scroll windows much since it has quite lines written on screen and neither one is problematic xml or png file. So to see which error are you getting run command again to compile and when it starts to write errors hit Pause/Break key on your keyboard and YOU HAVE TO BE FAST!!!!! If you were fast enough just scroll with mouse and look for line after command where it says ERROR and there will be name of you "wrong" file and problematic part in it.

If your file is compiled and new apk is created it is in folder Vending in subfolder called dist. Now you can notice that there are 2 new subfolders created build folder and dist folder.



In build folder is your new app but not in apk format and if looking in it you can see only few folders in res folder and not all folders are listed like in res fodler where it's de-compiled. Now second folder called dist folder is folder where is created your apk file ready to be installed.

You thought it's done. Right? Well almost just a little thing and it's finished and this is where you need 7zip program. Most of apps need to be signed in order to android system can recognize them and if not signed apk file won't run if pushed with root explorer or installed if running it from zip file in CWM.
You need to open your orginal file called Vending.apk in 7zip and also open second 7zip and in it open new created Vending.apk located in Vending subfolder dist which we wrote few rows before.

When 2 apk files are opend each in it's own 7zip you can notice that your orginal file has META-INF folder and new one doesn't have it. Right?



Now in orginal apk file in 7zip select folder META-INF and file AndroidManifest.xml and drag it to 2nd 7zip with your new created apk file. In new 7zip you'll be asked if you want to copy or replace files and you just click on Yes button. (Thanks to pendo who told me about this)



Also your new apk file is smaller in size compered to orginal one and don't bother with that since it's normal. You'll see with each color edited in xml files apk will be different size.

Now your done and your file is ready to use and also signed. There are few methods about signing apk files but this for me presonally is easiest and quickest one. I know that apk manger can sign zips since I don't use it don't really know how it works and also apk manger uses most parts of apktools
but it has interface for users and creates log file for errors.

Before releasing apk file in public try it on your phone and see who it looks like; minor bugs you didn't notice you can fix later.

Your decision is do you want to use apktool or apk manager.

Hope this will help. In basic this is it and for most of apps can help but once you start it modding you'll learn few tricks. Most of us here will help if any problem like few users here helped me to get started with some basics

Guide about theming in general
http://forum.xda-developers.com/showthread.php?t=916814


If I find any other interesting guide I'll post it and if any problem or suggestions please feel free to post or pm me.



One thing in the end. DO NOT POST OR LINK GUIDE OUTSIDE FORUM PRIOR CONTACTING ME!!!


Regards,
ante
Last edited by 00.ante; 14th March 2011 at 09:50 PM.
The Following 21 Users Say Thank You to 00.ante For This Useful Post: [ View ]
6th March 2011, 02:30 PM   |  #2  
00.ante's Avatar
OP Senior Member
Flag Zagreb
Thanks Meter: 456
 
707 posts
Join Date:Joined: Dec 2010
Donate to Me
More
reserved?!
6th March 2011, 02:59 PM   |  #3  
CrashV2010's Avatar
Senior Member
Flag In my house !!!!
Thanks Meter: 86
 
3,001 posts
Join Date:Joined: Aug 2010
Donate to Me
More
Quote:
Originally Posted by 00.ante

reserved?!

Great Guide... Just needed the starting point !!!!
6th March 2011, 08:33 PM   |  #4  
Recognized Developer
Flag Sydney
Thanks Meter: 641
 
2,572 posts
Join Date:Joined: Oct 2010
More
Thanks! Just what I requested!
10th March 2011, 11:22 PM   |  #5  
Oijkn's Avatar
Senior Member
Flag 127.0.0.1
Thanks Meter: 184
 
684 posts
Join Date:Joined: Mar 2008
Donate to Me
More
Hi 00.ante, i love your work for the market and i hope that your skills will be used for your new team ^^ What a great tutorial and no one click the "thanks button", amazing !!!

By the way keep your mind and have a good day

Best regards.

Edit: Voted !
The Following User Says Thank You to Oijkn For This Useful Post: [ View ]
15th March 2011, 03:36 PM   |  #6  
bdemartino's Avatar
Senior Member
Flag Midwest
Thanks Meter: 185
 
838 posts
Join Date:Joined: Jan 2011
Donate to Me
More
First of all, great guide here! I'm sure it will help a lot of people out!


On a side note, when I edit .9.png files I just "cut" out everything within the black lines and paste onto a new layer (use "paste in place" so the image doesn't move on you), make my color changes, then "merge down" the layers until it's layer 0 again, save .png as original - done. That way you don't even have to look at the black lines, you know they are correct because you didn't edit them. Just thought I'd throw this piece of information out there to hopefully save some people some time.
The Following User Says Thank You to bdemartino For This Useful Post: [ View ]
15th March 2011, 04:28 PM   |  #7  
xtremekilla09's Avatar
Retired Recognized Developer
Thanks Meter: 561
 
1,461 posts
Join Date:Joined: Jan 2009
More
Great guide and an exellent resource for future themers. I will include a link to this in my sticky thread in captivate land.

Thank you
The Following User Says Thank You to xtremekilla09 For This Useful Post: [ View ]
15th March 2011, 06:44 PM   |  #8  
00.ante's Avatar
OP Senior Member
Flag Zagreb
Thanks Meter: 456
 
707 posts
Join Date:Joined: Dec 2010
Donate to Me
More
Quote:
Originally Posted by xtremekilla09

Great guide and an exellent resource for future themers. I will include a link to this in my sticky thread in captivate land.

Thank you

Thanks

Sent from Steel Blue themed i9000 using blue XDA app
26th March 2011, 02:23 AM   |  #9  
Kfunk's Avatar
Senior Member
Flag McKinney, TX
Thanks Meter: 7,246
 
2,729 posts
Join Date:Joined: May 2010
Donate to Me
What a great idea... gonna have to try this out.



Quote:
Originally Posted by bdemartino

First of all, great guide here! I'm sure it will help a lot of people out!


On a side note, when I edit .9.png files I just "cut" out everything within the black lines and paste onto a new layer (use "paste in place" so the image doesn't move on you), make my color changes, then "merge down" the layers until it's layer 0 again, save .png as original - done. That way you don't even have to look at the black lines, you know they are correct because you didn't edit them. Just thought I'd throw this piece of information out there to hopefully save some people some time.



Sent from my PC36100 using XDA App
17th April 2011, 11:00 PM   |  #10  
davey11's Avatar
Senior Member
Flag Hilo, HI
Thanks Meter: 44
 
230 posts
Join Date:Joined: Jan 2011
More
How do you change icon for app like you do with the market icons?

Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes