Android OS Forum banner
1 - 20 of 197 Posts

·
Registered
Joined
·
72 Posts
A Beginner's guide to theming your MMS app
written by killabyte
Please don't post this on other forums. I've put a lot of time into this and I like rootz and want to support it. If you want to link back to it that's great but please don't copy and paste my work. This guide assumes you understand the why and how of decompiling your apk. If you do not, then skip to page 4 and there's a quick and dirty how-to that should be sufficient to get you ready for this.

A few months ago I decided I wanted to look into theming my MMS app. There were already some out there but I wanted to learn how to do it. I made as many notes as I could and now I have cobbled them all together into a hopefully readable enough form to help others who want to help themselves. I feel like for someone wanting to get their feet wet this is a good place to start and can help a beginner to get a better understanding of how some of the code in these xml files work. I've noticed a trend on most forums where the question will be how to do something and there will normally be a bunch of irrelevant posts to use this app, try this tool, run this rom or google it. Google doesn't always have the answer and sometimes you might want to know how to do something instead of relying on someone or something else to do it for you.

Before we start I would like to point out that I was learning as I went along doing this. Most of this I did by editing each xml a few lines at a time, building, and then running the apk to see what had changed, making a note of what I did, and then moving on to the next interesting part. Not all of the information in this will be 100% accurate but I have tried to educate myself as much as I could before posting this info. In some parts there will be multiple and maybe even better ways to do some things. For instance there are multiple ways to color your conversation time stamps. It mostly depends on what you want to do. I don't think there's really a right or wrong way.

Tools/resources

Photoshop - my preference for editing images
http://www.adobe.com...oduct=photoshop

Gimp - free and comparable to photoshop
http://www.gimp.org/downloads/

notepad++ - also free and a must have for xml editing
http://notepad-plus-plus.org/

adb or whatever file manager you prefer to get the file on and off your phone.

You'll be editing your colors using hex code. I could explain it but i'd rather provide this link. Read it, it's not that long:
http://www.htmlgoodi...Explanation.htm

We'll be working with 8 characters in our color codes. The first 2 represent the alpha channel which means they control transparency with 00 being transparent and ff being opaque. You can play around with those for more control over your color but make sure you read the link above and understand how to count in hex.

For editing text color I used this instead of flipping back and forth with Photoshop:
http://www.colorcomb...ombotester.html

Just pop up the palette and select a color and the code for it is right before your eyes in a simple web interface.

These links will also be helpful -

Bucky over at thenewboston.org has a wealth of information; of particular use is this video:
http://thenewboston....?cat=6&number=6
I would advise watching at least the next 3 after that as it will greatly help you with xml editing.

These links will also help you better understand what we're doing. They're not 100% beginner friendly but they are readable and you should be able to at least glean some useful info from them:

http://developer.and.../ui/themes.html
http://developer.and...t-resource.html
http://developer.and...rces.html#Color

A good explanation on Styles/themes
http://brainflush.wo...mes-and-styles/

BEGIN GUIDE - /res/drawable/listitem_background

Let's start out by editing our background. Open up listitem_background.xml in your /drawable dir. Look at the end of line 6 and you'll see

android:drawable="@android:color/white"

If you just want black, then change white to black. If you want more variety, read on.

TMI Warning - if you just want black and don't care for how this works then skip over this to the next part.

Setting your color here will change the background color for both sender and recipient on your messages. It can also be controlled individually using the message_list_item_recv and message_list_item_send files in your /layout dir. It's useful to change it there if you wanted each to have a seperate shade of color but I don't recommend changing it there. I'll explain why later when we get to that part. So what if you don't want white or black? Not a problem - we'll just declare (fancy java term for make) our own colors. Here's how:

Take a look in your colors.xml in your /values dir. First thing of interest you see is text_hairline and a hex color code beside it. What's happening here is that text_hairline is being declared as a color and that color is made up by that hex code - it's a grayish color. text_hairline is your time stamp on your messages. Now I don't know where in the code it's written that text_hairline = time stamp but I do know this where we change the color of it. The point here is that text_hairline is declared as a color. So for an example if you wanted to change your white background to the same color as your time stamp (text_hairline) you would change:

