Create your own skins

Okay thank you. I am going to try to get this figured out..

Hi there,

is it correct that there is no way to change the background color of a selected word in the suggestion bar?
It seems to be always orange, but it would be really cool to modify it.

tls wrote:Hi there,
is it correct that there is no way to change the background color of a selected word in the suggestion bar?
It seems to be always orange, but it would be really cool to modify it.

That's right, but this could be added in a future version of the skin engine.

Please don't interpret this as a demand, but I just want to cast my vote for requesting skinable key popups (both for regular and long-pressing).

Just uploaded the update of my skin designer's guide for beginners.
enjoy

I have no idea how to do any of this, but I thought I'd play around and see if I could modify a current skin with my Droid X. I copied the zip file and modified the "pressed.9.png" by coloring it, and replacing it in the zip, I also modified the name in the skin.xml to reflect the new name of the zip file, and then the keyboard just shows up as the black keyboard, no skin, no pressed image (the file is there, but nothing happens when you press a key on the keyboard). The skin works fine up until I replace the pressed.9.png file. Can anyone explain to me why this doesn't work? Thanks. Again, I know I'm a tard, I'm just looking to understand why this simple modification can't be made. I also tried unzipping the file with Astro File Manager and altering the image that way, and then recompressing it into a zip, and this doesn't work either.

yhwhsupports wrote:I also modified the name in the skin.xml to reflect the new name of the zip file

It doesn't matter, you can name the ZIP as you want, and give the name you want to your skin. They're not linked

yhwhsupports wrote:the keyboard just shows up as the black keyboard, no skin, no pressed image

Usually, this happens when you made a mistake with a picture.

• Which program did you use to edit it ?
• Did you check your picture with the draw9patch utility ?
• Didn't you alter the filename ?

You can have a look here, I explained the whole making from scratch in a pdf :
http://lepetitpingouin.fr/smartkeyboard ... 0guide.pdf

I did change the name of the skin in the skin.xml file, and even tested the skin with its new name and it works perfectly (I edited the skin.xml with the Silver Edit Lite app on my phone), and then I took the pressed.9.png and colored it with the native photo editor on my phone, and when that didn't work I tried editing it with Pic Say Pro. That didn't work either. Once I replace the pressed.9.png file, that's when the skin shows up as all black. I only edited the hdpi file, not the mdpi, and then I tried editing it via Paint on my laptop, but that yielded the same problem. Like I said, I have no idea what I am doing, I was just looking for an explanation why this doesn't work. And just in case you need this info, I didn't color the transparent pixels that are needed for the 9 patch. Anyway, I didn't mean to waste anyone's time, I was just wondering if anyone might know the precise reason why this doesn't work. Thanks.

don't know for the editors in your phone, but Paint on your laptop does NOT handle transparency, that's probably why you got a black skin
try using Paint.NET or the GIMP, or even Photoshop if you know it.

New features in the latest 4.3.1 beta version:

* Candidate highlight background: defines the background of the pressed candidate (which is yellow by default)

You need to add a tag "highlight-background" in the "candidates" section:

<candidates>
     <!-- Define the background of the suggestion bar -->
     <background>
        <image>gb_suggest_strip.9.png</image>
    </background>
    <!-- Define the divider bar between candidates -->
    <divider>gb_suggest_strip_divider.png</divider>
    <!-- Define suggestion text color -->
    <colors>
      <!-- Color of the typed word -->
      <normal>#FFFFFFFF</normal>
      <!-- Color of the recommended word -->
      <recommended>#FFFCAE00</recommended>
      <!-- Color of the other words -->
      <other>#FFFCAE00</other>
    </colors>
    <!-- Define the background of the highlighted candidate -->
    <highlight-background>
        <image>candidate_highlight.9.png</image>
    </highlight-background>

* label font!

Add a new section in your skin.xml:

<fonts>
    <label>Chantelli_Antiqua.ttf</label>
  </fonts>

