Fork us on GitHub

Skin Designer

Build Codename One device skins thru the web/desktop
Post Image

Skin Designer

While the Codename One skin file format is trivial it is a bit under documented, to partially alleviate this problem we created a simple tool: Skin Designer.

This tool allows us to create a device skin from two images (landscape & portrait). This skin file can then be used with the Codename One simulator & also contributed so other developers can enjoy it!

The first version of this tool is relatively simple but should allow you to create an contribute skins to our skin database as explained below.

Using the Skin Designer

The Skin Designer is a Codename One app that you can checkout from github. You can also run it directly in the web browser or install it locally on your Mac or Windows desktop from its demos page.

You can also run it on your mobile devices but it might not be as convenient

The main value of building this app in Codename One is the ability to run it in the web and the desktop unmodified. It also serves as an excellent reference sample for developers.

How to Use it?

The skin designer tool allows you to visually design and save a Codename One skin file that you can use to simulate a custom device type. To use this tool you need two pictures of the device in portrait and landscape mode. The screen area of these pictures must match the device screen size!

To find files like that just search for the name of the device you are looking for followed by "mockup". This will bring up device mockups you can often use. FYI be sure to read the license of the graphic you use if you intend to publish this, many creators require attribution!

Creating a Skin

You will need to select the device image in portrait/landscape, you can then enter the screen dimensions in pixels that should match the area within the graphic.
You can enter the X/Y position or use the hand "pan tool" to visually position the screen within the graphic.

Check out the help page within the application for detailed explanation of the skin creation process.

Submitting the Skin

Assuming your skin file doesn’t violate any copyrights we’d appreciate if you submit it to our official skin repository!
If your skin file requires attribution please include that within the skin image…​

Start by navigating to github.com/codenameone/codenameone-skins & fork the project. Drag your skin file into the OTA directory. Create a 112x112 icon png file for the skin and drag it into that directory as well.

Next select the Skins.xml file and edit it. Add your skin in a similar way to the other skin files and commit.

Now click the submit pull request button to submit these changes for inclusion in the main repository.

Skins created with the web interface will only start working with the upcoming Friday release as they require a bug fix in the simulator
Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.