HOW TO: Modify Widget Backgrounds/Images to your Liking

[howetechnical]

NEW! Video tutorial at the bottom of this post.

Hey all,

Here's a quick and simple way to modify the images (backgrounds, etc) of wigets to match your layout and theme. First, I take no responsibility for anything that you do to your device because of this tutorial. There's really not much that can go wrong, but who knows what numbnuts is going to pull their entire /data/app folder out and delete it.

What you'll need:

Android SDK (this tutorial assumes it is installed before going ahead)

Your favorite image editing application

The auto-sign zip file attached to this post


Step 1: Get the .apk

If you already have the .apk app you want to modify, great, skip to step 2. If not, you can either download it from its developer website or from the market. If you download it from a website, simply save it to your computer. If you download it from the market:

-Use Root Explorer or another root file manager to navigate into your /data/app folder, and write down the name of the apk you want to modify
(ex: Pandora's is com.pandora.android.apk)
-Open a command prompt
-Change directory using "cd" to your AndroidSDK/Tools folder
(ex: cd c:\AndroidSDK\tools)
-Type in: adb pull /data/app/name_of_apk_file.apk

Now, the apk file will be in your /tools directory of your AndroidSDK installation.

Step 2: Modify the Widget Images

-Now that you have the .apk file, rename it to .zip.
-Extract the contents to a new folder, name doesn't matter.
-Once the contents are extracted, delete the META-INF folder.
-Navigate to res\drawable-hdpi and edit any of the image files you feel appropriate. The landscape orientation (when you hold your device sideways) images will/may be in res\drawable-land-hdpi.
-Once the images are edited to your liking, zip all of the contents back up into a single zip file (make sure you have everything, excluding the META-INF folder deleted previously). You want the zip file to have the same file structure and hierarchy as it originally had before modification.
-Lastly, rename the .zip file to .apk.

Step 3: Re-signing the .apk

The Android OS will not allow any unsigned apps to be installed, so we need to re-sign the .apk file (renaming it to .zip in the steps above took away the integrity of it's signature, FYI).

-Extract the contents of auto-sign.zip (attached to this post) to a folder anywhere on your computer.
-Copy/paste the modified .apk file into the root directory of auto-sign (make sure it's in there with the sign.bat file). Ensure that ONLY ONE .apk file is in there.
-Double click on sign.bat, continue by pressing spacebar when asked, and press spacebar (or any key, obviously) again when it is completed.

Step 4: Re-install the .apk Application

-Ensure the original application that you just modified is uninstalled before continuing, or you'll get an error in the next steps.
-Copy/paste the .apk file back into your AndroidSDK/tools folder.
-Open a command prompt, and again change directory ("cd") into your AndroidSDK/tools folder (see step 1 if you forgot how).
-Type: adb install name_of_apk_file.apk

Voila! You now have a modified and working (hopefully) widget. Keep in mind, if it doesn't work right away (ex: Vlingo's widget didn't work for me right away) a simple restart of the device should fix that. If it still won't work, then sorry.

You can see an example of what I did with the Vlingo(small) widget here, as well as the Pandora widget.

Extra Credit: Maybe once you've got your widget modified and working, post a reply with a screenshot of what you've done.

Video Tutorial: (I recommend full screening the video and watching in HD 720p quality)

http://www.youtube.com/watch?v=86PgHghRYU0

 

[eservant]

Bump for good info

 

[diS]

Awesome guide mate!

Is it possible to combine 2 widgets?

Because i've got 2 widgets called "Digital Clock Widget" and "BattStatt" but when
I put them below each other they have like a large gap between them.
So I would like to combine them to minimalize the gap between them

 

[howetechnical]

Awesome guide mate!

Is it possible to combine 2 widgets?

Because i've got 2 widgets called "Digital Clock Widget" and "BattStatt" but when
I put them below each other they have like a large gap between them.
So I would like to combine them to minimalize the gap between them

It depends on how the layout xml is written. Like Pandora, if it's written where the background is contstrained to a certain size, then you would have to edit the xml. But if not (as is the case with smoothcalendar, vlingo, etc), then you can just make the background image larger. You wouldn't be able to combine them per say, but you may be able to make the background tall enough to go edge-to-edge.

I have the same two widgets, though for my wallpaper, I like the clock without a background. Give it a try and post your results!

FYI: Yesterday I recorded a video tutorial doing this process 5 times, every time the recording application crapped out when compiling everythin (about 8 minutes worth). I tried mostly CamStudio, which really had issues. I finally got the video to compile, then it gave me an error message saying it lost the audio. Anybody know any GOOD screen recording applications that are free for up to 10 minutes of recording?

 

[diS]

Anybody know any GOOD screen recording applications that are free for up to 10 minutes of recording?

What about "oRipa Screen Recorder"?

 

[howetechnical]

What about "oRipa Screen Recorder"?

Thanks! I just installed it and I'll try it out either tomorrow or monday morning.

 

[waynester]

CaptureFOX Official Website

you might give this a try

*update...this worked on my old xp, it crashes FF 3.6.10 on win 7 64 bit

here are some other choices
http://www.softpedia.com/catList/112,0,2,1,1.html

** i just tried oripa , did not work on my pc
more alts
http://all-streaming-media.com/record-video-from-screen/freeware-screen-video-capture-software.htm

 

[howetechnical]

Bump for new video tutorial (see bottom of original post).

 

[diS]

Great tutorial!

 

[Eusibius2]

pretty cool, just a few questions:

1 - do you have to be rooted to do so? I already have the Android SDK for screenshots, so i'm familiar with that. Doesn't sound like you need to be rooted, but plz confirm...

2 - is it possible to change, not only the widget backgrounds, but also the icon used for the app (not the widget, but the icon) on a home screen or in the app folder?

Personally - I think your video is more helpful than the written instructions above. You've seemed to leave out quite a few steps in writing... prbably b/c you assume the user knows what they are doing (I do, but some others may not). This is a fairly straight forward process, so many beginner type people could do this, albeit with better instrux...

thanks howetechnical!

 

[Eusibius2]

Hey there,

2 more points:
1 - Did you mean to include chompSMS in the auto-sign.zip file?

2 - you never answered the question (not sure if it was asked) about the permissions and signing of the revised app. Will they be the same as what they were previously or are they changing to something else? To me, it looks like the revised apk file will have the same signature as what's in the testkey* file. Can you explain how this works?

 

[howetechnical]

pretty cool, just a few questions:

1 - do you have to be rooted to do so? I already have the Android SDK for screenshots, so i'm familiar with that. Doesn't sound like you need to be rooted, but plz confirm...

Nope.

2 - is it possible to change, not only the widget backgrounds, but also the icon used for the app (not the widget, but the icon) on a home screen or in the app folder?

I haven't looked for the icon itself, but if you can find it, then sure. Remember, this is open source oriented, so you've really got full access to the entire program if you know what to do.

Personally - I think your video is more helpful than the written instructions above. You've seemed to leave out quite a few steps in writing... prbably b/c you assume the user knows what they are doing (I do, but some others may not). This is a fairly straight forward process, so many beginner type people could do this, albeit with better instrux...

thanks howetechnical!

Videos are always more helpful Also, I didn't leave out any steps that are necessary for even an amateur to perform the modification. However, even if there were parts that assume the user knows certain things, there -is- a certain level of intelligence that one must have to venture into doing this kind of thing. I wouldn't expect my mother in law who just upgraded from her dumbphone to a Droid X to be doing this, and wouldn't advise she try.

2 more points:
1 - Did you mean to include chompSMS in the auto-sign.zip file?

The zip file is from xda, and I don't want to take away from the original creators creation.

2 - you never answered the question (not sure if it was asked) about the permissions and signing of the revised app. Will they be the same as what they were previously or are they changing to something else? To me, it looks like the revised apk file will have the same signature as what's in the testkey* file. Can you explain how this works?

The signature changes, as specified, to what's in the auto sign, which you are correct in thinking is pulled from the testkey files. The java application does all of this for you. I haven't analyzed the .jar file, so I couldn't say what it's doing in detail, but it does work (if it didn't, I would have opened the .jar up...no pun intended )

 

[n0ct3m]

I tried this out and for some reason, it's not showing any changes I made when I reinstall the widget. I pull it from the phone just fine and uninstall and re-sign, but it always looks the same as it did before I modified it.

 

[howetechnical]

I tried this out and for some reason, it's not showing any changes I made when I reinstall the widget. I pull it from the phone just fine and uninstall and re-sign, but it always looks the same as it did before I modified it.

Did you completely unzip the files to a new folder, or just open the image files from within the zip file? If you completely unzipped them, then you must have modified the wrong image files. If you got the right ones, there wouldn't be anything but the modified ones to display.

 

[n0ct3m]

Did you completely unzip the files to a new folder, or just open the image files from within the zip file? If you completely unzipped them, then you must have modified the wrong image files. If you got the right ones, there wouldn't be anything but the modified ones to display.

I completely unzipped the files. Not sure what I could have done wrong. Guess I'll just have to sit down and play with it some more somtime to see what I'm doing wrong.

 

[furstrated]

NEW! Video tutorial at the bottom of this post.

Hey all,

Here's a quick and simple way to modify the images (backgrounds, etc) of wigets to match your layout and theme. First, I take no responsibility for anything that you do to your device because of this tutorial. There's really not much that can go wrong, but who knows what numbnuts is going to pull their entire /data/app folder out and delete it.

What you'll need:

Android SDK (this tutorial assumes it is installed before going ahead)

Your favorite image editing application

The auto-sign zip file attached to this post


Step 1: Get the .apk

If you already have the .apk app you want to modify, great, skip to step 2. If not, you can either download it from its developer website or from the market. If you download it from a website, simply save it to your computer. If you download it from the market:

-Use Root Explorer or another root file manager to navigate into your /data/app folder, and write down the name of the apk you want to modify
(ex: Pandora's is com.pandora.android.apk)
-Open a command prompt
-Change directory using "cd" to your AndroidSDK/Tools folder
(ex: cd c:\AndroidSDK\tools)
-Type in: adb pull /data/app/name_of_apk_file.apk

Now, the apk file will be in your /tools directory of your AndroidSDK installation.

Step 2: Modify the Widget Images

-Now that you have the .apk file, rename it to .zip.
-Extract the contents to a new folder, name doesn't matter.
-Once the contents are extracted, delete the META-INF folder.
-Navigate to res\drawable-hdpi and edit any of the image files you feel appropriate. The landscape orientation (when you hold your device sideways) images will/may be in res\drawable-land-hdpi.
-Once the images are edited to your liking, zip all of the contents back up into a single zip file (make sure you have everything, excluding the META-INF folder deleted previously). You want the zip file to have the same file structure and hierarchy as it originally had before modification.
-Lastly, rename the .zip file to .apk.

Step 3: Re-signing the .apk

The Android OS will not allow any unsigned apps to be installed, so we need to re-sign the .apk file (renaming it to .zip in the steps above took away the integrity of it's signature, FYI).

-Extract the contents of auto-sign.zip (attached to this post) to a folder anywhere on your computer.
-Copy/paste the modified .apk file into the root directory of auto-sign (make sure it's in there with the sign.bat file). Ensure that ONLY ONE .apk file is in there.
-Double click on sign.bat, continue by pressing spacebar when asked, and press spacebar (or any key, obviously) again when it is completed.

Step 4: Re-install the .apk Application

-Ensure the original application that you just modified is uninstalled before continuing, or you'll get an error in the next steps.
-Copy/paste the .apk file back into your AndroidSDK/tools folder.
-Open a command prompt, and again change directory ("cd") into your AndroidSDK/tools folder (see step 1 if you forgot how).
-Type: adb install name_of_apk_file.apk

Voila! You now have a modified and working (hopefully) widget. Keep in mind, if it doesn't work right away (ex: Vlingo's widget didn't work for me right away) a simple restart of the device should fix that. If it still won't work, then sorry.

You can see an example of what I did with the Vlingo(small) widget here, as well as the Pandora widget.

can you point me to the image files you edited?
been trying to edit my vlingo, i just want the text "Talk" only on the small 1x1 widget icon. with no background
but i dont know which of the files to edit
if you can send me your apk it would be appreciated
thanks
i also have a SGS

 

[howetechnical]

can you point me to the image files you edited?
been trying to edit my vlingo, i just want the text "Talk" only on the small 1x1 widget icon. with no background
but i dont know which of the files to edit
if you can send me your apk it would be appreciated
thanks
i also have a SGS

No can do on sending the apk, that would be against the forum rules. All you need to do is check out the drawable-hdpi folder for the images you are looking for, they're all in there. Vlingo uses multiple images for each button, so you'll need to clear out the background image (the same background image is used for all button backgrounds on each of their widgets, so save a backup copy) as well as change the microphone image to the text that you want. I believe the microphone image (the same one, that is) is used in the application as well, so you'd have some button in the app that says "Talk" also, instead of the standard icon.

 

[furstrated]

No can do on sending the apk, that would be against the forum rules. All you need to do is check out the drawable-hdpi folder for the images you are looking for, they're all in there. Vlingo uses multiple images for each button, so you'll need to clear out the background image (the same background image is used for all button backgrounds on each of their widgets, so save a backup copy) as well as change the microphone image to the text that you want. I believe the microphone image (the same one, that is) is used in the application as well, so you'd have some button in the app that says "Talk" also, instead of the standard icon.

Thanks i figured as much on the apk thing after i posted
i managed to edit it and its working fine
but it dint come out the way i want it to
apparently, there is a size for the widget length and height and the button i made gets cropped
i ended up making all button backgrounds as transparent and using the 2x1 widget resized via launcher pro to display only the text, transparent background.
im trying to find the proper xml file to edit the widget size but im having no luck so far.
i open the xml files via word but the length width values are not showing
only shows length width height but no values
maybe i'm missing something there
thanks again
heres a screen shot btw-the upper left corner is the vlingo
i cant use the icon i made cos it gets cropped
so i defaulted to 2x1 vlingo with the text and no background since i made all backgrounds transparent
it just doesnt match up to the rest of the theme

 

[omgitswes]

okay, I can't find the apk of the widget I want to modify.
When I go to data all that's in there is a titaniumBackup folder with nothing in there and a flixster folder

 

[omgitswes]

okay nvm I got that fixed.
Now I ran into another problem. It says error in opening zip file
when I run the sign.bat

My errors

Exception: error in opening zip file
at java.util.zip.Zipfile.open(Native Method)
at java.util.zip.ZipFile.<init>(Unknown Source)
at java.util.jar.JarFile.<init>(Unknown Source)
at java.util.jar.JarFile.<init>(Unknown Source)
at com.android.signapk.SignApk.main(SignApk.java.320)

 

[Eusibius2]

The signature changes, as specified, to what's in the auto sign, which you are correct in thinking is pulled from the testkey files. The java application does all of this for you. I haven't analyzed the .jar file, so I couldn't say what it's doing in detail, but it does work (if it didn't, I would have opened the .jar up...no pun intended )

Hey - thanks for all the answers, they really helped. I'm still curious about this last point though. Couldn't this lead to a security flaw if we can now essentially re-sign a program (or fake sign a new one??) to do something malicious using another dev's key? Wouldn't this essentially fake the requested permissions the program wants the user to agree too?

 

[howetechnical]

Hey - thanks for all the answers, they really helped. I'm still curious about this last point though. Couldn't this lead to a security flaw if we can now essentially re-sign a program (or fake sign a new one??) to do something malicious using another dev's key? Wouldn't this essentially fake the requested permissions the program wants the user to agree too?

Yes, but to be honest, anybody who knows how to implement malicious syntax into a program will know how to fake the signature. There are a few auto-signers out there right now. As for the permissions, I don't believe they are stored in the signature files, but I may be wrong as I haven't analyzed it closely. I would presume that the application permissions would be stored in the application itself. What I do know about this particular auto signer is that it's clean, completely free of malicious code, and will not harm the applications it's used on or the devices. I'm a software developer, so I -have- looked for the usual signs of malicious intent as well as scanned it with not only desktop antivirus and antimalware apps (Nod32, Malwarebytes), but also with a couple android ones after re-installation of the modified apk.

This tutorial is simply for those who want to utilize the full versatility of their Android devices. It's not to give the tools needed to create malicious applications. Even though the auto sign will work for that purpose, it's only 1% of what's needed to do so, and anybody knowledgeable enough to write the other 99% does not need this auto signer to complete the job.

I'm getting the impression that you are not really interested in this tutorial itself, but rather in the possibilities and features of the auto sign java program (whether to cause problems here, or purely out of curiosity, I don't know). If this is the case, please request such information on the XDA thread where this tool was created, not here.

 

[howetechnical]

okay nvm I got that fixed.
Now I ran into another problem. It says error in opening zip file
when I run the sign.bat

My errors

Exception: error in opening zip file
at java.util.zip.Zipfile.open(Native Method)
at java.util.zip.ZipFile.<init>(Unknown Source)
at java.util.jar.JarFile.<init>(Unknown Source)
at java.util.jar.JarFile.<init>(Unknown Source)
at com.android.signapk.SignApk.main(SignApk.java.320)

Try installing the Java SDK (google it) if you don't have it already, that may help. Also, make sure you have only one apk file in the same directory as the sign.bat file, and ensure it's not a zip file but rather an apk.

 

[omgitswes]

Try installing the Java SDK (google it) if you don't have it already, that may help. Also, make sure you have only one apk file in the same directory as the sign.bat file, and ensure it's not a zip file but rather an apk.

It was already installed. I just decided to reinstall it again, still same thing. And yeah there is only one apk file in the same directory.

This is so weird

 

[howetechnical]

It was already installed. I just decided to reinstall it again, still same thing. And yeah there is only one apk file in the same directory.

This is so weird

Well, it's having a problem opening the apk file to assign the signature to it. I would make sure it's not set as read only, and try running the sign.bat program as administrator if you're on Vista or 7.