android:drawable="@android:color/white"

to

android:drawable="@color/text_hairline" <-- notice the @android is changed also

Then your color for your background would be the same as the color that is text_hairline.

Notice we removed the @android:color so it just says @color. That's because using @android:color/white tells the app that that we're using a color, white, which is declared (defined, whatever term you want) by the system. In other words white is defined in the colors.xml file of our framework. What if we wanted to distribute our app or what if someone else's framework doesn't have the color we decide to use? It's not realistic to expect people to use your framework because of all the incompatibilities that would introduce. So instead we declare that color in our app, eliminating the need for the framework reference. Changing @android to @color tells the app to look to its own resources for the named color.

Hopefully that's sunk in and makes sense to you. It may not be 100% correct but it's close enough for our purposes. The point is to get a better understanding of how to edit these lines and not just what to edit. That's what learning is about - knowing how to do something and knowing is half the battle.

So, to move on along - let's declare a color. Don't get baffled by the jargon - what declare means is that we're going to pick a color, name it, and tell the app "this is what this name means, when you see it do this". The name we're gonna use is going to be "light_black". So - there are a couple of ways we could go about this. We could add it right here in our colors.xml file - it would look like this:

<color name="light_black">#ff0d0d0d</color>

Then we could call that color by name in the place of white:

android:drawable="@color/white"

to

android:drawable="@color/light_black" (remember to drop @android:)

The other way to do this would be to create your own xml file in the /values dir, naming it whatever you want. You would then declare your color or colors the same as you did above. The name of the xml doesn't matter, only the resource or resources that are declared within it. In case you don't know - make sure to include the beginning line that starts with <?xml version="1.0" encoding="utf-8"?> and your last line must end under your </resources> tag and must be blank for proper formatting.

NEXT SECTION - /res/layout/message_list_item_*

Go to your /layout dir and open up message_list_item_recv and message_list_item_send. We want to edit the font color for our conversations. We could also edit the background colors as mentioned earlier, but if you edit them here you will lose the transparency effect you get when you long press on a message to fwd, delete, etc. So keep that in mind if you want to have alternating colors between sender and recipient and choose to edit here.

Look at line 9 and find the section of code that says android:textColor="#ff000000". These should be pretty self explanatory and for our example we're going to set the text color to white. You can do this one of two ways - either change the hex code from #ff000000 to #ffffffff or you could change it to

android:textColor="@android:color/white"

Remember that unless you specify your own white, the only white the app knows of is declared in the platform so we would need the @android:color identifier. If you declare your own then just use @color as was mentioned earlier.

Our last edit we want to make is to get rid of those damn divider lines between the messages. On line 6 at the very end you'll see

postition="left_upper" or "right_upper"

depending on which file you're looking at. Change upper to middle in each file. Removing these gets rid of that green line you see along the edge of your screen when using dark backgrounds. If anyone reading this knows a way to color them please post and share the info. Don't forget to do the same edits to both files.

NEXT SECTION - /res/values/colors.xml

Let's edit our time stamp and the conversation list background color. Open up your colors.xml in your /values dir. As previously mentioned, edit text_hairline to change the time stamp color on your messages. We also want to edit "list_background" which will change the background color you see when you compose a new message and it's also the background that is behind your conversations. For the example i'm going to set the time stamp to pure white and the list_background to pure black. So it would look like this:

<color name="text_hairline">#ffffffff</color> <--- makes time stamp white
<color name="list_background">#ff000000</color> <----makes mentioned background black

While we're in here we may as well edit the other three items of interest which are unread_bgcolor, read_bgcolor and message_count_color. The read_bgcolor and unread_bgcolor resources are the colors of your conversation blocks on the message list screen and i'm pretty sure you can figure out which one controls what. The message_count_color is the color of the number indicator in the upper right hand corner for the number of new messages you have on your conversation list screen. Change them same as you did the 2 lines above.

