[Android Apps and Games] halnovemila:
Introduction (skip it if you are in a hurry ;))

Is it newer always better than older? not always indeed...

For example, the transition from Windows XP to Windows Vista, or from Windows 7 to 8 is been for many a move backward in terms of user experience and performance.

I would say that also the new *security* features inplemented starting with Android KitKat, that highly limited the usage of the external physical SDcard and introduced a quite confusing virtual/emulated internal SDcard, gave to many users who switched to the newer Android OS a number of problems and limitations they didn't have before.

Beside operative systems, also on the applications world, of course, sometimes an older app is better than a newer.

I, for example, can't get used to the new Messaging app look, that I found on my new phone, once I for years happily and comfortably used the Messaging app that was available on my *old* Samsung Galaxy Y (with Android GingerBread 2.3.6) which was optimized for a small screen and therefore very essential but still complete and able to provide a good user experience.

Some of us, smartphone users, would like that switching to a bigger screen phone from a smaller one, would give us the chance to have bigger text, menus, labels, so that everything can be read easier than on previous smaller phone...

But that doesn't seem what developers (who are eventually very young and so their sight is still very good ;)) usually think when they have a chance to deal with a bigger screen... they rather think that a bigger screen should give the opportunity to display more things, than the same things as previously but bigger.

So, moving from my old and beloved Samsung Galaxy Y, 3inch screen, to a new Cloudfone (asian brand) 4inch smartphone didn't make me any easier to read the texts on the screen, but instead I found the screen filled of new "things" and even "empty spaces" that honestly I don't really feel the need and I found very questionable their presence... (I think that sometimes developers are just like some journalists that are in need of a "scoop", and that if they don't have one, they will try to make it out of a normal news... the marketing department usually pressure the developers to "invent" new things, a "different look" whatever it is, so that they can sell it to the public as "new"... because... you know... new is better. So it doesn't matter if "new" is really "useful", as it doesn't matter if a "scoop" is really "real").

So I tried to find an alternative SMS app on Google Play store, that looked as close as possible like my old Messaging app.

I didn't find any that looked as I wanted by default, but I found that "chomp SMS" was very customizable, featuring many "theme" options (I especially liked the option to remove the contact pics, which most of the time are just a useless box with the contact initials) that made it possible to have it looked similar, even though not same, to my previous SMS app.

Yet, the waste of screen space for empty areas, and the formats of date and time labels and other details made me willing to use my reverse engineering skills to modify "chomp SMS" so that it looks perfectly same as the SMS app I was using before.

Here below I'll show you what I've done, what I modified and where, so that you too can do your modifications at your will, if you like to.

Let's start!

This is how the default Messaging app on both the phones, the old smaller, and the bigger new, looks like.

"Conversation List" view (first pic) and "Conversation" view (second pic)

.

I then found, on Google Play Store, and installed "chomp SMS", which by default looks like this.

.

I then went into Settings and used all the available options to customize the app look and this is the best that I've been able to achieve.

.

Compare the above with this screenshots of the SGY original Messaging app that we'll use as reference

.

From now on the only thing to do is to modify the app resources and code so...

first of all, you need to know how to decompile, compile and sign an Android app package.

If you don't know how, the simplest way to do it is to use APK Studio, a nice IDE (Integrated Development Environment) application, running on Windows and Linux, made by XDA developers member vaibhavpandeyvpz

Read this http://www.xda-developers.com/decompile-edit-and-recompile-in-one-tool-with-apk-studio/

Unfortunately such software might not work due to an older embedded version of APK Tool.

So, well... you might want to use the below attacched zip file that contains my own batch files together with the latest version of APK Tool (v2.1.0) that I downloaded from here http://ibotpeaches.github.io/Apktool/install/

Just download the zip and expand the archive in your C: disk.

You need to have at least Java Runtime Environment (JRE) ver. 1.8.0 installed (http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html)

Simply copy the apk file to that C:/Decompression.chamber folder and drag it over the apktool_decomp batch file and release, to get the apk decompiled.

As result you'll have a new folder in C:/Decompression.chamber with the same name of the decompiled apk.

To compile and sign just drag the folder over the apkt_BuildNsign batch file and release... if everything will be fine you'll find a new file named out.apk inside C:/Decompression.chamber and that's the compiled and signed apk.

Now, get the chomp SMS apk file and decompile it. (can be downloaded from here http://www.apk4fun.com/apk/1180/)

Now you are ready to modify the app same as I did (or on your own different way ;))

1) Let's get rid of that waste of screen space...

at the sides of the message box bubbles in Conversation view.

.