The font file has to be placed in a "font" directory in your skin zip (so it's "font/Chantelli_Antiqua.ttf" in this example)

Examples in the uploaded skin.

Feedbacks are welcome!

[EDIT] Now available in version 4.4.0 on the Market

Thanks for adding more theming ability, cyril
I was successfully able to create my own cyan candidate_highlight.9.png

One minor thing I noticed is the font color of the pressed candidate stays the same. The stock Gingerbread keyboard changes the text to white, which looks better.

Smart Keyboard Pro:
External image (dl.dropbox.com)

Stock Gingerbread (using CyanogenMod 7 theme engine's "Cyanbread"):
External image (dl.dropbox.com)

While on the topic of candidate colors, I just noticed that Smart Keyboard Pro isn't really giving me the colors I want for the color of the recommended word.

This is the stock Gingerbread (using CyanogenMod 7 theme engine's "Cyanbread"):
External image (dl.dropbox.com)
I simply used image software color picker and determined that the color of the word "Most" in hex is 80D6DE, and applied it to <recommended>#FF80D6DE</recommended>, and this is what I got in Smart Keyboard Pro:
External image (dl.dropbox.com)
As you can see, the color of the suggested word looks very dissimilar and is significantly darker. However, the colors for <other>#FF12BDD0</other> look consistent enough.

Any suggestions for this issue I'm having?

You are right, it's better to also customize the text color for the highlighted word. I updated the beta version with a new feature, now you can add a "highlight" color in the set of candidate colors:

<colors>
      <!-- Color of the typed word -->
      <normal>#FFFFFFFF</normal>
      <!-- Color of the recommended word -->
      <recommended>#FFFCAE00</recommended>
      <!-- Color of the other words -->
      <other>#FFFCAE00</other>
      <!-- Color of the highlighted candidate -->
      <highlight>#FFFFFFFF</highlight>
    </colors>

About your color problem, I don't know, I would have to check...

Any chance to test the font feature?

Thanks for the <highlight> option. The next time you update a beta, could you change the name? The only way I knew I had a different beta was to MD5 sum it.

Anyway, I found the source of error for my <recommend> color problems. A while ago, before the candidate bar and text was even themeable, I went to Advanced settings > Candidate color and changed it. Now, no matter what skin I choose, this option overrides the <recommend> color... how can I stop this?

I haven't gotten a chance to test any fonts. I like the default font anyway

working fine

using "Orbitron" font from Google.
Nice feature, thanks

c00ller wrote:Anyway, I found the source of error for my <recommend> color problems. A while ago, before the candidate bar and text was even themeable, I went to Advanced settings > Candidate color and changed it. Now, no matter what skin I choose, this option overrides the <recommend> color... how can I stop this?

Indeed, at the moment there is no simple way to stop using this option, except reinstalling the app or editing preferences.xml manually...

Hi folks,

i'm desperately trying to build and install my skin.
how to install one i downloaded is simple. - to archive and install one by myself ... not.
i've no idea what i'm doing wrong.

what i'm doing:
i download the sample "android-plus"
-> pushing it to "skins"-folder
-> "Android+" shows up in the list

i download the sample "android-plus"
-> open the archive on my mac
-> archive it again (not important where i'm doing it or with which tool)
-> pushing it to "skins"-folder
-> "Android+" doesn't show up in the list

do you have any idea what i'm doing wrong here??

cheers nopodi

Be careful to package it as ZIP file (not RAR, TAR, GZIP, or specific Mac format), without any password, encryption, or whatever. If it's still not good, try using the zip command-line tool in a terminal... I guess Mac OS's terminal is close to linux's one.

meyergre wrote:Be careful to package it as ZIP file (not RAR, TAR, GZIP, or specific Mac format), without any password, encryption, or whatever. If it's still not good, try using the zip command-line tool in a terminal... I guess Mac OS's terminal is close to linux's one.

it's a zip archive every time. set on "normal" no password. even the rights on the files in the zip are the same.
i even tried it with the "Compress (Encrypt)" Option in MIUIs build in "ES File Explorer" …

Take care to zip your drawable folder and your skin.xml directly on the root of the archive, and not in a folder

meyergre wrote:Take care to zip your drawable folder and your skin.xml directly on the root of the archive, and not in a folder

as is said. both zip files look exactly the same. even in win-rar on a pc. - i have no idea what happens during this process ...
this problem never occured before?

NoPodi wrote:

meyergre wrote:Take care to zip your drawable folder and your skin.xml directly on the root of the archive, and not in a folder

as is said. both zip files look exactly the same. even in win-rar on a pc. - i have no idea what happens during this process ...
this problem never occured before?

ok - i'm sorry for talking crap! (in my first post ...)

now everything is working just fine and i'm excited creating my first skin ... i think i'll go after the windows phone 7 request.

cheers nopodi

Hey, if you found what was wrong, post the solution, so other people facing the same issue would find it (and I'm cusious too )

oh. i though it is obvious. ^^
i clicked the folder and did the archive command. with that solution you get the sub-folder structure so zip/folder/drawable,drawable-hdpi,skin.xml ...
so you were right! ... i was doing it wrong

my next problem though is to get the buttons woring in photoshop/illustrator combination ... is a bit tricky not to look too bad ...

Link wrote:Here is another that I tried to model after a laptop. What do you guys think? I am not to happy witht he colors yet. ALSO, anyone know why the characters and the special characters are so close together?
- Link

Hey buddy! I really like your "laptop button" style keyboard. It looks very cool Could you please send me some link of it? Thanks

Gostly

gostly wrote:

Link wrote:Here is another that I tried to model after a laptop. What do you guys think? I am not to happy witht he colors yet. ALSO, anyone know why the characters and the special characters are so close together?
- Link

Hey buddy! I really like your "laptop button" style keyboard. It looks very cool Could you please send me some link of it? Thanks

Gostly

Well yea...id like to have this skin too its very kickass...

Cyril, could you please post the PNG files for the black shift, delete, enter, space, mic and search images that you used on the default white and iPhone skin? I want to use them to tweak some skins. I don't know how to make them, I just tweak the XML and mod the 9.png files but I need black images for the rest of my skin tweaks (you can check out the Omega skin, Resurrected Skins, and pages 8-10 of 3DKey Skin to see what I've tweaked, I've got about 1500 downloads, and I'm sure people would appreciate the others I have to post). Thanks.

+1 to his request.. you can send cyril a private message..

I did that 1st. No reply...yet.

Can somne do me a huge favor and make this keyboard theme into an apk so I can use it with perfect keyboard. It is called 3dkey blue and it was created by someone on this forum "link" I guess is his username. Here is the like http://www.dexilog.com/smartkeyboard/fo ... php?id=132 . Again I would really appreciate it.

Can somne do me a huge favor and make this keyboard theme into an apk so I can use it with perfect keyboard. It is called 3dkey blue and it was created by someone on this forum "link" I guess is his username. Here is the like http://www.dexilog.com/smartkeyboard/fo ... php?id=132 . Again I would really appreciate it.