Android OS Forum banner
1 - 20 of 125 Posts

·
Themer
Joined
·
1,078 Posts
For those that have asked for a flashable version, Here it is. This is the Mms.apk from CM9, so I don't know if it will work with all roms, but it should as long as the dev didn't change anything in this apk. Try at your own risk, and let me know if it doesn't work, and what rm your using.

This is using iPhone style bubbles. (Images were not made by me, and I take no credit for them.)

http://dl.dropbox.co...ubble%20Mms.zip

I'm sure a lot of you saw the thread, that alatedseraph started, about creating a bubble themed Mms app. The two of us went back an forth in that thread, trying different things, and finally figured it all out.

I thought it would be nice to make an actual How-to, so we can share the new found knowledge.

I want to start by crediting alatedseraph for the idea, and a lot of the information here.

Things you will need first.

Android sdk (for .9batch tool if you use a .9)
apktool setup
framework-res.apk and Mms.apk (from your ROM)
Photo editing software. (to make bubble images)
7zip, for moving your modified files into the original apk (This maintains the signature)
A flashable zip, to install your themed Mms.apk. (I will upload an empty one at some point)
notepad++ or similar text editor (for xml changes)

Step 1 - Install the framework-res.apk for your rom.

Place the framework-res.apk, and the Mms.apk in the same folder as your apktool, then open a command prompt/ terminal in that directory, and type this command.

apktool if framework-res.apk

The result should say famework installed to "your user directory."

Step 2 - decompile Mms.apk using this command

apktool d Mms.apk (apktool will automatically use dependencies)

You can now navigate to the folder that was created, and see all of the resources, xml's, and images for Mms.apk

Step 3 - create your New sent and received bubble images

For Jelly Bean, you can skip steps 3and 4. You will instead edit/replace the existing images names hairline_left.9.png for Received bubble, and hairline_right.9.png for sent bubble

There are several ways to do this, but this is what I did. Feel free to use your own method or images in place of my example. I do recommend using a .9.png tho, as it allows you to set the way the images will stretch.

Navigate to the Mms/res/drawable-xhdpi folder, and find ic_launcher_smsmms.png.

Edit this image to the solid color that you want for the received bubble, and save it as recv_bg.png (in the drawable-xhdpi directory)

Flip it right to left, and change it to the color you want for the send bubble, then save it as sent_bg.png (in the drawable-xhdpi directory)

If you want to make them a .9.png follow this, if not skip to step 4.

To create a .9, you need to open your new image using draw9patch.bat. It is located in the tool folder of your android sdk.

Once open you will see your image, and the tool will only allow you to draw on the 1 pixel edge it has created around your image. For more information on how this works, go here. http://developer.and...draw9patch.html

After the patch is done, click file, save .9, and save it in your Mms/res/drawable-xhdpi folder as sent_bg, and recv_bg. The .9.png extension will be added automatically. (make sure to delete the original non .9.png you created there now)
 

·
Themer
Joined
·
1,078 Posts
Step 4 - Adding a second listitem_background.xml to allow pressed status for the two new images. Also, to direct these xml to display your image instead of a solid color.

Navigate to Mms/res/drawable

Copy listitem_background.xml, and paste is back into the same folder so there is the original, and the copy.

Change the name of the copy to "listitem_backgroundsend.xml".

Open this new XML, and change this line
Code:
<br />
<item android:state_selected="false" android:drawable="@android:color/white" /><br />
to
Code:
<br />
<item android:state_selected="false" android:drawable="@drawable/sent_bg" /><br />
Next open the original listitem_background.xml

Change the same line to.

Code:
<br />
<item android:state_selected="false" android:drawable="@drawable/recv_bg" /><br />
You now have two unpressed states looking at your new images.
 

·
Themer
Joined
·
1,078 Posts
Step 5 - edit the layout xml's for sent and recv.

Navigate to the Mms/res/layout folder. You are going to edit these two xmls.

message_list_item_recv.xml
message_list_item_send.xml

IF Jelly Bean skip to this part. Your xmls are already looking at two different images.

Open the send xml, and look for this line.

Code:
<br />
<br />
<LinearLayout android:orientation="vertical" android:id="@id/message_block" android:background="@drawable/listitem_background" android:layout_width="0.0dip" android:layout_height="wrap_content" android:minHeight="@dimen/avatar_width_height" android:layout_toLeftOf="@id/avatar" android:layout_alignParentLeft="true"><br />
There are two changes you need to make in this line for the send xml. The first is to point it to use our new drawable xml to display the sent bubble. (this is for the message_list_item_send.xml only. The recv xml only need the second change)

Change
Code:
<br />
android:background="@drawable/listitem_background"<br />
to
Code:
<br />
android:background="@drawable/listitem_backgroundsend"<br />
If Jelly Bean, Continue here.

