How to create your own skins


#1

This guide is for skin designers only. If you just want to know how to install a skin, look at this topic instead.

Here is a guide explaining how to create your own skins for Smart Keyboard Pro.

These skins must be written in a file format called “Open Skin”.

You will need:

  • The latest version of Smart Keyboard Pro
  • Android Studio
  • Some artistic skills :wink:

An Open Skin file is a simple .zip file, which you can download from anywhere and install on your phone storage.

In the current version of Smart Keyboard Pro you will need to copy skin files in the directory /sdcard/skins (i.e you need to create a “skins” directory at the root of your phone primary storage). The valid Open Skins in this directory will appear at the end of the skin list in the keyboard settings.

Download and extract the Android sample skin to see how is structured an OpenSkin file.

A skin archive contains the following files:

  • skin.xml
  • drawable/*.png
  • drawable-hdpi/*.png

The most important file is the skin.xml, which contains the description of the skin: name, images, colors, etc.

The images are located in either drawable or drawable-hdpi directories. All the images in drawable will be used on phones with MDPI screen resolution (160 dpi), which is the historical resolution of the first Android phones. A skin must contain images for MDPI phones to ensure compatibility. The images in drawable-hdpi are of course used on HDPI phones (240 dpi). It is not mandatory to provide HDPI images, but it is strongly recommended, otherwise the MDPI images will be scaled on the fly when loaded on a HDPI phone, and the skin will look blurry (not to say ugly).
The sample Android skin contains images for both MDPI and HDPI screens.

Now, an important thing to know is that most images for the skin (all the background images, actually) are in the “.9.png” format (see the sample skin), which is the “NinePatch” format developed specifically for Android by Google. A NinePatch image is a png with additional information to make the image stretchable easily. To create a NinePatch image, you can use the draw9patch tool contained in Android Studio. You can also create such images without draw9patch; you just need to add a 1-pixel transparent border around your image, and put black pixels where needed to define the stretch zones of the image, as done by draw9patch.

Now, let’s see how you can create your own skin:

  • Extract the sample skin.
  • Replace the images in drawable and drawable-hdpi by whatever you want
  • Edit the skin.xml file, change the skin name (keep the “1.0” version, it’s not the version of the skin, it’s the version of the schema!) and put the correct file names for images. Note that you must not put “drawable” or “drawable-hdpi” in the image file name, as the correct directory is computed at run time when the skin is loaded.
  • In the sample skin there is no image for the background, but a color gradient. If you want to use a background image, just remove the color-top and color-bottom and put an image tag instead as explained in the comment.
  • Use your favorite archive tool to create a zip containing the skin.xml and drawable* directories. You can use any name for the zip file, but it’s better to find a unique name to avoid conflicts (same thing for the skin name you defined in the skin.xml)
  • Upload the skin file to your phone storage in “skins” directory
  • Go to Smart Keyboard skin settings, and test your skin :wink:
  • You should test your skin on at least a MDPI and a HDPI phone. If you can’t do this, use the Android emulator included in Android Studio. This is always a good idea when creating skins that will be uploaded online, as more people will be able to enjoy the skin.
  • Share your skin on this forum (there may be a web repository in the future)

IMPORTANT: when you create the zip archive, don’t put the files in a subdirectory, everything (skin.xml file and drawable directory) must be at the root of the zip.


Wallpaper for my keyboard
Let me just say that I myself am no way shape or form. Any kind of Program/Files/folders kind of Guy. But I am trying to Learn. I do know that my keyboard is not Open. And I've tried every way I could find on with (file reading App)With no luck
#2

Hello, I wanna design my own skin. I’ve made several skins, posted it on my Blog and helping people in creating skins for them. but one thing I’m not sure about, how to make different button for the spacebar. I wanna make the spacebar have different button, I’ve already prepared the button image. how to call the image in to the xml? what code should I add in the xml file?


#3

Hello, you need to reference the image in a “space” tag in the xml, within the “symbol” section, as in the sample skin.


#4

Sir, I don’t mean the symbol/icon. I mean is the “button/key” background. as for the normal state and pressed state. there are only some key called “mod” and “shift” in the xml that works for shift and alt button background. I need to know about the spacebar button background. what code should I add?:disappointed_relieved:


#5

Indeed you can customize the background of mod keys, but for now there is no way to change the background of the space key, sorry.


#6

Helo sir do u have tutorial video on how to make smart skin keyboard .thanks