Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct
Creating custom android component (Bottom App Bar with cradle effect)
hi every one,
i would like to recreate one of the android components in Qt/Qml.
It is a mix of Floating Button which i think is The RoundButton in qml and a cradle effect on the footer side. just like the image below.
any ideas would be appreciated.
more information about the android one:
a couple of way come to mind on how to do it.
The easiest would probably be to simply use an Image component as button and place it above the footer, and with some photoshop skills, it should look convincing enough
Use a Round button, and draw the footer yourself, or the border at least, can be easily done with a Canvas component
I guess you want it animated like that : https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F1KJSld6h82fzkcafrHCDFPOITibpWxF-5%2Fbehavior-layout-primary.mp4 ( taken from here : https://material.io/components/app-bars-bottom/#behavior ).
So an image won't really do it.
There are multiple way of doing a bar with a hole.
Canvaslike J.Hilk said, but that won't be the most performant solution I guess
With a custom
With a custom "raw"
I would personnaly go with a
Then just add a shadow (with
DropShadow) and your button with
thanks for sharing your thoughts.
Canvas seems more interesting to me since it will give more options to draw custom components of my own.
i would appreciate if you share some document links on how to use it in QML.
In the onPaint "signal" you do all your drawing. It uses HTML 5 syntax, so you may have to look for external documentation like this one:
to get a craps on all the possibilities
A quick note, Canvas is nice for small custom changes, like changing the border of your item or drawing simple shapes.
For anything more fancy, with lots of points to draw or lots of different shapes, the solutions posted by @GrecKo are better suited, but more difficult to understand/do.