The following steps will need to be done to both message_list_item_send.xml, and message_list_item_recv.xml.

The second change will make your bubble wrap the text only, and not extend all the way to the side of the messaging window.

change (this will say right instead of left in the message_list_item_recv.xml)
Code:
<br />
android:layout_alignParentLeft="true"><br />
to
Code:
<br />
android:layout_alignParentLeft="false"><br />
Next, look for this line.
Code:
<br />
<TextView android:textAppearance="?android:textAppearanceSmall" android:textColor="@color/text_hairline" android:id="@id/date_view" android:background="@drawable/listitem_background" android:layout_width="wrap_content" android:layout_height="wrap_content" /><br />
We need to change this to a transparent background, so it will not display a separate bubble around the time stamp in the message. I used a simple transparent hex to accomplish this. If you know of a better way, feel free to use it.

change
Code:
<br />
android:background="@drawable/listitem_background"<br />
to
Code:
<br />
android:background="#00ffffff"<br />
You may be able to delete this from the line to accomplish the same result. I have not tested that tho.

Step 6 Compile the apk with your changes

All of the changes are complete, so now you need to compile it. Compiling with apktool will automatically add your new images and drawable xml to the resources.

Open a command window/terminal in your apktool directory, and type this command.

apktool b Mms

I received an error saying something about strings, but the apk was built successfully, and I have not experienced any problems. You may or may not see the same.

The resulting apk will be in the Mms/dist folder. This does not have a signature tho, so the next step will be needed before you can flash it.
 

·
Themer
Joined
·
1,078 Posts
Step 7 Move your changed/new files to the original apk.

I'm sure there are many other ways to do this, but I find this to be the easiest way. We do this because the original apk has the signature that we need to install this apk in the system/app folder.

Unfortunately 7zip only has a GUI in windows. Linux and mac will need to use a different method/program.

-Open two separate sessions of 7zip

In one, navigate to the new apk you compiled. it will be in the Mms/dist folder

In the other session, navigate to a copy of the original Mms.apk. I usually put it in my flashable zip first, but do it how you'd like.

Open the apk's in each session. (make sure you know which one is which)

In this folder, you will need to drag and drop the resources.arsc file from the new apk to the original.

- Next, open the res/drawable folder in each apk.

Drag and drop the listitem_background.xml, and the new listitem_backgroundsend.xml from the new apk, to the original apk.

- Then Navigate to the res/drawable-xhdpi folder in each apk.

Drag and drop your two new images sent_bg.9.png, and recv_bg.9.png from the new apk, into the original apk. (ignore the .9 if you didn't use them)

- Finally, Navigate to the res/layout folder in each apk.

Drag and drop message_list_item_recv.xml, and message_list_item_send.xml from the new apk, into the original apk.

You now have an Mms.apk, with the changes you want, but the signature still in tact.

From here, you can put this file in a flashable zip, and flash in CWM, or you can use adb to push while in recovery. I recommend using a flashable zip.

I will upload an emtpy zip, and add instructions on how to put this new apk in it later.....
 

·
The Jittery Gentleman
Joined
·
1,760 Posts
VERY nice guide sir. Thank you very much for your time. I did this myself last night and it works beautifully!

This most definitely needs to be stickied as well.

Sent from my Galaxy Nexus using RootzWiki
 

·
Registered
Joined
·
959 Posts
I was thinking about writing a guide for this after I finished all the touch ups and you beat me to it, amazing guide man! This is the kind of guides we need to see everywhere!
 

·
Android Addict
Joined
·
756 Posts
Have you tried this to add the iPhone bubbles? And has anyone made one for new liquid I do not have access to a computer anytime soon to make my own :-/

Sent from my Galaxy Nexus using RootzWiki
 

·
Themer
Joined
·
1,078 Posts
Discussion Starter · #15 ·
Have you tried this to add the iPhone bubbles? And has anyone made one for new liquid I do not have access to a computer anytime soon to make my own :-/

Sent from my Galaxy Nexus using RootzWiki
I could make one, but have no idea where to get the iPhone style bubbles.

Sent from my Galaxy Nexus using RootzWiki
 

·
Average Android
Joined
·
311 Posts
I could make one, but have no idea where to get the iPhone style bubbles.

Sent from my Galaxy Nexus using RootzWiki
Here are some bubble .9.pngs
Taken from the Handcent SMS application.
I take no credit for designing them.
 

Attachments

·
Android Addict
Joined
·
756 Posts
Here are some bubble .9.pngs
Taken from the Handcent SMS application.
I take no credit for designing them.
Nice can those "3d" looking ones be added or are we limited to the flat ones like in all the screenshots so far?

Sent from my Galaxy Nexus using RootzWiki
 
1 - 20 of 125 Posts
Top