Looking on the layout folder (C:\Decompression.chamber\com.p1.chompsms-1\res\layout) we can find a file name message.xml that contains the description of the elements that are visualized on the Conversation view (how I found it? I don't remember :p I guess I just spot it by reading all the names of the files in the layout folder)

The message.xml file begins with this row:

<?xml version="1.0" encoding="utf-8"?>
<com.p1.chompsms.views.Message a:orientation="vertical" a:paddingLeft="2.0dip" a:padding ...

We can understand then that the contents of this layout is dynamically controller by a piece of code (a "class"), of name com.p1.chompsms.views.Message, that we can read by opening the related smali file, of name Message.smali, that we can find in (C:\Decompression.chamber\com.p1.chompsms-1\smali)\com\p1\chompsms\views.

By looking inside Message.smali we can find a few rows of code like this:

invoke-virtual {v2, v1, v3, v4, v5}, Landroid/widget/RelativeLayout$LayoutParams;->setMargins(IIII)V

Those rows, obviously, will set the message layout margins, that means the outer distance from the message box and the "container" the screen borders.

Few lines of code above, you can find a couple of "const"ants, means "fixed values"

Those constants are set by this code instructions

const/high16 v3, 0x428c0000 # 70.0f

That means that the value stored on "v3" is equal to 70.0 (floating point number).

Actually 70.0dpi is exactly the big "margin" that we want to remove.

There's also another margin, on the opposite side, which is much smaller (but still a waste) and it's set to only 2.0dpi by instructions const/high16 v1, 0x40000000.

In order to remove those margins we need to set to zero those constants by searching and replacing all the occurrences of 0x428c0000 and 0x4000000 with 0x00000000

If you wonder how can be 0x428c0000 equal to 70.0 give a look to this useful webpage http://www.h-schmidt.net/FloatConverter/IEEE754.html :)

Here's the result of this first modification.

(first pic is "before", second is "after")

.

.

2) Let's put the timestamp inside the message box bubble

The timestamp position is defined inside the message.xml layout file (already mentioned above) located in C:\Decompression.chamber\com.p1.chompsms-1\res\layout.

Having a look to that file we can see a reference to the timestamp at row number 4, above everything else, and identified by the attribute a:id="@id/message_date_label"

<TextView a:textAppearance="?historyDateTextAppearance" a:layout_gravity="center_horizontal" a:id="@id/message_date_label" a:paddingLeft=...

In order to have it inside and at the bottom of the message box, we have to move that line down, exactly under the line identified by the label a:id="@id/message_field" so that this:

<com.p1.chompsms.views.LinearLayoutWithOverlay a:layout_gravity="bottom" a:orientation="vertical" a:id="@id/message_view" ....
<TextView a:textAppearance="?historyMessageTextAppearance" a:autoLink="phone|email|web" a:id="@id/message_field" ...
<ViewStub a:layout_gravity="center_horizontal" a:id="@id/mms_layout_view_stub" ...
</com.p1.chompsms.views.LinearLayoutWithOverlay>

become this:

<com.p1.chompsms.views.LinearLayoutWithOverlay a:layout_gravity="bottom" a:orientation="vertical" a:id="@id/message_view" ...
<TextView a:textAppearance="?historyMessageTextAppearance" a:autoLink="phone|email|web" a:id="@id/message_field" ...
<TextView a:textAppearance="?historyDateTextAppearance" a:layout_gravity="right" a:id="@id/message_date_label" ...
<ViewStub a:layout_gravity="center_horizontal" a:id="@id/mms_layout_view_stub" ...
</com.p1.chompsms.views.LinearLayoutWithOverlay>

As in the original layout the timestamp is set to be positioned on the center of the screen, we also need to change the a:layout_gravity attribute from "center_horizontal" to "right" so that it will be positioned at the bottom/right of the message text.

Here's the result of the second modification (I changed the timestamp color to black using the app theme settings)

.

3) Let's change the timestamp date and time format

In my opinion the timestamp format that chomp SMS developer had chosen is unnecessarily too long and a not immediately clear as in the Messaging app of the SGY.

Unfortunately find where in the app is defined the date and time format of the timestamp isn't that easy because the chomp SMS developer(s) didn't link the format to any "style" or attr or string or anything that can be found in the "values" folder within the "res" (resources) folder; instead the format is "set" in the programmig code, somewhere, in one of the 4143 smali files

:eek:

Anyway the code must be "called" by Message.smali (mentioned above) somewhere as that's the part of the app that handle the contents of the Conversation view, including the timestamp.

By searching for the id message_date_label (which refers to the timestamp textview inside message.xml layout) inside Message.smali and for "date" I then found the method setDate(J)V

.method public setDate(J)V
.locals 3
.prologue
.line 264
iget-object v0, p0, Lcom/p1/chompsms/views/Message;->m:Landroid/widget/TextView;
new-instance v1, Ljava/util/Date;
invoke-direct {v1, p1, p2}, Ljava/util/Date;-><init>(J)V
iget-object v2, p0, Lcom/p1/chompsms/views/Message;->c:Landroid/content/Context;
invoke-static {v1, v2}, Lcom/p1/chompsms/util/cd;->b(Ljava/util/Date;Landroid/content/Context;)Ljava/lang/String;
move-result-object v1
invoke-virtual {v0, v1}, Landroid/widget/TextView;->setText(Ljava/lang/CharSequence;)V

