Tutorials

 

This section will host guides on teaching how to Invert an app yourself. The first one is just a general method of what to search for, what to edit, etc. The next one is a full “Walk Along” guide where we invert the app while you invert the app. We will be adding more to this section in the near future to help the community out….

 

Video Tutorial by member A-Train88

 

To start, this is just a basic guide on what we need to do to successfully Invert an app

 

Tools you’ll wanna have:

 

1. Note++ – Link

2. Apktool 1.5.2 or newer and the newest aapt – Link

3. Apkmulti tool script or “Not working with new apktool”

4. Xml Marker (optional) – Link

5. Photo Editor like Photoshop or Gimp2 so you can black out or pure alpha background images.

6. FastStone Photo Resizer to batch lighten images when needed – Link

7. DiffMerge by SourceGear program for merging our old code into the new app – Link

 

 

 

 

Once you have those installed and are ready to start, grab an apk like Talk.apk and decompile it. The basic inversion of this app isn’t hard at all, but some of the edits we makes on the BlackTalk is so that the edits are simple for Clear Talk.

 

Decompile the app and then compile it right back up to make sure it’s clean. If you build it and it errors we need to address those errors (plurals.xml and strings.xml can cause this or a bad .9 patch) By doing this you eliminate that the app itself is botched and cant’ be edited. So once it builds clean, open it up and highlight in this order: Res then androidManifest and right click to open with Note+ (However you have to do this just make sure Note++ is opening the files).

 

1. Once all res and Manifest.xml files are opened hit Control+F to find/search and type android:background in the space and hit “Find all in all opened documents“.  This will pull all layout.xml and styles.xml that use that. Next, open in Xml marker or Note++ res/values/colors.xml. There is generally always at least 1 line in there that has the word background in it and 1 that has the word text. For our example we’ll use background_color and text_color. Keep those 2 handy and go back to Note++ and scroll the bottom of the page where all the hits are at and which files they’re in. We want to redirect ALL backgrounds and most text colors to colors.xml so that themes can work and also in case any of us make colored variations of these apps it is a simple edit in colors.xml rather than all over the place.

 

2. As an example, if you see android:background=”#ff7f7f7f” you’ll want to hit Control+H and copy that whole item (like what’s in green text) into the top box and again in the bottom box but in the bottom box android:background=”@color/background_color” and hit “Replace all in all opened documents” and it will replace all of the hex values with an in-app redirect to colors.xml. Keep scrolling and do that same thing for every background you find. Some backgrounds point to a vague color.xml like “@color/gray55” and since that could easily be a text color, just change it to one we KNOW is a background. @*android:color/white is a famous background just like @*android:color/black is a famous text color.. Make sure you don’t miss any…

 

3. You’ve mastered that part so do it again with android:textColor as the search/find and do the same thing but use the text_color.xml instead. If you have a layout that you know which screen it is affecting and the id’s for that TextView line are something like “@id/author, @id/time, @id/content” you can redirect some of those to a different colors.xml that will be a little darker like #ffcccccc instead of #ffffffff. When using DiffMerge those types of redirects are most likely already in place for you.

 

4. All backgrounds and text colors are done! Just to make sure, do a search in Note++ for #, textColorHint, colorCacheHint and @*android. Fix anything that pulls accordingly. Once done, you can save all in Note++ and close that out.

 

5. Now, go back into the actual decompiled apk and open res and hit the search tab in windows and do a search for styles. Some apps use more than just the one in res/values so we have to make sure we edit them all accordingly. Once the search is done and 1-10 styles pull, start at the top and open the first one. This can take a little time on a new app but with DiffMerge it’s quick. Since we mainly only Invert “Light” apps, you’ll see a lot of @*android:style/Theme.Holo.Light or @*android:style/Theme.Light, etc.. Make sure when you edit that the only one’s you change have the @*android:style in front of them.. @style is referencing an in-app style so don’t mess with those. So if you see a line (example) <style name=”TallTitle” parent=”@*android:style/Theme.Light”> you will want to change it to <style name=”TallTitle” parent=”@*android:style/Theme.Black”>. This tells the app to use all the children and parents of <style name=”TallTitle” parent=”@*android:style/Theme.Black”> from framework-res.apk. Same thing if it’s Theme.Holo.Light, Change the parent to Theme.Holo… It’s always good to have a framework-res.apk decompiled to easily access the main styles.xml for reference as to parent name, etc.. Then open the Manifest and do a search for “Light” to see if any activities in there are pointing to @*android:style/Theme.Light or Theme.Holo.Light related theme styles.. If so, reverse them accordingly. Theme.Light is Theme.Black, Theme.Holo.Light is Theme.Holo, Theme.Holo.Light.DarkActionBar is Theme.Holo…Save the manifest..

 