NEXT SECTION - /res/layout/recipients_editor

Now we need to change the color of the text in the To field when composing a new message, so open up recipients_editor in your /layout dir. On line 4 you'll see android:textColor - here's what it looks like when we change it to white:

android:textColor="#ff000000"

to

android:textColor="#ffffffff"

You *could* change the background color of this for a little extra customization if you wanted. To do that you would add an android:background="#00000000" substituting your color of choice for the 0's.

NEXT SECTION - /res/layout/conversation_list_screen

In the same /layout dir we want to open up conversation_list_screen and look on line 4 for

android:background="@android:color/white"

Changing this will edit the background color on your conversation list screen. You can declare your own color as we did earlier or just use a #hex code. In this example i'll change it to black:

android:background="@android:color/white"

to

android:background="@android:color/black"

You could change it to a hex code if you wanted, dropping the resource identifier and using the # in its place.

NEXT SECTION - /res/layout/conversation_list_item

Now we need to make some edits to our conversation list screen so look in /layout and open it up. We're going to change the text color of the contact the message is from, the subject (visible part of the most recent message) and the time or date of the last time we received a message from said contact. For the example I'm going to use white. Remember that the white I'm using is defined by the system, so I'll be using the @android identifier. Here's how it would look:

android:textColor="@android:color/white"

There is no textColor to change here, so we're going to add it at the beginning of lines 5, 6 and 9. I put it directly after the <TextView but it will work anywhere as long as it's in between <TextView and the closing part />. If you're curious which line controls what then look along each of those lines until you see android:id. That you should tell you what you're editing on that line. I want to add that later on we're going to alter a theme/style that would affect this area. Changing the values here overrides the style (possibly because we're setting an attribute that isn't there?) so you won't see the changes if you set this yourself.

NEXT SECTION - /res/layout/compose_message_activity

In the same /layout dir we want to open up compose_message_activity. If you want to see some more of the code at work take a look at line 2 and you'll see

android:background="@color/list_background"

That's the color we edited earlier in the colors.xml file so we don't need to edit that because it's going to use that resource which we've already set the color of. The main thing we're after in this xml are lines 21 and 22 but if you use a subject on your text messages you can change the color of the text in the subject box by looking on line 6 and finding

android:textColor="@android:color/black"

and editing it to whatever text color you like

On line 21 edit:

android:background="#ffffffff" <--- colors the text entry box at the bottom of conversation

Edit line 22:

android:textColor="@android:color/black" <--- sets the text color in that box

Remember you can change it from a resource identifier (@android:color) to a hex value if you like, or you can declare a color like we learned earlier and call it. Remember to remove the @android if you do that. When you send a message that breaks into multiple parts a small numeric indicator pops up over your send button. If you want to change the color of that, look on line 24. I'll change this one to red:

android:textColor="#cc333333"

to

android:textColor="#ffff0000"

We must also edit line 22 at the very end. You'll see:

android:imeOptions="actionSend|flagNoEnterAction"

change that to:

android:imeOptions="flagNoExtractUi"

This is a partial fix for the landscape issue when typing in your text entry field at the bottom of the screen. When you compose a new message and attempt to enter text into the To: field at the top in landscape you will still get the white screen that takes up half your screen while sharing the other half with the keyboard. I'm working on this and will post the complete solution when it is done. Read the thread for updates.

Bonus - want your enter key back on the keyboard? Here's how to add it, but at the cost of losing your smiley key. You decide which is more useful to you while keeping in mind that pressing the enter key to send your message makes the keyboard disappear. I find that far more useful than smileys considering the limited real estate we have in landscape. To get it back look just in front of the imeOptions we just edited:

android:inputType="textCapSentences|textAutoCorrect|textMultiLine|textShortMessage"

