[T-Mobile myTouch 4G Slide] Blue6IX:
Return to Contents Page - doubleshot Developers Reference

----

Part 1: Custom Sense Lockring on the MT4GS - easy step-by-step.

Part 2: Edit .9.png files for the MT4GS - step-by-step.

Part 3: This thread.

--------

So in Part 1, you were introduced to working with graphics in a very in-depth and explanatory way. Even simple things like copy and past were over-exaggeratedly described. We can call Part 1 a beginners tutorial.

In Part 2, we built on what we learned in Part 1. Some concepts were expected to be known, and we covered a lot more but didn't describe to death obvious things during this tutorial. We can call Part 2 an intermediate level tutorial.

For Part 3 we will be laying out an advanced level tutorial. It is assumed you have read and learned what was taught in the first two parts. You are expected to be familiar with de-compiling and re-compiling .apk files at this point.

We will be building on that knowledge here, but unless you have learned what was taught previously ( or already have that knowledge ) this tutorial may be confusing or difficult to follow.

After working through Part 3, you will be able to explore on your own what you can do with the skills you have learned in this series.

--------

Let me say right up front - this seems like a whole lot of work for one tiny little change.

This is a long and in-depth guide, but once you know how to do it... the whole edit described in the tutorial will only take 5-10 minutes to do.

( Obviously longer on files with more graphics, but for just this? Not more then a few minutes )

The point of this is not to change something amazing - simply to learn how to work with .m10 files - please do not be let down by what we edit or you are using this guide for the wrong reason.

--------

For the final installment of these graphics tutorials for Android on the MT4GS, we will be covering .m10 ( mode 10 ) files - touching on what they are, explaining where to find them, and also how to work with them.

You can use the other two tutorials to edit all the graphics you can find on the device, and then still be left with stuff that displays in the old pre-edited form.

What gives?

The answer lies with .m10 files. These are sneaky little files that are hidden, and even if you de-compile an app you won't be able to play with them - they are still scrambled. The M10 Editor tool will solve this problem, and this is what we are going to learn how to use.

* - Once again, this guide is written for a Windows XP machine. If your environment is different please adjust accordingly.

You don't require much to work with .m10 graphics files, so let's take a look at what you need.

What you need:

*1 - Android SDK installed

*2 - Java JDK installed.

3 - Microsoft .net Framework 4.0

4 - M10 Editor

5 - Photoshop ( or equivalent - directions for photoshop ) installed and ready.

6 - Rosie.apk from the Sense ROM you will be editing it for.

* - The Android SDK/Java JDK is an optional install, but to get the most out of the M10 tools you will want to have them installed. See the M10 Editor thread for other applications of the tool.

Besides, if you've made it this far, you really should have both development packages installed anyway.

--------

First thing is to install the Android SDK and Java JDK - both actions are outside the scope of this guide but well documented all over XDA. Here is a post I wrote on installing to a Windows XP machine

This guide will pick up assuming both the Android SDK and the Java JDK are installed.

This guide also assumes that M10 Editor is installed. Please see the M10 Editor thread for the tool if you have trouble in this area.

( ... and of course, that you have Photoshop installed and ready...or another graphics program of your choice - but instructions are for Photoshop. )

--------

Note:

The reason why I listed the Android SDK and Java JDK is because:

- You can't use the Android SDK without the Java JDK.

- The M10 Editor allows you to use ADB functions.

- The M10 Editor allows you to zipalign apk files.

People may want to use the M10 Editor to push their apk file to the device as a shortcut to quick testing of their changes.

You can use the M10 Editor without the Android SDK and Java JDK - but you should have them to use the Zipalign and ADB functions.

Your (existing) .apk file will work without zipaligning it, and you don't need adb to put the file on your device for testing - but they are both helpful.

--------

Preparation: Setup.

Let's set up our dev environment.

1 - Make a new folder on your desktop called "RosieEdits"

2 - Place your Rosie.apk file in the "RosieEdits" folder.

3 - Open the "RosieEdits" folder, and create two new folders in it. Call one "RosieOriginal" and the other one "RosieNew".

4 - Copy Rosie.apk and paste her into each folder so you have 3 copies, one in each folder.

We are now done with our .apk file for the moment, and have our project folders set up. Now we need to configure the M10 Editor.

( skip the configuration of the M10 Editor if you do not have ADB and Zipalign setup on your computer. I recommend reading it either way though.)

Open the M10 Editor.