6. Once you’ve changed ALL the necessary parents from a Theme.Light reference to a Theme.Black or Theme.Holo reference, either scroll the whole style looking for text colors or backgrounds or do searches for those and edit accordingly redirecting them back to @color/…. Once you’re done with styles, save and close it..

 

7. Styles are all done! Now do a windows search in the apk for colors.. Not many apps have more than 1 but some do so make sure you always plan for the worst so we don’t miss something. Open colors.xml up and take a few deep breaths cause this is where all our hard work earlier is counting on us to make the right edits. Some items are name very obvious as to what it affects, i.e. backgrounds, text colors, shadows, pressed bg, etc. Go through and make ALL backgrounds #444444(dark-med gray) and all text #00ff00(green). This is for the initial testing. Now, go through and make the edits on the one’s that are a little iffy as to what they do and I always make them #ff00ff (pink) or I open all of res with Note++ and do a search for that colors name and see if something pulls letting me know if it’s a text color or background. Once you’ve gotten all colors.xml finished, save and close it..

 

8. This will be a good time to compile/build the apk and run the first test.. Depending on the apk, you can build it as a non system app and sign it or build it as a system app and flash it.. Your call on that for you own testing but for official releases we want to try and offer both install methods..

 

9. Hopefully ya didn’t get any errors cause if ya did, and ya compiled the app right after ya decompiled it, it’s your edits.. read the log and make needed changes. If it built and installed run tests looking for any black text (that’s why the backgrounds are #444444 for now) or any pink backgrounds or text.. If you find issues, like black text or pink backgrounds track them down. Make sure you didn’t miss any text colors in layouts and check res/colors or res/drawable for anything since sometimes they do have that stuff. If ya find some pink stuff, start narrowing it down by changing each of those #ff00ff in colors to a different color like #00ffff for cyan or #ffff00 for yellow and compile it and see what changed to what. Then go back in and you can start changing some of those colors to our background color or text color since you’ll know what the affect now.. In some instances you’ll have 1 item in colors set to #ff00ff (Pink) and in the app you have a text color AND a background using pink. This can be fixed by either doing a search in note++ for those item names in colors to see if you missed something or by opening res/values/public.xml where all the ID’s for everything is. Find the ID for the pink text and then for the pink background and open smali + Manifest in Note++ and do a search for those 2 ID’s.. Depending on how many pull (shouldn’t be more than 1 or 2) you can see the names of the smali, and they usually tell the location so if the name of the smali sounds like it is obvious, go into the decompiled apk and into smali and navigate to that smali file, open it and go to the line that has that ID from the Note++ search. Look above it a few lines and below it, see if there is a setTextColor, setBackgroundColor, or maybe below it will be SetColor but above it you will see where it might reference that text color or background color. If so, open the public.xml from the app again and if the smali you have opened is affecting the text color, change just that ID # like 7fe0010 to a different public ID for another text color that you know will be white. Do the same thing for the background. This part can get tricky an luckily not a ton of apps will have that issue.

 

10. Build it again and install it again. Run the tests and do the same thing for any text color issues or colored backgrounds. Any white backgrounds will more than likely be a drawable image in the res folder so as long as most backgrounds are dark-med gray and all text is green, you’re ready for drawable images. Not gonna get into .9’s cause I’ll assume you already know how to outline the existing .9.png image and fill it with a solid color. So go through all the drawable folders in res and change all backgrounds or images that appear to be backgrounds to black and make sure any icon image like for settings or compose text are light now if they were dark in the stock app.

 

11. Finally, open colors.xml again and hit control+H and put 444444 in the top box and 000000 in the bottom box.. replace all.. Then hit Control+H again and put 00ff00 in the top box and ffffff in the bottom one… Build and thoroughly test again.. Hopefully you did some deep testing when our backgrounds were dark-med gray so you could still see any black text at that time.. If you’ve changed every drawable image in those folders and have ran tests throughout layouts, drawable,colors, etc and still have a white background or black text, open smali in Note++ and do a search for BackgroundColor if it’s a background issue. See how many smali files pull. Read through the list of the files at the bottom of Note++ and see if any seem obvious. If so, via the decompiled apk, navigate to that smali and open it in Note++ and do a search for -0x1 just in it. If anything pulls looking similar to this const/4 v2, -0x1 then that could be the white background. Look above and below again but also if the v2(variable) is also a v2 on that SetBackground line, then there’s even more of a chance that’s it.. You can change it to const v2, -0x100 for black. Save that smali but don’t close out of Note++ and build the app and install it. If it quickly errors on classes, open Note++ again and make that line const/high16 v2, -0x100 and save and build again..

 

12. These aren’t fool proof methods and learning takes time but it helps to guide you as to how to invert an app. Something I do in most apps is a smali search for the beginning of the framework-res public ID’s for Theme.Styles and colors.. System styles start with 0x103 so if anything pulls and has 5 more characters then go check the public.xml in framework-res to see if it’s something you might wanna change. Then colors are 0x0106***** so I do a search for 0x106 and see what pulls and do the same as with styles id’s… Little tricks we’ve learned along the way…

 

13. Hopefully this guide is helpful and we’ll add more to it and add some new guides to help out the community.. 

 

*This Guide belongs to Team Black Out. DO NOT post this material on any other site, blog, or forum. If you want to mention the guide, your thoughts on how good it is and the LINK BACK to this page, then that’s acceptable.*

 

 

 

 

 

 

Walk Along Black Out Guide

 

This tutorial is a walk along, step by step guide. If you can’t get it after using this then … well, you know.

 

Make sure you have all the files from the top of the guide above all set up and then grab the test.apk from below

 

Test.apk   This app is Dropbox (credit goes to them) It’s fairly simple to invert is why we chose this as the test app for the Walk Along Guide.

You also will want to decompile your framework-res.apk from your rom to use as a reference in parts of this guide.

 

Make sure you have Apk Multi Tool from the link at the top of the Guides page. Also, have apktool and aapt (newest ones available) and drop both of those into the “other” folder in Apk Multi Tool.

 

 

Load the test app from above into the “place-apk-here-for-modding” folder and open the script. A black pop up/cmd box with green text will appear. Hit any key to proceed and you’ll see a menu that looks like this

 

Hit 24 to choose your project and the script will load a page with all your apps. Whatever # your “test.app” is choose that. The script will go back to the main screen but at the top it will have test.app as the selected project. Hit 9 to decompile the apk. Once it’s finished, hit 12 in the script to build it real quick just in case it errors out (this app shouldn’t unless you have something set up wrong). This is good practice no matter how good you are. Once it builds, hit 2 in the script and minimize the script. That was for testing so now we’ll get into the xml code. Open the “projects” folder in Apk Multi Tool and select the test.app folder. See pic below.

Highlight “res” first and hold the Ctrl button and then highlight “AndroidManifest“. Let go of Ctrl and right click and choose “Edit with Notepad++” When Note++ opens, choose yes to open all the files. Once it loads them, hit Ctrl + F to Find.

Note++androidbackgroundsearch

 

Type android:background into the text field like the screenshot above. Then select the “Find all in all opened Documents” tab that is highlighted in light blue above. When it loads, you’ll see that there are 190 hits in 79 files.

 

note++androidbgsearchresults

 

 

Don’t rush through this part, but read each of the highlighted (orange/yellow) lines to make sure you don’t leave one that uses a white background.  Scroll down reading the items and you’ll get to Camera_upload_grid.xml that has a   “android:background=”@*android:color/white“. Copy that whole part and hit Ctrl + H so the “Replace” popup appears. In the top section paste that line and in the bottom paste it also but you’ll need to change it. Go into the decompiled app in Apk Multi Tool and open res/values/colors.xml.

 

 

The top on is “abs__background_holo_dark” which we know is a background. Copy that and past it into the bottom of the “Replace” popup in Note++ making that bottom text field look like this “android:background=”@color/abs__background_holo_dark” so now instead of the backgrounds using a hex value or android’s white hex, it’s going to use our in-app hex value in colors.xml. Hit the “Replace all in all opened Documents” tab.

 

 

It will replace all the @android:color/white’s to @color/abs_background_holo_dark instead. Keep scrolling down and ANY android:background that is using a hex value (#ffffffff) or a vague redirect (@color/gray) make sure to use the Ctrl + H and replace those with our new one. If it’s @*android:color/transparent you can leave it alone. Next up is android:textColor. Hit Ctrl + F and type that into the text field like we did with android:background. 166 hits in 43 files will pull.

 

 

You can see the android:textColor=”#ffbbbbbb”,  “#ffffffff”, “#ff717171”, and “#ffcccccc” in the screenshot and in your search results in Note++. Open your Colors.xml again now to find which line we want to use for the text color.

 

 

Obviously enough we’ll use that highlighted item since it’s named “text“. Go back to Note++ and hit Ctrl + H to replace. Copy that whole “android:textColor=”#ffbbbbbb” part and paste it into the top and bottom text fields in the popup. Change the bottom one to “android:textColor=”@color/text“. Make sure you’re keeping the space between lines also (if you copy it like android:textColor=”#ffbbbbbb”) there is NO space after the last ” so you need to make sure the one that is replacing doesn’t have a space also. Or you can copy it like this (android:textColor=”#ffbbbbbb” ) so there IS a space. If so, make sure the replacement has a space also. If you fail to do this, it will build with invalid tokens errors which means it blends together in the saved xml file like this (android:textColor=”#ffbbbbbb”android:background=”#example”

 

 

Scroll through all of the android:textColor lines and change all of the using a hex value (#ffcccccc) or @*android:color/anything or a vague redirect (@color/gray). When you get to the styles.xml file the replacement can be done by copying the whole <item> line or just double click on the line in the search results and it will open the actual file in the top part of the workspace. I do both methods depending on how many of 1 item there is. On this, let’s just double click and replace individually.

 

 

First things first, let’s remove the Inverse from those 4-5 lines in styles. Double click the first one (line 260) and delete Inverse from it as well as the others. Then you’ll see  some hex value items like this:

 

 

Double click line 527 for #ffffffff and it will open styles.xml in the work space at the top. Change that from (<item name=”android:textColor”>#ffffffff</item>) to (<item name=”android:textColor”>@color/text</item>). Do that on line 536, 573, 579, 585, 601, and any other in styles that need it. 

 

Do a search in Note++ for cacheColorHint, divider, @*android:color/ and Inverse, also. The cacheColorHint is the scrolling background so make sure they’re all set to our background color we’re using or at least to A background color in colors.xml. The dividers are obviously going to be the dividers and some are hex values so you can change those if you want to. If those or any background points to @drawable/anything, leave those alone. Generally those will be images unless there is a drawable.xml in res/values. The Inverse search will pull a few android references to textAppearanceInverse so on each of those double click the file and delete Inverse from that line. Searching @*android:color/ will make sure we didn’t miss any framework edits.

 

 

 

Good thing we did that search, huh? Styles has 2 we need to change so click on line 216 and change that from (<item name=”android:popupBackground”>@*android:color/white</item>) to (<item name=”android:popupBackground”>@color/abs__background_holo_dark</item>) and then change line 911 to the same thing even thought it’s already pointing to android:color/black.

 

Now open res/values/colors.xml and make it look like this:

 

Rather than going through and trouble shooting each line that we’re not sure about I just used my own code. The hex values with letters like #ffcccccc is a lighter color and the one with low numbers like #ff222222 is darker for backgrounds.

 

Now open res/values/styles.xml and line 328 needs to be changed:

 

 

So instead of this (<style name=”Sherlock.__Theme.Light” parent=”@*android:style/Theme.Light.NoTitleBar”>) make it this (<style name=”Sherlock.__Theme.Light” parent=”@*android:style/Theme.Black.NoTitleBar”>)

 

 

Don’t change the @style/ items though. They are already pointing to a theme style in-app. We only want to change the styles with @*android:style/ as the parent. Line 479 is next. It will look like this:

 

 

 

Change the Light to Black like we did above.

Now go to res/values-v11/styles.xml. It will look like this:

 

 

 

Remove the Light in the 2nd one where it says Holo.Light.

Open res/values-v14/styles now. It has a lot of items. On the first 46 lines remove any Light and Inverse. Then lines 53 and 54 need the parent to be @*android:style/Theme.Holo. On line 69, on the right side parent, remove the Light from the @*android:style/Theme.Holo.Light.Dialog parent. Like in the screenshot below:

 

 

 

Ok, next up is res/color(folder). There are some text files in there that are pointing to black. Here’s the example to show you what to do, then go through the rest of the xmls in res/colors and make sure you get them all. Open res/colors/action_mode_item_text_color_state_list.xml

 

 

 

That’s how it looks on stock. Below is how you need to make it.

 

 

 

Make sure you go through and do that to any other files in that folder. Bottom_button.xml, Button_update.xml, Filelist_text_name.xml, Filelist_text_small.xml, Link_button.xml, Local_filelist_text_name.xml, Local_filelist_text_small.xml, ss_bottom_bottom_text_color_dark.xml, ss_bottom_bottom_text_color_light.xml, tab_text_foreground.xml. Those should be all of them.

 

Drawable images aren’t used a lot in this app. Buttons and some tabs are in there but not required for an inversion. We’ll cover images next. Now, open res/drawable and there are xmls in that folder for some backgrounds. Here’s the example screenshot of what to do.

 

 

That’s what it looks like on stock. The top one is focused background, the middle is pressed and the bottom is default. The item for solid is the actual background and the item for stroke is the outer border. You can make the stoke be a dark color also if you want but the important part is making sure the solid is pointing to our colors.xml like this:

 

 

 

Use that same method on all other drawable.xml files. Make the pressed background a different color than the rest so the user can see when they’ve pressed the background. The pic below is all of the drawable.xml file you need to check.

 

 

 

For images you can change the tab backgrounds but they’re .9.png’s that stretch and we’re not going into all that right now. There are some buttons you can change, also, if wanted. Those can be done later though. We’re just about finished up with the code.

Open your test.apk and highlight smali and AndroidManifest and choose “Edit with Notepad++” again. Hit yes to open all 1999  smali files. When it loads, do a Find (Ctrl + F) for -0x100 (black)

 

 

 

8 hits in 6 files. The one we want to edit is the smali/com/dropbox/android/activity/TextEditActivity.smali line 599. Double click on that one and your workspace will load it like this:

 

smali2

 

 

Line 599 has the -0x100 in it and line 601 has “SetTextColor”. It also has a variable (v2) that matches line 599. With the high16 included, -0x100 is black. -0x1000000 is also black and even 0x0. Change line 599 by removing the two 0’s from the 100 and removing the /high16 like this:

smali3

 

 

 

That will make the EditText when composing a new text file be white instead of black.

The next search is going to be for @*android:style’s but in smali, those are public id’s from the framework-res.apk/res/values/public.xml. In the xml it will have another “0” after the x but in smali, we don’t use that one. We make is look like this “0x103004f” instead of “0x0103004f”.  Below is a screenshot of an example.

 

 

 

Do a search in Note++ for the beginning part of the id for @*android:style/ which is 0x103 like this:

 

 

 

9 hits in 4 files. I already know which ones to change but we’ll go over all the hits anyway. The first one is “const v0, 0x1030059” which if you look in YOUR public.xml in framework-res.apk/res/values/ and do a search for it, you’ll see that it’s the id for Theme.Panel. We can leave that alone but if that id would have been “const v0, 0x103005a” we would have changed it since that’s Theme.Light.Panel.

The next hit is “const v7, 0x1030073“. Search that in your public.xml from framework-res.apk again. You’ll see that it is the id for “Theme.Holo.Light.Dialog”. We want to change it to the opposite theme style’s public id. So, since this one is Theme.Holo.Light.Dialog, we want to make it Theme.Holo.Dialog. Not Theme.Holo, not Theme.Holo.Dialog.MinWidth. So look above the Theme.Holo.Light.Dialog line and you’ll see Theme.Holo.Dialog has an id of “0x103006f”. Below is before/after on that edit:

 

smali4

smali5

 

 

 

That will change a pop up dialog alert box to use a darker Holo based theme instead of a lighter Holo.Light based theme.

 

Now there are a few more 0x103 search hits. The next one down is in that same smali file and is already set to Theme.Holo.Dialog so we can leave that as is.

Next file down starts with “0x1030128” which is Theme.DeviceDefault (leave it as is).

Then we see “0x103006b” which is Theme.Holo (leave it as is).

Next is “0x1030005” which is is for Theme (we can leave that also).

The next one is “0x103006e” which is Theme.Holo.Light. We need to make it the opposite theme style so we need to make it Theme.Holo. In your public.xml from framework-res.apk you’ll see the id for Theme.Holo is 0x0103006b so let’s change that line to look like this: (don’t forget to NOT use that 2nd 0)

smalilight

 

 

smaliholo

 

 

Ok, that one is finished so we have 2 left to look at. The next one up is “0x103000c” which in the public.xml from framework-res.apk is for Theme.Light. The opposite of that is Theme.Black, not ThemeHolo. So in the public.xml you’ll see the id for Theme.Black is “0x01030008” so change it to look like this before/after:

 

themeblack

 

 

 

The final search hit for android:style id’s is “0x1030010” which is for Theme.Translucent.NoTitleBar (Leave it as is)

 

Next we can do a search for @*android:color/ which is also in id format from the public.xml in framework-res.apk. The first part that is for colors is “0x106” On this, you’ll get a few hits.

“0x106000d” is the id for android:color/transparent so leave that as is

“0x106000c” is the id for android:color/black. Double click on those and you’ll see that the variables are for GetColor followed by a SetBackgroundColor so we aren’t changing those. Here’s 1 example screenshot of the black text color id in a smali.

 

smali106

 

 

There are other things we search for in smali like SetTextColor but not on this app.

 

Looks like we are finished with all the code for the app so make sure any open files are closed and saved and save all in note++.

 

Open the script from the Apk Multi Tool and hit 12 in it to compile the application. Earlier you decompiled it and rebuilt it to ensure no build errors so if it errors out now, you’ve made a mistake or typo. Reading the error log will usually tell you where the error is but I’m not getting into all of that. Once it builds hit 2 and then 13 to sign the app. (In some applications if you open the stock apk with 7zip as an archive it will have more folders than the app that just built, like Com, Org, etc. If so, before signing the app open the unsigned.apk and the stock.apk both with 7zip as an archive and drag over the extra folders ONLY into the unsigned.apk and close both 7zip popups.)

In this case, the stock app has a folder named “Templates” so drag that into your unsigned apk. Close out of 7zip and copy the unsigned.apk and paste it into the “place-apk-here-for-signing” folder inside Apk Multi Tool. Hit 18 in the script to batch sign an app in that folder. The script will close itself out and you  have a signed application. You can rename it but don’t add any files now or it will break the signature. Load that app onto your phone and make sure you have uninstalled the stock Dropbox app before loading up the one you just built.

This guide hopefully will guide you and show you how and why we make the edits we do to successfully pull off a Blacked Out app. It takes time and practice and reading and more practice but you’ll get there soon.

6 thoughts on “Tutorials

  1. Can’t find answer on your website.How save is this app? What happens if for instance Play Store receives an update? How save when new OTA system-update? Can it not cause system crash installing and removing inverted changes? Or will the updated apps just overwrite with non inverted new version? If this app is save I would not need considering anymore using custom rom on my Nexus 7 2013 in stead of official stock rom. My eyes can’t handle all the white of apps in evening/night.

  2. I got the blacked out skype…but whenever I receive a message from someone (other then when someone uses /me to send a message) it shows up white. Anyone know of a way to fix it? Here is the example of what I am talking about.

    If it helps, I am willing to do the patch on my own if I know where to fix it and how to fix it in a step by step tutorial since I never tinkered around with a APK before, but I want to start doing so. (here or pastebin link works too if it gets lengthy)

Leave a Reply

Your email address will not be published. Required fields are marked *