Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    Solved lines around Imagine style assets [maybe only Android]

    QML and Qt Quick
    qml imagine style
    2
    6
    1332
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      refaQtor last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • jpnurmi
        jpnurmi last edited by

        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, ...).

        R 2 Replies Last reply Reply Quote 1
        • R
          refaQtor @jpnurmi last edited by

          @jpnurmi thank you! just what I needed.

          1 Reply Last reply Reply Quote 0
          • R
            refaQtor @jpnurmi last edited by

            @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?

            R 1 Reply Last reply Reply Quote 0
            • R
              refaQtor @refaQtor last edited by

              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
              
              1 Reply Last reply Reply Quote 0
              • jpnurmi
                jpnurmi last edited by

                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. :)

                1 Reply Last reply Reply Quote 1
                • First post
                  Last post