You will see six tabs at the top of the interface, labelled:

Start | m10 Files | Editor | Log | Changelog | About

We will only be working with the first three:

Start | m10 Files | Editor

To set up the M10 Tool - in the Start tab do the following:

1 - Under 'Paths' locate 'Zipalign' and click on 'Choose' all the way on the right hand side.

Then either Navigate to your:

- apk_manager_4.9 directory and locate 'zipalign.exe' in the 'other' folder

-OR-

- the 'Tools' folder in the

Android SDK

directory and locate 'zipalign.exe'

2 - Under 'Paths' locate 'ADB' and click on 'Choose' all the way on the right hand side.

Then navigate to the 'platform-tools' folder in your

Android SDK

directory and locate 'adb.exe'

Once you have added both of these tools to the M10 Editor paths we are ready to proceed.

--------

Note: Even more important then working with apk_manager_4.9, you want to make sure you do not close the M10 Editor until you are completely done with the .apk file you are working with.

If you do, you will lose all of your changes and have to start over.

--------

Part 1: De-Compile.

This is a two-step de-compile process. Don't worry, it's not as scary as it sounds.

By now you should be familiar with using apk_manager_4.9 to de-compile your apps, and using the M10 Editor everything is handled in a nice little program window for you.

So - let's see how to go about doing this.

Part 1-A: De-Compile .apk

Okay, unlike the prior tutorials where you can get away with just diving into your work, we are going to preface this with re-booting your computer.

It is important that you don't really do anything else with it after you boot. Don't sign in to any messenger apps, open any programs you don't have to, or generally put anything in RAM that doesn't have to be.

You really don't want your computer to make a mistake while you do this - and by keeping everything from running that we don't need to use we can help prevent this from happening.

So now that you have rebooted your computer fresh, let it sit for a minute, and have a clean and ready machine to work on, let's get to it.

1 - Open the M10 Editor.

2 - Under the 'Start' tab, in the 'm10-Files' field, you will see 3 things:

- Load File button

- Save File button ( greyed out )

- Check box with a check in it for 'Zipalign APK'

3 - Click the 'Load File' button and navigate to the 'RosieNew' folder. Load Rosie.apk

* - Be patient - this could take a while depending on your system.

You will see a progress bar pop up with blue progress bars, when it's finished they will turn green and it will say 'Loading Done!'

4 - Click 'Close' on the progress bar when the operation completes.

5 - Stop.

--------

We have now de-compiled the Rosie.apk file into the M10 Editor. However, we still have not de-compiled the actual .m10 files we are going to work with.

To do that, proceed to Part 1-B below.

--------

Part 1-B: De-Compile .m10 Files

1 - Click the 'm10 Files' tab. You will see quite the list of files in the window.

At the bottom of the M10 Editor program window you will see the following buttons:

Decompile/Show | Decompile all | Refresh selected | Check file | Check all files

... and a check box that says 'Decode Images' next to it.

Take a minute to browse through the list. Don't try to do anything to it yet, just look it over and kind of familiarize yourself with it. When you are ready move on to step two.

2 - Find and select the line that ends with:

...\M10EDITOR\Rosie\assets\port\scenes\Rosie_workspace.m10

The beginning of the line was left out because that will be unique to each computer. You can find this line near the very bottom of the list.

Note: - This will be the portrait mode Rosie stuff - a very similar line further up will be for landscape.

3 - Once you have selected this line, at the bottom of the 'M10 Editor' window click the check box for 'Decode Images' and then click the button that says 'Decompile/Show'

It will then ask you if you would like to do this, click 'Yes'

You will briefly see a progress bar, and then the M10 Editor will switch to the next tab called 'Editor'

4 - Stop.

--------

We have now successfully de-compiled the .m10 file we are going to be working with.

So far, not bad, huh? That two-step de-compile process wasn't as bad as it seemed before you started after all.

Next up we will be working with the de-compiled .apk and the .m10 files we now have available to us.

--------

Part 2: Finding & Accessing the .m10 Graphics

You should be in the "Editor" tab of the M10 Editor tool.

You now see the top level of a tree called 'Rosie_workspace.m10'

Do the following:

1-A: Expand 'Rosie_workspace.m10'

1-B: Expand '0x7c8bed89' ( may be different for different Rosie.apk versions )

1-C: Expand 'Textures'

1-D: Click the first 'Texture' under the 'Textures' heading.

You will now see a picture appear on the right-hand side of the M10 Editor program window.

