Create your own skins

This is where you can share and download open skins for Smart Keyboard!

Create your own skins

Postby cyril » Sat Sep 04, 2010 1:45 pm

Instructions for skins users

See this topic for instructions.

Instructions for skins designers

Here is a guide to explain how to create your own skins for Smart Keyboard (Pro)! These skins must be written in a new file format called "OpenSkin".
You will need:

  • The latest version of Smart Keyboard Pro (or at least SKP 3.4.0)
  • Optionally, get the Android SDK containing the Android emulator.
  • Some artistic skills ;)

An OpenSkin file is a simple .zip file, which you can download from anywhere and install on your SD card. 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 when you mount your SD card on your computer). The valid OpenSkins 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 the Android SDK. 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 SD card in "skins" directory
  • Go to Smart Keyboard skin settings, and test your skin ;)
  • 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 the SDK. 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.
Cyril
User avatar
cyril
Developer
 
Posts: 2076
Joined: Tue Feb 02, 2010 4:02 pm
Location: Nice, France

Re: Create your own skins

Postby Soaa- » Fri Sep 10, 2010 3:58 pm

Hiya! I tried making a skin the moment I saw this. The background isn't showing up though. Am I doing anything wrong? Attached is my source. Based on the android keyboard source. Thanks!
Attachments
best-keyboard-src.zip
(47.74 KiB) Downloaded 11471 times
Soaa-
 
Posts: 3
Joined: Fri Sep 10, 2010 3:54 pm

Re: Create your own skins

Postby cyril » Fri Sep 10, 2010 7:51 pm

Hello
I just tried your skin and it works perfectly on a HTC Hero. Can you also post the command you used to build the zip, and the zip itself?
And don't forget the hi-res images ;)
Cyril
User avatar
cyril
Developer
 
Posts: 2076
Joined: Tue Feb 02, 2010 4:02 pm
Location: Nice, France

Re: Create your own skins

Postby Soaa- » Sat Sep 11, 2010 4:36 am

Here's the zip I installed on my emulator. I haven't tested it on my phone yet, because I wanted to confirm that it was working before I did so.

The command I used to compile it was the exact same as the one you provided, but with the appropriate file name.
Attachments
best_keyboard.zip
(41.6 KiB) Downloaded 2981 times
Soaa-
 
Posts: 3
Joined: Fri Sep 10, 2010 3:54 pm

Re: Create your own skins

Postby cyril » Sat Sep 11, 2010 9:11 am

Well, your skin also works in the emulator, but you probably created a HDPI device instead of MDPI, that's why it doesn't work (as you didn't change the HDPI images). By the way I need to add the shadow color feature to make your skin look better
Cyril
User avatar
cyril
Developer
 
Posts: 2076
Joined: Tue Feb 02, 2010 4:02 pm
Location: Nice, France

Re: Create your own skins

Postby Soaa- » Sat Sep 11, 2010 11:55 pm

No, I created an MDPI emulator. The buttons are showing up correctly. The background isn't though. I'm planning on making HDPI images, but only wen I get MDPI working the way I want.
Soaa-
 
Posts: 3
Joined: Fri Sep 10, 2010 3:54 pm

Re: Create your own skins

Postby cyril » Sun Sep 12, 2010 3:57 pm

I tested it on a real HTC Hero and on the emulator, and it looks like this
Attachments
device.png
device.png (34.31 KiB) Viewed 61541 times
Cyril
User avatar
cyril
Developer
 
Posts: 2076
Joined: Tue Feb 02, 2010 4:02 pm
Location: Nice, France

Re: Create your own skins

Postby BinaryBulge » Mon Sep 13, 2010 6:01 am

Good job pushing this feature forward, experimental or not. I will definitely work as fast as possible to get support for this into my keyboard as well (I won't be mentioning the name of this keyboard as I didn't come here to spam my app!).

One thing that I think is a showstopper for me - we definitely shouldn't expect users to install the Android SDK to be able to make skins. I know we need the compiled 9-patch images... but is there another way? Like loading/parsing the 9-patch images and turning them into bitmaps ourselves under the hood, without requiring the aapt tool? I think it'd be worth the extra work just to make it easier for the user.
BinaryBulge
 
Posts: 2
Joined: Mon Sep 13, 2010 5:56 am

Re: Create your own skins

Postby cyril » Tue Sep 14, 2010 9:20 am

Yes the goal is to build skins without aapt, but for technical reasons that's not trivial
By the way I updated the skin sample and the beta version, so skins must be updated too:
- openskin tag has been renamed into skin
- special has been renamed into mod
- shadow colors have been added
Cyril
User avatar
cyril
Developer
 
Posts: 2076
Joined: Tue Feb 02, 2010 4:02 pm
Location: Nice, France

Re: Create your own skins

Postby cyril » Tue Sep 14, 2010 4:14 pm

So, thanks to BinaryBulge the Android SDK is no more needed! I updated the guide and sample skin to take the changes into account.
Hopefully the skin format will not change too much starting from now!

@Soaa- : I attached a modified version of your Best Keyboard skin to make it compatible with the latest version
Attachments
best.zip
(24.84 KiB) Downloaded 3586 times
Cyril
User avatar
cyril
Developer
 
Posts: 2076
Joined: Tue Feb 02, 2010 4:02 pm
Location: Nice, France

Next

Return to Open Skins

Who is online

Users browsing this forum: No registered users and 3 guests