Qt World Summit: Register Today!

[SOLVED] Best way to create image based button with variable size

  • Hi,

    I'm trying to create a button (background is an image with ROUND corners) that streches over the whole horizontal of a mobile device.

    As I also have practice in web designing, I know that this is solved with three images:

    1. the left part of the button with its two round corners (about 5 pixels, not strechable)
    2. the main part of the button --> a 1 pixel extract of the button that is repeated as often as needed
    3. the right part of the button with its two round corners (also about 5 pixels, not strechable)

    My question now:
    Is this also the most comfortable solution for QML?
    If not, how can I manage variable image sizes when simple streching would result in horrible look (like ellipse buttons --> not the wanted effect) ?

    Thank you in anticipation!

  • Moderators

    Take a look at "BorderImage":http://doc.qt.io/qt-5/qml-qtquick-borderimage.html QML component.

  • Hi sierdizio,
    thank's for that hint, that is a great functionallity!!

    I have to play a bit with the border widths, because I use different button sizes with the same image, so it looks a bit dirty while using the same settings for every button...

    Thank's :-)

  • Moderators

    You are welcome, happy coding! :-)

Log in to reply