This tutorial will demonstrate the steps to create transparent widgets for your favorite apps. This is for only image-based widgets (not XML-based). The steps are written out below to accompany the video. A few steps are done in a little more
drawn-out fashion to illustrate what is going on, although the video moves quickly. Are there shortcuts,
other workarounds? Yes, probably. Text colors and some
other parts of certain widgets (anything with a scrollable list) are in the XML files and require more
complicated steps to edit. That is not covered here.
I chose the ESPN ScoreCenter app as the example apk because it has two widgets: a scoreboard widget that uses a regular .png as the background, and a video widget that uses a .9.png file as the background. So I'll demonstrate both ways you might interact with these image files, and the end result -- an installable ScoreCenter apk with transparent widgets -- can be downloaded here.
You can find a collection of other apk's I've made here. You can also check out the great thread on XDA Forums where my apk's and others are available for download.
Tools you will need:
- 7-zip for working with apk files.
- image editing software, such GIMP or Paint.NET (free alternatives to Photoshop).
- the Android SDK - this is where we get the draw9patch tool needed for working with .9.png's.
- the APK Multi-tool - this tool was created by some brilliant folks (Daneshm90, brut.all, JF, farmatito, Raziel23x), go through the setup process to create the necessary folders: place-apk-here-for-modding, place-apk-here-for-signing, place-apk-here-to-batch-optimize, place-ogg-here, and projects.
Step 1 - Extracting the apk (Timestamp - start)
- Transfer the apk from your phone to your computer. It is most likely located in the data/app folder.
Step 2 - Extracting the all-important res folder (Timestamp - 0:07)
- Open the apk with 7-zip. Do not extract the entire contents.
- You will see a folder called res. Drag that folder onto your desktop.
Step 3 - Locating the necessary widget image files (Timestamp - 0:20)
- Inside the res folder, there may be several drawable folders for various display types. In some cases, the base drawable folder will contain the widget background; in others, you might find it in drawable-hdpi or whatever display type your device is.
- Locate the widget background image, it hopefully will be named something like "widget_bg.png". Look closely at the file type (if it has a .9 extension), as the next step depends on what type of image you are editing.
Step 4A - Editing a regular .png file (Timestamp - 0:30)
- Open the image with your image editor. Edit it as needed; for full transparency, simply select all and delete.
- Save the file in the same format and do not change the file name.
Step 4B - Editing a .9.png file (Timestamp - 0:59)
- Delete the .9 from the file name (ie. change "video_widget_bg.9.png" to "video_widget_bg.png").
- Open the image with your image editor. Edit it as needed; for full transparency, simply select all and delete.
- Save the file in the same format (now a regular .png file) and do not change the file name.
- Open "draw9patch.bat" in the Android SDK (located in ... android-sdk/tools). Drag and drop the image onto the workspace. No editing is required with transparent backgrounds. Simply select File --> Save 9-patch, and maintain the original file name, the tool will add the .9.png extension to the file name. Make sure to delete the original file you renamed.
NOTE: There may also be other parts of the widget (logos, arrows, dividers, frames, landscape-view images, etc) that you might need to edit at this point in the process. You can follow the same steps with these images, whether changing the colors or making them transparent as well. In the final apk below, the arrows and logos have been edited here (not shown in video).
Step 5 - Merging your edited images into the apk (Timestamp - 2:15)
- Drag the res folder containing your modified images into the apk while open in 7-zip. Select "Yes" when prompted about overwriting the existing files.
Step 6 - Using the APK Multi-tool (Timestamp - 2:26)
- Move the modified apk file into the place-apk-here-for-modding folder in the APK Multi-tool.
- Run "Script.bat".
- Choose Option 24 - Set current project, and select your apk from the list. (This option might be #22-25 depending on the version of APK Multi-tool you are using.)
- Choose Option 1 - Extract apk
- Choose Option 3 - Zip apk
- Choose Sub-Option 2 - Zip as regular apk ... IF you are editing a system app, choose Sub-Option 1.
- Choose Option 4 - Sign apk ... if you are editing a system app, skip this step.
AND YOU'RE DONE!
You should now have a signed version of the apk in the place-apk-here-for-modding folder. Transfer it to your phone and install, or install using the APK Multi-tool if you have ADB enabled. Enjoy your app with a slick new transparent widget.