Remove the last part, |textShortMessage. This was telling the app that we were going to enter a short message here so consider that if you end up with issues resulting from the length of your text messages being inputted. You may also need to add actionSend back to your imeOptions we edited. It's supposed to define what the enter key does but in my test it still sent messages when pressed. To run both options it would look like actionSend|flagNoExtractUi. Note the | in between options.

NEXT SECTION - /res/layout/image_attachment_view, video_attachment_view and slideshow_attachment_view

The last few things we need to edit are the message, video and slideshow attachment xml files and the final touch will be editing the styles.xml. Those are all in the /layout dir. Right now if you attach a video or an image to your message you'll notice that the background behind the attachment is white and the buttons are your standard grey with black text. That giant white background bubble you see is an image in your /drawable-xhdpi folder named attachment_editor_bg.9.png and it is the background you see behind image, video and slideshow attachments. Don't worry about it being a .9 - if you decide to edit it you'll only be changing the color of it and won't have to worry about all the horror story/pleaz halp posts you've read in the past regarding .9's. You can even do away with using that image and just set a colored background if you like. To do that we would open up image_attachment_view and look at line 2:

android:background="@drawable/attachment_editor_bg"

Let's change it to a plain black background which will match our conversation background

android:background="#ffffffff"

If you want to edit the color of the text on the buttons then look on lines 6, 7 and 8 that start with <Button and right beside it you'll see:

android:textColor="@android:color/black"

This is the text on the buttons that says view, replace, and remove. If you wanted your buttons to be a different color you could add an android:background="# hexcode" anywhere on the lines labeled button but making sure to keep it inside the />. Make these same edits to slideshow_attachment_view and video_attachment_view. It should be pretty easy to find them as the layout between the files is similar.

NEXT SECTION - styles.xml

So now we're left with a few unthemed parts:

