lines around Imagine style assets [maybe only Android]

refaQtor · wrote on 2 Mar 2018, 21:16

I'm trying to implement an app with the new Imagine style available in 5.10.
On OSX it looks fine. But, on Android, I see the little black lines around the edge of buttons (all the larger rectangle controls) that show up just the way they do on the documentation page.

Starting with this blog post, I got the complete image asset file for Sketch, and Exported them all at once. Am I exporting them wrong?

Any ideas how to get Android to render Imagine style controls correctly -- without the lines on the edges?

jpnurmi · 5 Mar 2018, 15:23

The Android device must be a high-DPI device, so it uses image assets exported with a scale factor (@2x, @3x, @4x). In 9-patch images, the outer frame with meta information (stretchable areas, padding, insets) must be 1px wide regardless of the scale factor. Sketch, however, is not aware of 9-patches out of the box, and scales the whole image including the 9-patch frame. You can either install 9-patch-export.sketchplugin, which is in the repo next to the imagine.sketch template, to make Sketch export 9-patch images as desired out of the box, or you can use a tool like ImageMagick if you prefer, to batch crop the extra pixels (1px from *@2x.png, 2px from *@3.png, ...).

refaQtor · wrote on 5 Mar 2018, 15:23

@jpnurmi thank you! just what I needed.

refaQtor · 27 Mar 2018, 16:11

@jpnurmi well, thanks again for directing me to the plugin script, but, now that I finally get back to this project, I do not understanding how to apply it in Sketch.

the script "onExportSlices(context)" suggests that it should run during Export. But, it doesn't seem to. I've run it while the file was open, also, which didn't seem to do anything.

What am I missing in Sketch? the Sketch documentation is, dare I say, sketchy "work in progress"
Any tips to use that export plugin from Qt?

refaQtor · wrote on 27 Mar 2018, 16:11

if it can help anyone else who comes looking...
I used ImageMagick

mogrify -shave 1x1 -path ../style *@2x.9.png
mogrify -shave 2x2 -path ../style *@3x.9.png
mogrify -shave 3x3 -path ../style *@4x.9.png

jpnurmi · wrote on 5 Apr 2018, 21:37

First, you need to download the plugin... in a way or another. :) You can, for example, clone the qt/qtquickcontrols2.git repo, or grab qtquickcontrols2-everywhere-src-5.10.1.zip from download.qt.io. Then, browse to src/imports/controls/imagine/design and double click 9-patch-export.sketchplugin. Sketch should inform that the 9-patch export plugin has been installed.

You can export individual image assets from the Export pane, or export all exportable image assets with the Export tool button in the top right corner. The script callback gets called either way, and 9-patch image assets are simply detected by the ".9" suffix in the image asset export names.

PS. Yeah, the whole process should be documented and there should be a simple download link in the docs. I guess somebody forgot something. :)