Create your own skins

[cyril]

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.

[c00ller]

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).

[meyergre]

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

[yhwhsupports]

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.

[meyergre]

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

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

[yhwhsupports]

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.

[meyergre]

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.

[cyril]

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:

Code: Select all

  
   <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:

Code: Select all

  
  <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

[c00ller]

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:


Stock Gingerbread (using CyanogenMod 7 theme engine's "Cyanbread"):


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"):

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:

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?

[cyril]

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:

Code: Select all

    <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?