View Single Post
Old September 16th, 2010, 11:29 PM   #1 (permalink)
howetechnical
Member
Thread Author (OP)
 
howetechnical's Avatar
 
Join Date: Aug 2010
Location: San Diego, CA
Posts: 455
 
Device(s): Samsung Vibrant
Carrier: Not Provided

Thanks: 29
Thanked 90 Times in 50 Posts
howetechnical
Default HOW TO: Modify Widget Backgrounds and Images

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
Attached Images
File Type: jpg Vlingo.jpg (338.9 KB, 377 views)
File Type: jpg Pandora.jpg (391.5 KB, 381 views)
Attached Files
File Type: zip Auto-Sign.zip (816.3 KB, 980 views)
__________________
Justin
Samsung Vibrant | Bi-Winning V3 | OverStock 2.4.1 w/KB1
Avid Homebrewer | Home Brew Talk
Beach dwelling Software Engineer in San Diego, CA
Samsung Vibrant Drivers Download | Android SDK | How to Modify Widget Backgrounds and Images
howetechnical is offline  
Last edited by howetechnical; September 20th, 2010 at 12:27 PM.
Reply With Quote
The Following 21 Users Say Thank You to howetechnical For This Useful Post:
ardchoille (October 28th, 2011), Asitaka (December 15th, 2011), Bad Attitude (October 27th, 2011), brotherswing (May 7th, 2012), diS (September 18th, 2010), Dr.Jpeg (October 25th, 2011), dvschnk (October 26th, 2011), eservant (September 17th, 2010), Eusibius2 (September 22nd, 2010), faile486 (March 19th, 2013), iohcsugna (September 27th, 2010), Kaessa (September 17th, 2010), macramentonate (October 27th, 2011), Mayhem (October 28th, 2011), MReda (December 14th, 2011), MysticMi (October 29th, 2011), nathan312 (September 18th, 2010), ODD BOY (December 4th, 2010), Tsjoklat (September 18th, 2010), twospirits (December 6th, 2011)