.line 265
return-void
.end method

Here we can see that "m", which earlier is been initialized as a pointer to the timestamp view, is read (iget-object) and stored in v0, then an object "date" and the object "c" are passed to a method "b" defined in com/p1/chompsms/util/cd that will return a "text" (stored in v1) that will be set (with setText) in v0, the timestamp view!

So we need to look at the code of (C:\Decompression.chamber\com.p1.chompsms-1\smali)\com\p1\chompsms\util\cd.smali.

In cd.smali, at the part of the code related to .method public static b(Ljava/util/Date;Landroid/content/Context called by setDate in Message.smali, we can find the instructions that are executed to "build" the timestamp string, with a space (const-string v1, " ") used as junction of the date and the time part of the timestamp text.... bingo!

So now we know that is inside cd.smali that the timestamp is "build"... but unfortunately the code there doesn't use any "string" to format the date and time but, instead, it just call/uses the standard format provided by the operative system

:(

So things are getting more complicated.

In order to change the date and time format we actually need to add some "new" code in cd.smali that will set the format in the way we want.

Here is the code I've added.

In the beginning section # static fields I've added the following that define a couple of additional objetcs containers, "i" and "l" (l like lima)

.field private static final i:Ljava/text/SimpleDateFormat;
.field private static final l:Ljava/text/SimpleDateFormat;

More down after the marker .line 45 and the instruction

sput-object v0, Lcom/p1/chompsms/util/cd;->h:Ljava/text/SimpleDateFormat;

I've added the following that stores on "i" and "m" two different formats, one for the time and the other for the date

.line 99967
new-instance v0, Ljava/text/SimpleDateFormat;
const-string v1, "h:mma"
invoke-direct {v0, v1}, Ljava/text/SimpleDateFormat;-><init>(Ljava/lang/String;)V
sput-object v0, Lcom/p1/chompsms/util/cd;->i:Ljava/text/SimpleDateFormat;
new-instance v0, Ljava/text/SimpleDateFormat;
const-string v1, "d MMM"
invoke-direct {v0, v1}, Ljava/text/SimpleDateFormat;-><init>(Ljava/lang/String;)V
sput-object v0, Lcom/p1/chompsms/util/cd;->l:Ljava/text/SimpleDateFormat;

I then added the following code (which read the format from "i" and apply it to the date stored in p0) inside .method public static b(Ljava/util/Date;Landroid/content/Context

.line 999388
sget-object v1, Lcom/p1/chompsms/util/cd;->i:Ljava/text/SimpleDateFormat;
invoke-virtual {v1, p0}, Ljava/text/SimpleDateFormat;->format(Ljava/util/Date;)Ljava/lang/String;
move-result-object v1
.line 999395

which goes right above before this:

invoke-virtual {v0, v1}, Ljava/lang/StringBuilder;->append(Ljava/lang/String;)Ljava/lang/StringBuilder;
move-result-object v0
const-string v1, " "

then const-string v1, " " is been replaced with const-string v1, ", " (I added a comma)

More down, six lines down from const-string v1, ", " , soon after this

invoke-virtual {v1, p0}, Ljava/text/DateFormat;->format(Ljava/util/Date;)Ljava/lang/String;
move-result-object v1

I've added the following:

.line 999415
sget-object v1, Lcom/p1/chompsms/util/cd;->l:Ljava/text/SimpleDateFormat;
invoke-virtual {v1, p0}, Ljava/text/SimpleDateFormat;->format(Ljava/util/Date;)Ljava/lang/String;
move-result-object v1
.line 999422

And here is the result of all those modifications...

.

not bad ah? ;)

4) Let's change the bubble style and make it same as in the SGY Messaging app

chomp SMS provides a number of different message box "bubble" styles but in my opinion non of them has the same nice proportions of corners radius and "tail" as seen in the SGY Messaging app.

The bubble styles are actually defined by some related images that are part of the app resources and are saved on (C:\Decompression.chamber\com.p1.chompsms-1\res)\drawable-????-v4, where ???? is anything like ldpi, mdpi, hdpi, etc...

What we need to do is to get the 9.patch (resizable) images from the SGY Messaging apk and save them in the chomp SMS resource folder with the same name of the images that are related to the chomp SMS bubble style that we want to replace

So, first we need to find the images on the SGY Messaging app.

We need to get the apk from an SGY stock firmware... actually the apk name isn't Messaging but Mms .apk. Once we have the apk we need to decompile it and look inside the res folder for any "drawable-????-v4" folder, then using the preview, scroll all the images till one that looks similar to the bubble style is found.

Here is what I've found in (C:\Decompression.chamber\Mms)\res\drawable-ldpi-v4

...

The images names are respectively: message_bubble_readmessage.9.png, message_bubble_readmessage_selected.9.png, message_bubble_sentmessage.9.png, message_bubble_sentmessage_selected.9.png

This images are very small, and indeed belong the "ldpi" drawable group, that is meant to be used on small screen devices; they can be used on phones with bigger screen too, but they will be scaled up and therefore the image will result blurred along the borders.

These are the images that I found that are related to one of the bubble styles available in chomp SMS and that I chose as the ones that will be replaced.

...

The images names are respectively,incoming_bubble_matte_retina.9.png, incoming_bubble_matte_retina_selected.9.png, outgoing_bubble_matte_retina.9.png, outgoing_bubble_matte_retina_selected.9.png

These images are available in both mdpi and hdpi versions so their "quality", their resolution is higher than the one available on the SGY Messaging app.

As we are going to copy the SGY Messaging app images in the (C:\Decompression.chamber\com.p1.chompsms-1)\res\drawable-ldpi-v4 folder of decompiled chomp SMS (it has to be the ldpi folder because is the one that match with the size of the images) but the chomp original images are in the mdpi and hdpi folders, we need to delete the original images so chomp SMS app is "forced" to get the images from the ldpi folder.

Then the images from the SGY Messaging app, once copied on the ldpi folder of chomp SMS, they need to be renamed with the same names of the original chomp SMS images, so that chomp SMS app can find them

Here is the final result of the images substitutions (bubble style selector, before and after)

.

Conversation view scaled to be comparable in real size with the screen of SGY

.

5) Let's fix padding and margins in Conversation view