4-E: 'Right-click' on the picture in the right-hand side of the M10 Editor program window. Select 'Show in Explorer'

You will now have a windows explorer window open that shows all the files in the de-compiled Rosie_workspace folder.

-

Important: Do not close the M10 Editor while you are working in the explorer window.

-

Now that we have the de-compiled Rosie_workspace.m10 file open as a folder in our explorer window, click on the 'View' in the file menu at the top of the window, and select 'Thumbnails'.

You can now browse through this folder and quite easily see what graphics files you can find.

We will be looking for 3 specifically:

1 - 0x000000a9.dat

2 - 0x00000063.dat

3 - 0x0000019e.dat

Okay - depending on what version of Rosie.apk you have for the MT4GS - they could be differently named.

To make it easy, there are only four blue graphics files you will see in this folder.

Ignore the one that looks like a blue pencil on a blue pad of paper - and just work with the three other ones that are solid squares.

--------

Part 3: Coloring the Graphics

This part is easy, just open one of the solid-blue square graphics into photoshop and change the Hue the way I showed you in the previous tutorials.

( Image -> Adjustments -> Hue/Saturation )

Set your desired hue, but make it the same for all 3 of the graphics.

For the sake of the tutorial, just make sure the Hue window is set to master and slide the hue slider all the way to the right.

The text box over the Hue slider should say +180, so click OK and then save the image ( don't change the extension or anything - just save. ).

Do this for each of the three solid-blue square graphics, but make sure to do them one at a time, saving and closing each one before moving on to the next.

Once done, move on to Part 4.

( You should be able to actually edit the graphics well enough at this point that this description is sufficient. If not, go back to part 1 for a more detailed explanation. )

--------

Part 4: Saving & Zipping the .apk

Okay - here we are, this is the last thing we have to do.

If at any time you closed the M10 Editor program window, then you have lost all of your changes and you will have to start over.

So the first thing you have to do is close the explorer window you have been working from. NOT the M10 Editor program window, just the explorer window it opened.

Once this is done, make the M10 Editor window your primary focus. You should still be on the 'Editor' tab.

Note: You will not see the changes you have made in the right-hand side of the M10 Editor program window at this time.

Click on the 'Start' tab.

Once back on the 'Start' tab, make sure zipalign is checked if you have it installed, if not just click 'Save File'

A dialog box will pop up, your normal Microsoft save window. Make sure the filename and filetype are correct, and then click 'Save'

This could be quick, or take a few minutes. Just have patience.

Once done - you may now close the M10 Editor program window.

--------

That's it - we're done.

The only thing left is to test our change, so install the Rosie.apk file on your Android.

After you get it booted up again, open the app drawer. Make sure you are in PORTRAIT mode.

Okay, now, when you touch the little picture of a house in the lower-right hand corner of the screen to return to your home screen, pay attention to the color of the highlight on the button when you press it.

This is what we changed.

( Anti-climatic, I know, but that's what it was. )

To make up for that, I will let you figure out what else was graphically changed by this edit.

Request: Please do not post the answer below, as this is part of the skill-set this tutorial is aiming to teach. Let others learn as you are.

Honestly, out of the .m10 edits we could have done, this was the easiest and least complicated to use as an example...

... and this was only a portrait mode edit - so you can see now that there is more to check on doing to make this a full change. The important thing here is not the change, but how to do it.

--------

Now, something to note is that you do not necessarily have to change the .m10 file in the .apk file.

What you can do is de-compile an app ( maybe using apk_tool_4.9 ) and then you can use the .m10 editor to edit the .m10 files directly in the de-compiled app folder.

They will be in the 'Assets' folder of a de-compiled app if it has .m10 files.

While this tutorial was focused on a graphical edit, when it comes to .m10 files graphics are only a very small part of what you can change.

--------

Conclusion & Thoughts:

In this tutorial you learned how to use the M10 Editor tool and how to work with .m10 files.

Now you can hunt down and find all those graphics that you thought you changed but seemed to keep their pre-changed state.

As graphics are only a small part of what .m10 files hold, there is much more waiting for you as you learn how to do more with your Android system.

You may not want to get into coding and just stick with graphics - that's cool too.

Either way, this series of three tutorials should give you everything you need to get a solid start on editing your Android system beyond the user settings presented to you within the operating system.

Don't forget to go back to the M10 Editor thread for the tool and thank the author for making it available to you.

Happy modding!