slideshow screen for adding slides is still white with black text
number of messages on the conversation list screen is not colored.
some other odd and end things like your delete message dialog (it's white with ics blue text)

I don't know how to color that number. I've looked through the xmls I feel are responsible and i've tried adding info and so far i've not figured it out but those last few problems can be taken care of by changing our theme. Styles and themes are still pretty confusing to me but let me see if I can make a little sense of it with an example... also the following example is going to be pretty crude.

Say you have an app and let's pretend that app has some windows. The backgrounds in this app are black and it uses a white system font and some various icons. When you delete something in this app let's say your dialog box that pops up is white with blue text. What if you wanted that dialog box to be black and you wanted a different font and color for your app's text? Well you could set the color for the delete dialog background and text separately OR you could use a style. You can create your own styles, similar to how you learned how to create your own colors and you can even edit system styles that are already defined. What if this was a big app, and we had to make many changes to accomplish our background/text change? This is the benefit of using a style - we can make many changes at one time, cutting out a lot of work.

In this example let's pretend we choose a platform provided style for our fictitious app that used the font and font color we wanted and also changes the system menu backgrounds (controls delete dialog box color) to a light grey. We still don't have the background color we wanted for our delete dialog... what do we do? Finally we get to the point of this by editing the style we chose. We could use a translucent background so the delete dialog would show the color underneath it, which would be black and was what we wanted. We leave the other changes alone because we liked them. We would have created our own style while using a system style. This is called using a parent style and "inheriting" its attributes. This means the style we chose in our example would be the parent style and we would "inherit" the other properties of it that we didn't change (the font and font color) while defining the things we did want to change (making our own style).

Not the best explanation in the world and it may still be confusing but read the provided links and hopefully it will make more sense.

Now open up your styles.xml file in your /values dir and take a look at line 23. You'll see:

<style name="MmsHoloTheme" parent="@android:style/Theme.Holo.DarkActionBar" />

From my limited knowledge of styles, it looks to me like there is a theme running on the Mms app (MmsHoloTheme) and its parent theme is the platform provided Theme.Holo.DarkActionBar. We know it's a system (platform) resource because of the @android in front of the style. We're going to change this parent theme and when we do so the slideshow windows will be black with white text and our delete dialog will be black with blue text instead of white with blue.. If we hadn't colored our text on the conversation list it would also color that text white and I think it would also affect the colors of read and unread messages. So change it to read

<style name="MmsHoloTheme" parent="@android:style/Theme.Holo" />

Delete dialog box sure looks better now doesn't it? That's it for the xml edits. I hope it was helpful and hope you picked up some good information along the way.

Now I'm going to give you a quick crash course on some simple color changing of your icons in /drawable-xhdpi. I prefer Photoshop for this as I really don't like Gimp but seeing as how for most it isn't very practical to spend hundreds of dollars for a program you'll only use occasionally I'll attempt to show you how to do it in Gimp first.

NEXT SECTION - IMAGE EDITING

Gimp
Fire up Gimp and for our example open up /res/mipmap-xhdpi/ ic_launcher_smsmms.png. This should be the icon you see in your app drawer. Before we go any further I want to point out that when editing the transparent icons the first thing you must do after opening the image is go to Image --> Mode --> and change it from Indexed to RGB. I don't know why but I have to change this mode and save with Gimp before I can edit in Photoshop. If I open with Photoshop and change the mode it just looks like garbage. I don't know the proper way to fix this yet - so if you're a Photoshop user this information may be useful to you. The image we're working with in this example is not transparent and does not need to have the mode changed since it is already RGB.

The next thing we want is to click colors and then hue-saturation and adjust the sliders. This is a pretty simple way of adjusting the color but it doesn't allow you to set specific colors using hex code. I'm sure it's possible but as I mentioned I'm not really a Gimp user so that's as far as I can take you. Now we'll switch over to Photoshop and i'll explain briefly how to change it there.

Photoshop
In Photoshop let's open that same image and click Image --> Adjustments --> Replace Color. Basically you can play around however you like here but if you wanted to cut to the chase and change it to ICS Blue we would take the dropper tool that is automatically selected and click somewhere around the middle of the image. You're selecting the color you want this tool to change, so click where it's bright green up around what would be the forehead. Now at the bottom part of this window where you have the result color swatch, click it to bring up the palette. At the bottom here you'll have our good friend mr hex code so we can specify the color we want - ICS Blue is 33b5e5. Click on OK and you'll see we have some left over green hue which looks awful. Slide the fuzziness slider over to the right and it should take care of most of it. If you think you still see some more areas with green then click the + eye dropper tool near the top of the window. This will add that color to the replacement palette so it will be switched over as well - and that's how I switch my colors. Thanks to alatedseraph for putting me on the right track to that.

As for coloring the transparent icons I pretty much do it the same way with one rather pathetic exception. I've not taken the time to learn how to do it properly in Photoshop or Gimp so what I did was go to www.fotoflexer.com and colored them there. Sad, I know - it's probably an easy fix but I have spent way too much time on this so I cut a few corners. The quick and dirty of it is this - you upload your image, click the geek tab then the smart recolor button. There's a nifty demo video that explains the whole thing for you from there. For these transparent pngs you will have to select solid color under the type to get the color to change and from there you can go back to Gimp or Photoshop and dial in a better color or work on some gradient effects if that's your thing.

A few things I want to point out -

I have read to not sign system apks and to sign system apk's. I can't seem to figure out who's right. I can tell you from experience that my recompiled mms.apk would not work (didn't show up in app drawer) until I signed it. Same for when I made changes to my SystemUI. I think maybe some people confuse decompiling it with simple image replacement using 7zip.

When you edit certain layouts, the style/theme that is applied to it is overridden by the edits. I think I mentioned this earlier but just in case.

Some people like for their conversations to line up on either the right or left side of the screen. I prefer the criss cross method so I didn't look into changing it. Pretty sure some of the padding values in the message_list_item_send and_recv control that. It would be easy enough to find a themed mms that does that and take a look at its layout to see how it's done.

If there's any interest I have some more info I didn't type out, like changing the color of the text on the delete dialog box and some other things I figured out but felt weren't that relevant or was redundant.
 

