[GUIDE][TUT][.9.png] Theming your SamsungIME Keyboard

lacoursiere18

Senior Member
Jan 9, 2013
4,182
7,001
0
LbTs
Hey guys,
I was asked a week or so back to make a guide so others can theme the Stock SamsungIME.apk the way they like. I have made my thread to do this and you can put in request if this guide is not helpful(which I hope it is).
I will answer as many questions as I can, time permitting, and be as Noob friendly as I can, as well. I know this guide will not be perfect and there might be some things I am leaving out, and if so tell me, I will adjust the OP with any suggestions or changes. So here goes nothing...

Things you need:
Android SDK
Java JDK and JRE
Apktool
Notepad++
xUltimate-d9pc
Photo Editor (Gimp/Photoshop)

Before we begin, I am not going to go into how to load/decompile/recompile apks.. There are some good guides out there and here are some..
After you have the SamsungIME.apk totally decompiled you will want to open the folder it decompiled into and start with the res/drawables-sw359dp-xhdpi folder. In this folder there is all the pngs you need to edit. For starters the keys themselves..
You want:
sip_key_bg_normal.9.png


sip_key_bg_option.9.png


sip_key_bg_pressed.9.png
As you can tell, by the name, these are not normal pngs. You will see a 1 pixel border on all sides of the image. When editing the png either erase them or resize the canvas of the image. Just subtract by 2 form the height and the width, but remember when you save it re open it and adjust the canvas size back to the way it was. As my understanding of these goes, they are named this way because Android recognizing these .9.pngs and stretches them.. When I first attempted editing these I would have nothing but problems, of course because I was doing it wrong. I never could understand where the lines go and what they actually do. Thats probably because I was trying to do it with transparent/semi-transparent images and could not see the actual image expanding. Well when you are editing these with draw9patch, I noticed two very important things to look at (for the keyboard). The window to your right is how the actual image will look when expanded, but to see that you have to go to the bottom of the screen and the second scroll bar, move it all all the way to the right.




You will notice that it stretches the image.. This is the same thing Android does.
The middle image needs attention here because it expands it horizontally. So that means when you expand it all the way thats what you spacebar will look like. .


You notice that these edges (red lines) Are not defined they are rounded.. Because they are not patched correctly.


Notice the difference? This after it was patched with the proper line alignment.

To start you want add to full lines on the bottom and the right side. Next is the top and the left side. These are the lines you need play with to make you image look right. I used to only add a 1 pixel dot in the middle and one pixel line on the left. But when I started getting more advanced with photoshop/gimp I noticed my images would not looking the same. When you add gradients or borders to you keys, seeing the image on the right expanded is important because you will draw you lines to make you image look like it did in photoshop/gimp. NOTE: Don't leave any space in the lines to the right and on the bottom. You can, however, do so on the left and top but it will distort your png.
Here are a few guides to help you if you have anymore questions:


The next image of importance is:
qwerty_keypad_bg.png

This is the background of the keyboard.. NOTE: there is also one of these located in res/drawables-sw359dp--land-xhdpi, the only difference being the above image is for Portrait and land is for Landscape. Also, they are two different resolutions so be careful when changing them. You can change this image to anything you want.. It is a normal png so therefore no patching or further steps are needed.
Next would be all the other option pngs, backspace, space bar, voice, settings, enter key, etc. You will will find these starting with the word qwerty_.
So example:
qwerty_key_icon_enter.png


This is the enter key as it sits on your keyboard.. Yes there are other ones but there are for different actions.
Another thing we might want to change is the color of the CAPS key when it is enabled.
That png is named:
qwerty_key_bg_shift_capslock.png

As you can see a lot of these are named exactly what they are..well some at least..

Next is .xml edits. You want to locate res/values-sw359hp-xhdpi/colors.xml. You will need to open this with notepad++ to edit colors of the key text, pressed key text, shadow of those text, space bar lettering, etc. You will only (or I only do) need to focus on the first 12 lines. They pretty much explain themselves by there names.

Code:
<color name="normalkey_shadowcolor">#ff000000</color>
    <color name="functionkey_shadowcolor">#ff000000</color>
    <color name="functionkey_labelcolor">#ffe2e2e2</color>
    <color name="normalkey_labelcolor">#ffe2e2e2</color>
    <color name="pressedkey_labelcolor">#ff122438</color>
    <color name="disablekey_labelcolor">#7fe2e2e2</color>
    <color name="popup_normalkey_labelcolor">#ffffffff</color>
    <color name="popup_pressedkey_labelcolor">#ff2d5a8c</color>
    <color name="normalkey_extra_labelcolor">#ffe2e2e2</color>
    <color name="spacekey_labelcolor">#ffb6b6b6</color>
You'll notice that the colors are hex codes.. So the first two letters or numbers is for the transparency.. The next six define the actual color.

After we have edited our xml we can go ahead and recompile the apk. You should recompile with no errors. If you do encounter an error it's possible that you edited the color wrong and made it seven letters instead of eight or vice versa. Make sure that you transfer the old AndroidManifest.xml and META-INF folder form your original APK and transfer them to your new APK in SamsungIME/dist/.

FInally, you can copy you NEW SamsunIME.apk to your sd card, reboot into recovery. I prefer this method (Thanks to @Deckoz2302) because I would have trouble with APK's fully copying through adb. When in recovery select Mount, then click System. Select back. Then select Advanced, than File Manager. When in File Manager goto wherever you put your new APK. Copy it. Then go to System/app/ and hit Select and slide to copy. Reboot!

:good:Special THANKS to: @Deckoz2302: Best developer I have ever talk to! @Rizal Lovins, @grilleld, @Arsaw, @twanskys204, @Winterlove, @GuneetAtwal and I REALLY hope I didn't leave anyone out! If I did I'm sorry, tell me and I will update!:good:​
 
Last edited:

JeramyEggs

Senior Member
Jan 4, 2011
1,107
420
0
Charleston Il
FIRST......!!!
Thanks brother, I am going to give this a go tomorrow.

Today, young ,men on acid realize that all matter is merely energy condensed to a slow vibration, we are all one consciences sharing itself subjectively, there is no such thing as death, life is only a dream, and we are just imaginations of ourselves And now to the weather.....
 

Shamestick

Senior Member
Oct 21, 2012
855
271
0
@Shamestick - Do you use Polaris to run Windows? That could work possibly.

Sent from my SCH-I605 using xda app-developers app
I do not, and I haven't gotten a copy of windows to dualboot with yet either. My problems always come whe i try to go to the downloading site for java, it just will never open on chrome or safari
 
S

Superwolf77

Guest
Text color SamsungIME.apk Note3-MOD

I have a big problem.

I decompiled the SamsungIME.apk from Note3-MOD to change the color of the KEY-Text from BLACK to WHITE.
But I can't find the right XML and location where the code has to be changed.

Can someone help me in this topic?
 

mikep2323

Senior Member
Dec 14, 2011
626
180
43
Thanks for your tutorial. I have a question about adding a backround image for the keyboard.Not sure if thread is to old so please respond if you an answer question and ill write it . thanks