As you might have observed on the above screenshot the relative position of the text inside the message box isn't optimal and anyway doesn't match at all with our reference, the SGY Messaging app.

Also the bubble round corners are clearly blurred due to the low resolution of the 9.patch (resizable) images taken from the SGY Messaging apk.

In order to fix this we need to adjust the 9.patch borders lines that "controls" the padding, the distance between the inside message text and the bubble image borders.

There's also need to make new, bigger size images so that a better quality "bubble" image can be displayed.

Additionally some paddings attributes related to the Conversation view, have to be adjusted.

So here is the old (the first on the left) and the *new* images.

..

.

..

.

As you might observe the fix of the padding has been done by changing the lenght of the bottom and right/vertical borders black lines (more on that can be read here https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch )

The bigger size images had to be made from scratch (I used GIMP as image editing application) using the original small as a reference. The tricky part was to properly reproduce the transparency (alpha channel) and the shadow.

The bigger images have exactly double the size as the original small one.

According to the Android developers documentations, ldpi images size relative factor is 0.75, mdpi is 1.0 and hdpi is 1.5, so that means that hdpi is 2.0 times than ldpi. By doubling the original small ldpi size the obtained image is suitable to be saved on the hdpi resources folder (C:\Decompression.chamber\com.p1.chompsms-1)\res\drawable-hdpi-v4; if the device is mdpi it will just scale down (by 0.66 factor) the hdpi image, but scaling down is much better than scaling up as it doesn't blur the image.

As the original chomp SMS hdpi versions of the bubble images have been already deleted, saving the new version on that folder won't be a file replacement, but it would have been if we didn't previously deleted the orginal images.

Padding and margins of message box and Conversation layout is also controlled by some values stored in (C:\Decompression.chamber\com.p1.chompsms-1)\res\layout\styles.xml; specifically this:

<style name="conversation_messageBubbles">
<item name="android:paddingLeft">3.0dip</item>
<item name="android:paddingRight">3.0dip</item>

The value of 3.0 has to be changed to 0.0

Also on (C:\Decompression.chamber\com.p1.chompsms-1)\res\layout\message.xml (that has been modified already above)

Change the attributes values according to this:

On row

<com.p1.chompsms.views.Message a:orientation="vertical"...

change:

paddingLeft="2.0dip" to 0.0

paddingRight="2.0dip" to 0.0

paddingBottom="8.0dip" to 6.0

On row

<LinearLayout a:orientation="horizontal" a:id="@id/message_view_wrapper" ...

change:

layout_marginBottom="4.0dip" to 0.0

On row

<TextView a:textAppearance="?historyDateTextAppearance" a:layout_gravity="right" a:id="@id/message_date_label" ...

replace:

layout_marginBottom="4.0dip" with layout_marginTop="3.0dip"

Once again, here is the achieved result...

.

Above: Conversation view scaled to be comparable in real size with the screen of SGY

Below: Close up of message bubble, before and after

.

Very close to perfect... isn't it? ;)

The tutorial will continue on the following post...