·
Registered
Joined
·
72 Posts
Discussion Starter · #5 ·
You're welcome guys. I'm ashamed to say how long it took me to get everything done from start to finish. I sunk a lot of time into it and rewrote it 3 times before I felt like it was complete. I had screenshots lined up for each change but felt like it was a bit much so I didn't post them. When I started I was just keeping notes for myself and it seemed like I really wasn't finding what I needed with Google so I figured "hey why not put all this together when i'm done and share it".
 

·
Registered
Joined
·
802 Posts
Dude seriously man this is awesome. I have wanted to get into things like this but didn't know where to start. You can tell it took a lot of work it will definitely be appreciated

Sent from my Galaxy Nexus using Tapatalk
 

·
su
Joined
·
2,292 Posts
Cool, my first groupie! That's always a plus :)

Enjoy it bro
Seriously. Just recently (with every intention of learning to theme) I setup a dual boot of Mint 12, set it up with my GN, then sync'd the AOKP source.

After completing all this, I opened the appropriate folder (packages/apps/mms iirc) and..... closed it 10 minutes later. I had no idea where to go from there. This helps a ton.

I used to be quite fluent in CSS/XHTML, and although this is slightly different, it's all starting to come back to me.

Sent from my Galaxy Nexus using Tapatalk
 

·
Registered
Joined
·
72 Posts
Discussion Starter · #9 ·
Just hop in and go for it man. I didn't have a clue what any of it meant when I started. I did literally spend hour after hour changing things, adding things and removing things. I would build, sign, copy, run and delete the apk and do that over and over. Not even counting the apktool errors I got from botched ideas and bad edits or the time spent searching for answers to those errors and ideas.
 

·
Moderator
Joined
·
487 Posts
Fantastic write up! I'm inclined to agree with you in terms of just hopping in. Android advances so quickly that even the most thorough themeing guides are out of date fairly quickly. I learned by asking questions and trial and error. 7zip is your friend. I spent hours and hours just pulling apart apks and zips just to see the structure and what things did.

Also great tool for decompiling, recompiling and signing various apks
http://apkmultitool.com/?q=node/5
 
  • Like
Reactions: MikereDD

·
Registered
Joined
·
72 Posts
Discussion Starter · #11 ·
I agree about things moving quickly. That's why I believe it's important to understand why and not just how to do something. As things progress and the code changes you'll be able to progress and change with it.
 

·
Part Time Themer
Joined
·
184 Posts
I have to say thank you for this. I have been trying to do this on my own (semi successfully) by making changes / comparing XML from what others have done. I think I have more pride in knowing I learned a lot more about XML and how it works from this guide than my themed app :)
 

·
Kitten Punter
Joined
·
2,808 Posts
Great guide. Moved to the Theme section and stickied.
 

·
Registered
Joined
·
959 Posts
Stickied already nice man! This is exactly the kind of guides that should be posted and stickied! The indepth of it is amazing and I can say there really isn't much more that I would wanna change about Mms you covered every base! Hopefully this kickstarts some other themers out there to make similar guides for other important apks so that we can finally start getting alot of themes out there!!!
 

·
Registered
Joined
·
335 Posts
Awesome write up! When I turn the phone to lanscape I notice the background changes back to white... do you know where that line is to change when in landscape mode for the background color??
 

·
Registered
Joined
·
72 Posts
Discussion Starter · #18 ·
It's got me stumped for now


I've looked over all the xml files and made some random edits with no luck. I've spent the last 20 minutes editing various parts of compose_message_activity in /layout. If it's not hiding in there I'm not sure what to do. I have to get to bed for now and I probably won't have time to work on it tomorrow so good luck to whoever attempts to figure it out.
 

·
Registered
Joined
·
72 Posts
Discussion Starter · #20 ·
I noticed its not just during composing a message. I'll look again tomorrow. It looks like my ssd drive is dying so I've got to deal with that first. I'm thinking it could be in the framework. If anyone has seen it fixed in another rom or something let me know and I can take a look to see what's different.
 
1 - 20 of 197 Posts
Top