FORUMS
Remove All Ads from XDA

[UPDATE 1/30/16 | THEME l MOD ] Transparent Widget Skins

880 posts
Thanks Meter: 669
 
By rushco, Senior Member on 12th March 2011, 02:02 AM
Post Reply Email Thread
27th April 2012, 02:33 PM |#3711  
Junior Member
Thanks Meter: 5
 
More
Quote:
Originally Posted by blackbearblanc

http://db.tt/Vbs4MXNw

Twitter 3.1.1 inverted transp

any chance update this inverted and transparant TFA to 3.2.0?
deeply appreciated
 
 
27th April 2012, 03:48 PM |#3712  
blackbearblanc's Avatar
Senior Member
Thanks Meter: 6,730
 
Donate to Me
More
Quote:
Originally Posted by tink84

any chance update this inverted and transparant TFA to 3.2.0?
deeply appreciated

I didn't make the inverted. Just the widget.
If you search and find it on Google we can make the widget here.
28th April 2012, 06:17 AM |#3713  
ecs1984's Avatar
Senior Member
Thanks Meter: 3,322
 
More
Tutorial Video Walkthrough
Video Demonstration/Tutorial
How to make transparent widgets

* no sound

The steps of this tutorial are not new. I am writing them out again mostly in my own words as a companion to the video walkthrough above, so hopefully this can serve as a comprehensive look at the process for anyone looking to learn. The video moves very quickly at times, which is why I've provided timestamps along with the steps below; just pause and rewind if you miss something. I will do a few steps in a little more drawn-out fashion than necessary to illustrate all that is going on. Are there shortcuts, other workarounds? Yes, probably. But this should work for pretty much any widget that is not XML-based (meaning the widget itself is composed of easily editable images rather than hard-coded). Text colors and some other parts of certain widgets are in the XML files and require more complicated steps to edit.

I chose ESPN ScoreCenter (version 2.3.0) 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 -- will be attached at the bottom of this post, along with the original unedited apk for the sake of comparison... before/after screenshots also.


ASSUMPTIONS:
  • You have installed 7-zip.
  • You have installed image editing software. Some free alternatives to Photoshop are GIMP and Paint.NET.
  • You have installed the Android SDK. This is where we get the draw9patch tool needed for working with .9.png's.
  • You have installed the APK Multi-tool. Go through the set-up 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 #23 or 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 new app with a slick looking transparent widget!

Once you've installed, please share your apk here in the thread so others can enjoy your work! I assume that HDPI is currently the dominant display type, and that MDPI is decreasing as XHDPI increases. Regardless of that, you can do a service to your fellow XDA members when posting your apps by doing the transparency process for the common MDPI, HDPI, and XHDPI displays (where relevant, certain apps pull the images from the same "drawable" folder and require no further digging into the different display types). Not required, but definitely appreciated.


Thanks/Credit
  • rushco for creating this thread and maintaining it so diligently
  • ilangoadigal for this tutorial which helped me and many others
  • tnpapadakos for this tutorial which helped me and many others
  • Daneshm90, brut.all, JF, farmatito, Raziel23x,and everyone else involved with the APK Manager/Multi-Tool projects
  • My fellow XDA members from whom I learned a great deal, whether through their helpful posts or from poking around in apk's they created to see what was going on


Related Links for the more ambitious folks
Attached Thumbnails
Click image for larger version

Name:	OriginalWidgets.jpg
Views:	2804
Size:	30.1 KB
ID:	1028529   Click image for larger version

Name:	TransparentWidgets.jpg
Views:	2888
Size:	26.1 KB
ID:	1028530  
Attached Files
File Type: apk Transparent-ESPN_ScoreCenter_v2.3.0.apk - [Click for QR Code] (1.46 MB, 206 views)
File Type: apk Original-ESPN_ScoreCenter_v2.3.0.apk - [Click for QR Code] (1.55 MB, 64 views)
The Following 27 Users Say Thank You to ecs1984 For This Useful Post: [ View ] Gift ecs1984 Ad-Free
28th April 2012, 07:39 AM |#3714  
OP Senior Member
Thanks Meter: 669
 
More
Quote:
Originally Posted by ecs1984

Step 4B - Editing a .9.png file (Timestamp - 0:59)

  • Delete the .9 from the file name (ie. change "widget_bg.9.png" to "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.

Have you ever tried just adding the .9 to the file instead of patching? I've been able to do that and have everything work when I install and test it. Although, the times the widget doesn't work and this could be because I never patched it.
28th April 2012, 12:43 PM |#3715  
Razer(x)'s Avatar
Senior Member
Flag Bologna
Thanks Meter: 4,798
 
Donate to Me
More
AnyDo widget link is not working anymore
28th April 2012, 12:53 PM |#3716  
blackbearblanc's Avatar
Senior Member
Thanks Meter: 6,730
 
Donate to Me
More
Quote:
Originally Posted by Razer(x)

AnyDo widget link is not working anymore

Please read info above
28th April 2012, 01:28 PM |#3717  
si_bolang's Avatar
Senior Member
Thanks Meter: 26
 
More
can't you make cm7
music with ics style?
thanks
Sent from my GT-S5660 using Tapatalk 2
28th April 2012, 03:14 PM |#3718  
Senior Member
Flag Arlington, Tx
Thanks Meter: 74
 
More
Quote:
Originally Posted by rushco

Have you ever tried just adding the .9 to the file instead of patching? I've been able to do that and have everything work when I install and test it. Although, the times the widget doesn't work and this could be because I never patched it.

Sometimes it looks awful on landscape if you dont patch it, it gets stretched the wrong way.

Sent from my SGH-T989 using xda premium
28th April 2012, 06:36 PM |#3719  
Senior Member
Thanks Meter: 38
 
More
Quote:
Originally Posted by ecs1984

here's the play store version of iheartradio, version 4.2.1

Plus one on the iheart radio in ics style. Thanks.

Sent via Tapatalk
28th April 2012, 06:36 PM |#3720  
ecs1984's Avatar
Senior Member
Thanks Meter: 3,322
 
More
Quote:
Originally Posted by rushco

Have you ever tried just adding the .9 to the file instead of patching? I've been able to do that and have everything work when I install and test it. Although, the times the widget doesn't work and this could be because I never patched it.

i can't say i've tried that way, but i imagine that might work if you are going fully transparent and there is no content to the image you are .9-ing (yes i just made it a verb, deal with it ). regardless of whether that shortcut works or not, the whole process in the video is accomplished in under 4 minutes and that was with a few pauses here and there for theatrical effect. meanwhile the installation of the SDK can take forevvvvver.

like xxKamikazexx mentions, things can get messy without patching. i wanted the video/tutorial to demonstrate as much of the process that was going on without getting too long, and i think fully illustrating the draw9patch process in Step 4B serves as a good stepping stone for people who are looking to try working more with .9.png's beyond simply making them transparent. i'm going to add a little portion at the bottom with some related links if anyone wants to get a little more ambitious. i am still learning a lot in that department.
28th April 2012, 07:00 PM |#3721  
Razer(x)'s Avatar
Senior Member
Flag Bologna
Thanks Meter: 4,798
 
Donate to Me
More
Quote:
Originally Posted by blackbearblanc

Please read info above

???

There's just the how to, i was not asking for that.
Post Reply Subscribe to Thread

Tags
transparent, transparent widget, tune-in, widget

Guest Quick Reply (no urls or BBcode)
Message:
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes