How to create your own skin in Genymotion Desktop?

Source:

Published:

Keywords: Genymotion Desktop, skin, background.png, skin.json, skins, offset, resizeMargins, display

Document ID: https://support.genymotion.com/hc/en-us/articles/8845619728285#split1

Genymotion Desktop supports skins. Genymotion Desktop comes with a set of four default skins (two phones and two tablets).

To create a custom skin, you need two elements. The first element is a background image named background.png. The second element is a JSON file named skin.json.

Place these elements in a new folder inside the skins directory. The location depends on your operating system:

Examples of folder paths:

Background image

The background image must be in PNG format and must be named background.png.

For example: background.png

JSON File

Then you need to create a JSON file named skin.json, which contains the following information.

Name "name": string This attribute allows you to give a name for your skin. After creation, you should find your skin in the Virtual device installation window if you want to create a new device with this skin:

Display "display": { "offset": { "x": int, "y": int }, "size": { "width": int, "height": int } }

The display attribute sets the size and offset of your skin.

offset This parameter sets the offset between your skin and the device display.

size This parameter sets the width and height of the virtual device resolution.

resizeMargins "resizeMargins": { "left": int, "top": int, "right": int, "bottom": int }

The resizeMargins attribute defines the resizable margins of the window. Note that the window will only be resizable from bottom and left sides, but you still need to define the other sides in case the virtual device is rotated.

Example

Content of the skins folder: 

~/.Genymobile/Genymotion/skins/skin-test/
├── background.png
└── skin.json

Content of skin.json: 

{
  "name": "skin-test",
  "display": {
    "offset": {
      "x": 150,
      "y": 150
    },
    "size": {
      "width": 720,
      "height": 1280
    }
  },
  "resizeMargins": {
    "left": 75,
    "top": 75,
    "right": 75,
    "bottom": 75
  }
}

Here is a diagram explaining precisely each parameters from skin.json:

[no content kept for images in this text-only rendition]